<template>
    <div style="background:#F2F3F7;">
        <div style="width:1200px;margin: 0 auto;">
            <div style="padding-top: 20px;">
                <el-link :underline="false" v-if="!mydetails" @click="toolback" style="font-size:14px;cursor:pointer;">开源专区>{{tool.name}}</el-link>
            </div>
        </div>
        <div style="display: flex;justify-content: center;">
            <div>
                <div style="width:920px;margin:0 auto;" :class="mydetails?'person':'noperson'">
                    <div style="background:#FFF;" :class="mydetails?'nobgnk':'bgnk'">
                        <div class="keyda" style="margin: 35px;display: flex;">
                            <div style="width:80px;height: 80px;margin-right: 35px;">
                                <img src="/assets/tool/detailImg.png" alt="">
                            </div>
                            <div>
                                <div class="keydap">{{tool.name}}</div>
                                <p :title="tool.toolDesc" style="cursor:pointer;font-size: 15px;line-height: 25px;color: #4D4D4D;font-weight: 400;width: 742px;"> {{tool.toolDesc | ellipsis}} </p>
                                <div style="display: flex;flex-wrap: wrap;width: 742px;align-items: center;padding: 13px 0;height: 74px;background: #F2F3F7;">
                                    <div class="toolprice" style="margin-left: 30px;">
                                        <div>工具价格：<span style="color:#E84C3D;font-size:24px;margin: 0;font-weight: bold;">¥{{tool.price}}</span> </div>
                                    </div>
                                    <div class="toolprice">
                                        <div>交付方式：{{tool.deliverType}}</div>
                                    </div>
                                    <div class="toolprice" style="margin-left: 30px;">
                                        <div>工具类型：{{findLabelValueByProp(tooltypelist,tool.toolType,'dictValue','dictLabel')}}</div>
                                    </div>
                                    <div class="toolprice">
                                        <div>用户评分：
                                            <el-rate
                                                style="display:inline-block"
                                                :value="5"
                                                disabled
                                                show-score
                                                text-color="#ff9900">
                                            </el-rate>
                                        </div>
                                    </div>
                                </div>
                                <div style="display:flex;align-items:center">
                                    <p style="margin-right:35px;font-size:14px;color:#333;font-weight: 400;">购买数量</p>
                                    <el-input-number size="small" v-model="amount" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
                                </div>
                                <div class="joinpurch">
                                    <el-button @click='buynow' style="border-radius:20px">立即购买</el-button>
                                    <el-button style="border-radius:20px;background: #FC8C1F;" @click='addtocat'>加入购物车</el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div :style="{background:mydetails?'#FFFFFF':'#F4F5FA'}">
                        <div class="goodsde">
                            <div ref="obtain" id="menuFlag" :class="scrolltop ? 'isFixedTop' : ''">
                                <ul style="list-style-type:none;margin: 0;">
                                    <li class="menuListBtn" @click="toDetail" :class="{activeBtn:goodsBtnType == 1}">
                                        产品简介
                                    </li>
                                    <li class="menuListBtn" @click="toPrice" :class="{activeBtn:goodsBtnType == 2}">
                                        产品价格
                                    </li>
                                    <li v-if="tool.deliverType=='License'" class="menuListBtn" @click="toServiceSupport" :class="{activeBtn:goodsBtnType == 3}">
                                        服务与支持
                                    </li>
                                    <li class="menuListBtn" @click="toVideo" :class="{activeBtn:goodsBtnType == 4}">
                                        产品视频
                                    </li>
                                    <li class="menuListBtn" @click="toQuestion" :class="{activeBtn:goodsBtnType == 5}">
                                        常见问题
                                    </li>
                                    <!-- <li class="menuListBtn" @click="toComments" :class="{activeBtn:goodsBtnType == 5}">
                                        商品评论
                                    </li> -->
                                    <li style="clear:both;margin-right:50px;"></li>
                                </ul>
                            </div>
                            <div>
                                <div id="goodsDetail" ref="goodsDetail" style="background:#FFFFFF;padding:30px 30px 50px 30px;">
                                    <!-- <el-carousel :interval="3000"  height="282px">
                                        <el-carousel-item v-for="item in detailImages" :key="item.fileId" >
                                            <el-col :span='24'>
                                                <el-image  style="width:1140px;height:282px;object-fit:contain;" :src="item.fileUrl" :preview-src-list="[item.fileUrl]">
                                                </el-image>
                                            </el-col>
                                        </el-carousel-item>
                                    </el-carousel> -->
                                    <img src="/assets/tool/-s-1@2x.png" alt="">
                                    <div class="contentTitle">产品简介</div>
                                    <p style="color:#333;font-size: 14px;line-height: 26px;font-weight: 400;">
                                        {{tool.toolDesc}}
                                    </p>
                                    <div class="contentTitle">产品功能</div>
                                    <div>   
                                        <div v-for="(fun,key) of functions" :key="key">
                                            <div class="product">{{fun.title}}：{{fun.funDesc}}</div>
                                        </div>
                                    </div>
                                    <div class="contentTitle">产品亮点</div>
                                    <div>   
                                        <div v-for="(fun,key) of highlights" :key="key">   
                                            <div class="product">{{fun.title}}：{{fun.funDesc}}</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 商品定价 -->
                        <div id="goodsPrice" ref="goodsPrice" style="width:920px;margin:0 auto;margin-top:20px;background:#FFF;">
                            <div style="background:#FFFFFF;padding:30px;">
                                <div class="contentTitle" style="margin-top: 0">产品价格</div>
                                <div style="display:flex;align-items: center;margin-top: 30px;height:93px;background: #F4F5FA;">
                                    <div style="width: 93px;height: 93px;background: #0066EB">
                                        <img src="/assets/tool/jiage.png" style="margin: 50%;transform: translate(-50%, -50%);" alt="">
                                    </div>
                                    <div>
                                        <p style="margin-left:20px;font-size: 14px;line-height: 22px;font-weight: 400;">系统处于运营推广初级阶段，该款静态测试工具供广大用户免费试用。</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 服务与支持 -->
                        <div id="serviceSupport" ref="serviceSupport" v-if="tool.deliverType=='License'" style="width:920px;margin:0 auto;margin-top:20px;background:#FFF;">
                            <div style="background:#FFFFFF;padding:30px;">
                                <div class="contentTitle" style="margin-top: 0">服务与支持</div>
                                <div style="display:flex;justify-content: space-between;align-items:center;margin:20px 0 0px 0;height: 50px;background: #F4F5FA;">
                                    <p class="download" style="font-size:14px;margin:0 25px">
                                        <img style="margin-right: 10px;vertical-align: bottom;" src="/assets/tool/pdf.png" alt="">下载软件包</p>
                                    <el-button class="downBtn" @click="warnBuy">下载 <i class="el-icon-download"></i></el-button>
                                </div>
                                <div style="display:flex;justify-content: space-between;align-items:center;margin:0px 0 20px 0;height: 50px;background: #F4F5FA;margin-top: 20px;">
                                    <p class="download" style="font-size:14px;margin:0 25px">
                                        <img style="margin-right: 10px;vertical-align: bottom;" src="/assets/tool/pdf.png" alt="">下载安装手册</p>
                                    <el-button class="downBtn" @click="downloadReadme">下载 <i class="el-icon-download"></i></el-button>
                                </div>
                                <div style="display:flex;justify-content: space-between;align-items:center;margin:0px 0 20px 0;height: 50px;background: #F4F5FA;margin-top: 20px;">
                                    <p class="download" style="font-size:14px;margin:0 25px">
                                        <img style="margin-right: 10px;vertical-align: bottom;" src="/assets/tool/pdf.png" alt="">下载用户手册</p>
                                    <el-button class="downBtn" @click="downloadInstruction">下载 <i class="el-icon-download"></i></el-button>
                                </div>
                            </div>   
                        </div>
                        <!-- 产品视频 -->
                        <div id="productVideo" ref="productVideo" style="width:920px;margin:0 auto;margin-top:20px;background:#FFF;">
                            <div style="background:#FFFFFF;padding:30px;">
                                <div class="contentTitle" style="margin-top: 0">产品视频</div>
                                <div style="display: flex;justify-content: space-around;margin-top: 20px;">
                                    <video width="385px"
                                    controls="controls"
                                    class="avatar" src="http://test.lovecode.cc:6060/eagleEye.mp4"></video>
                                    <!-- <video width="385px"
                                    controls="controls"
                                    class="avatar" src=""></video> -->
                                </div>
                            </div>
                        </div>
                        <!-- 常见问题 -->
                        <div id="goodsQuestion" ref="goodsQuestion" style="width:920px;margin:0 auto;margin-top:20px;background:#FFF;">
                            <div style="background:#FFFFFF;padding:30px;">
                                <div class="contentTitle" style="margin-top: 0">常见问题</div>
                                <div style="background:#FFFFFF;font-size: 14px;font-weight: 400;color: #000000;line-height: 35px;">
                                    <p style="white-space: pre-line;">{{tool.productQA?tool.productQA:'暂无'}}</p>
                                </div>
                            </div>
                        </div>
                        <!-- 商品评论 -->
                        <!-- <div id="goodsComments" ref="goodsComments" style="width:920px;margin:0 auto;margin-top:20px;background:#FFF;">
                            <div style="background:#FFFFFF;padding:30px;">
                                <div style="text-align:center;">   
                                    <div style="font-size: 22px;font-weight: 400;color: #000000;">商品评论</div>
                                </div>
                                <div style="margin-top:30px;" v-for="(item,index) in commentsList" :key="index">
                                    <div>
                                        <div style="display:flex;justify-content: space-between;align-items: center;">
                                            <div style="display:flex;align-items: center;">
                                                <el-avatar :size="58" :src="item.avatar"></el-avatar>
                                                <div style="margin-left: 20px;">
                                                    <div style="font-size: 16px;font-weight: bold;color: #000000;line-height: 27px;">{{item.tel}}</div>
                                                    <div style="font-size: 15px;font-weight: 400;color: #999999;line-height: 27px;">{{item.createTime}}</div>
                                                </div>
                                            </div>
                                            <div class="rateClass">
                                                <el-rate disabled-void-color="#D9D9D9" v-model="item.score" disabled></el-rate>
                                            </div>
                                        </div>
                                        <p style="font-size: 15px;font-weight: 400;color: #1A1A1A;line-height: 27px;">评论：{{item.content}}</p>
                                    </div>
                                     <el-divider></el-divider>
                                </div>
                            </div>   
                        </div> -->
                    </div>
                </div>
            </div>
            <div>
                <div class="rightTopBox" :style="{ 'margin-top':mydetails?'20px':'30px'}">
                    <div style="font-size: 14px;font-weight: 400;color: #000000;line-height: 56px;margin-left: 10px;">
                        服务商：北京关键科技股份有限公司
                    </div>
                    <el-divider></el-divider>
                    <div style="font-size: 14px;font-weight: 400;color: #000000;line-height: 24px;text-align: left;">
                        <p><img style="margin: 0 10px;" src="/assets/tool/kefurexianxianxing.png" alt=""> 服务热线：010-56682165 </p>
                        <p><img style="margin: 0 10px;" src="/assets/tool/shouji.png" alt="">手机：18611768463</p>
                        <p><img style="margin: 0 10px;" src="/assets/tool/shijian.png" alt="">服务时间：24小时</p>
                        <p><img style="margin: 0 10px;" src="/assets/tool/youxiang.png" alt="">通讯邮箱：keyware@keyware.cn </p>
                    </div>
                </div>
                <div class="rightBottomBox">
                    <div style="height: 56px;font-size: 18px;font-weight: bold;color: #1A1A1A;line-height: 56px;margin-left:30px;">
                        相关产品推荐
                    </div>
                    <el-divider></el-divider>
                    <div>
                        <div v-for="(item,index) in toolslist" :key="index" style="margin: 20px;">
                            <div style="display: flex;cursor: pointer;" @click="switchTool(item)">
                                <img v-if="item.name=='代码静态分析工具'" src="/assets/toolmarket/EagleEye.png" style="width:63px;height:63px;margin-right: 5px;" alt="">
                                <img v-if="item.name=='源代码安全检测工具'" src="/assets/toolmarket/wukong.png" style="width:63px;height:63px;margin-right: 5px;" alt="">
                                <img v-if="item.name=='C/C++单元测试工具'" src="/assets/toolmarket/EagleWing-C.png" style="width:63px;height:63px;margin-right: 5px;" alt="">
                                <img v-if="item.name=='接口测试工具'" src="/assets/toolmarket/Kinterface.png" style="width:63px;height:63px;margin-right: 5px;" alt="">
                                <img v-if="item.name=='JAVA单元测试工具'" src="/assets/toolmarket/EagleWing-Java.png" style="width:63px;height:63px;margin-right: 5px;" alt="">
                                <img v-if="item.name=='功能测试工具AutoFun'" src="/assets/toolmarket/AutoFun.png" style="width:63px;height:63px;margin-right: 5px;" alt="">
                                <img v-if="item.name=='代码组成分析平台'" src="/assets/toolmarket/KeySwan.png" style="width:63px;height:63px;margin-right: 5px;" alt="">
                                <img v-if="item.name=='性能测试工具'" src="/assets/toolmarket/KeySphere.png" style="width:63px;height:63px;margin-right: 5px;" alt="">
                                <img v-if="item.name=='自鉴-交互式应用安全测试系统IAST'" src="/assets/toolmarket/自鉴交互式.png" style="width:63px;height:63px;margin-right: 5px;" alt="">
                                <img v-if="item.name=='Web应用安全测试工具'" src="/assets/toolmarket/web.png" style="width:63px;height:63px;margin-right: 5px;" alt="">
                                <img v-if="item.name=='资产识别及漏洞管理工具'" src="/assets/toolmarket/资产识别.png" style="width:63px;height:63px;margin-right: 5px;" alt="">
                                <img v-if="item.name=='性能测试工具AutoLoad'" src="/assets/toolmarket/AutoLoad.png" style="width:63px;height:63px;margin-right: 5px;" alt="">
                                <!-- <img :src="item.img" alt="" style="width:63px;height:63px;margin-right: 5px;"> -->
                                <div>
                                    <div style="font-size: 14px;font-weight: bold;
                                        color: #1A1A1A;">{{item.name}}</div>
                                    <div style="font-size: 12px;
                                        font-weight: 400;
                                        color: #333333;">{{item.toolDesc | ellipsis2}}</div>
                                </div>
                            </div>
                            <el-divider></el-divider>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog :title="title" :visible.sync="paydiaopen" width="650px" :close-on-click-modal="false" append-to-body @close="closeBuyDialog()" class="paydialog">
            <el-divider></el-divider> 
            <el-form :model="buyTool" label-width="100px" class="demo-ruleForm" style="margin-top:20px">
                <el-form-item label="商品名称" >
                    {{buyTool.name}}
                </el-form-item>
                <el-form-item label="商品规格">
                    {{buyTool.deliverType=='License' ? '按月':'按次'}}
                </el-form-item>
                <el-form-item label="商品价格">
                    ￥{{buyTool.price}}
                </el-form-item>
                <el-form-item label="购买数量">
                    <el-input-number v-model="buyAmount" :min="1" :max="999" label="购买数量"></el-input-number>
                </el-form-item>
                <el-form-item label="交付方式">
                    {{buyTool.deliverType}}
                </el-form-item>
                <el-form-item label="应付金额">
                   ￥ {{buyTool.price * buyAmount}}
                </el-form-item>
                <el-form-item label="交付方式">
                    <el-row>
                        <el-col :span="12">
                        <el-radio v-model="paymentType" label="ali">支付宝支付</el-radio>
                        <el-radio v-model="paymentType" label="wx">微信支付</el-radio>
                        </el-col>
                    </el-row>
                </el-form-item>
                <el-form-item style="text-align:left;margin-left:-70px">
                    <el-button style='background: #0066EB;color:#FFFFFF' @click="immediatelypay">立即支付</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-dialog title="" :visible.sync="boxShow" width="600px" :before-close="handleClose" class="qcode">
            <div style="width:500px;margin:0 auto;text-align:center">
                <!-- <canvas width="150px" height="150px"></canvas>
                <div id="qrcode" ref="qrcode"></div> -->
                <qrcode :value="codeUrl"  :options="options" ></qrcode>
                <div style="margin-top:20px;font-size: 16px;">扫描微信二维码支付</div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import store from "@/store";
    import {mapGetters} from "vuex";
    import {findByvalue, findLabelValueByProp} from "@/util/util";
    import {getTool, getFunction, queryOrderState,buyTool, noPayBuy,} from "@/api/toolInfo/market";
    import {addShoppingCart} from "@/api/my/my";
    import {listMyMessageCount} from '@/api/system/message'
    import VueQrcode from "@xkeshi/vue-qrcode";
    import {listTools} from "@/api/toolInfo/market";
    export default{
        props:['mydetails'],
        data(){
            return{
                id:'',
                amount:'',//购买数量
                buyAmount:'',//弹窗购买数量
                goodsactive:'1',
                // swipcelist:[{id:0,imgurl:'/assets/tool/swipc.png'},{id:1,imgurl:'/assets/tool/swipc.png'},{id:2,imgurl:'/assets/tool/swipc.png'}],
                tool:{},//工具详情
                functions:[],//主要功能
                highlights:[],//技术亮点
                images:[],//图片全集
                icon:{},//推荐图信息
                detailImages:[],//详情图片列表
                packageUrl:'',
                readmeUrl:'',
                paydiaopen:false,
                buyTool:{},
                title:'订单支付',
                paymentType:'ali',//支付方式
                boxShow:false,
                rules:{},
                orderNumber:'',//订单id
                codeUrl:'',
                options: { size: 150},

                goodsBtnType: 1, //商品按钮类型

                scrolltop: false,

                // 评论list
                commentsList: [
                    {avatar: '/assets/tool/avatar1.png',tel: '135****3213',createTime: '2022-03-10 12:32:53',score: 5, content: '测试工具非常好用，测试简单方便，值得购买，测试工具非常好用，测试简单方便，值得购买，测试工具非常好用，测试简单方便，值得购买。测试工具非常好用，测试简单方便，值得购买，测试工具非常好用，测试简单方便，值得购买，测试工具非常好用，测试简单方便，值得购买。测试工具非常好用，测试简单方便，值得购买，测试工具非常好用，测试简单方便，值得购买，测试工具非常好用，测试简单方便，值得购买。测试工具非常好用，测试简单方便，值得购买，测试工具非常好用，测试简单方便，值得购买，测试工具非常好用，测试简单方便，值得购买。'},
                    {avatar: '/assets/tool/avatar2.png',tel: '156****1132',createTime: '2022-03-10 12:32:53',score: 4, content: '测试工具非常好用，测试简单方便，值得购买，测试工具非常好用，测试简单方便，值得购买。'},
                    {avatar: '/assets/tool/avatar3.png',tel: '187****5326',createTime: '2022-03-10 12:32:53',score: 3, content: '测试工具非常好用，测试简单方便，值得购买。'},
                ],

                toolslist: []

            }
        },
        components:{
            'qrcode': VueQrcode,
        },
        filters: {
            ellipsis(value) {
                if (!value) return ''
                if (value.length > 100) {
                return value.slice(0, 100) + '...'
                }
                return value
            },
            ellipsis2(value) {
                if (!value) return ''
                if (value.length > 25) {
                    return value.slice(0, 25) + '...'
                }
                return value
            }
        },
        computed: {
            ...mapGetters(['paytype','tooltypelist','token'])
        },
        beforeDestroy(to, from, next) {
            window.addEventListener('scroll', this.handleScrollx)
        },
        mounted(){
            window.addEventListener('scroll', this.handleScrollx, true)
            this.getList() 
            // console.log('mydetails',this.mydetails)
            this.id=this.$route.query.id;
            getTool(this.id).then(response => {
                // console.log('工具详情',response)
                this.tool = response.tool;
                // console.log(this.tool);
                // this.buyTool=response.tool;
                this.$emit('inform',this.tool)
                this.tool.amount = 1;
                this.images = response.fileInfoList;
                // this.images.forEach(item=>{
                //     if(item.fileType == 'head'){
                //         this.icon.push(item) 
                //     }else if(item.fileType == 'detail'){
                //         this.icon.push(item) 
                //     }
                // })
                for (let index in this.images) {
                    if (this.images[index].fileType == 'head')
                        this.icon = this.images[index];
                    else if (this.images[index].fileType == 'detail') {
                        this.detailImages.push(this.images[index]);
                    } else if (this.images[index].fileType == 'package'){
                        this.packageUrl = this.images[index].fileId;
                    }else if (this.images[index].fileType == 'readme'){
                        this.readmeUrl = this.images[index].fileId;
                    }
                }
                // console.log('tupian',this.icon,this.detailImages,this.packageUrl,this.readmeUrl);
                
                this.functions = response.functionList.filter(item=>item.funType == 0)
                this.highlights = response.functionList.filter(item=>item.funType == 1)
                // console.log('功能亮点',this.functions,this.highlights);
                
            })
        },
        methods:{
            findByvalue, 
            findLabelValueByProp,
            toolback(){
                this.$router.back()
            },
            //购买数量的方法
             handleChange(value) {
                // console.log('购买数量',value);
            },
            //tab点击
            handleClick(tab, event) {
                // console.log(tab, event);
            },
             /** 查询列表 */
             getList() {
                this.loading = true;
                // console.log('toolType----'.this.toolType)
                let data={
                     toolType:this.toolType,
                     deliverType:this.deliverType,
                     pageNum:this.pageNum,
                     pageSize:this.pageSize,
                     status: 1
                };
                Object.keys(data).forEach(keyd=>{
                    if(!data[keyd] || data[keyd]=='' || data[keyd]=='0' || data[keyd]=="''") { delete data[keyd]; }
                    // console.log('data处理后----',data)
                })
                // console.log('data----',data)
                listTools(data).then(response => {
                    // console.log('response----',response)
                    this.toolslist = response.rows.splice(0, 5)
                    this.total = response.total;
                    this.loading = false;
                }).catch(err=>{
                    // console.log('异常',err)
                })
            },
            switchTool (row) {
                // console.log(row);
                getTool(row.toolId).then(response => {
                this.tool = response.tool;
                // console.log(this.tool);
                this.tool.amount = 1;
                this.images = response.fileInfoList;
                
                for (let index in this.images) {
                    if (this.images[index].fileType == 'head')
                        this.icon = this.images[index];
                    else if (this.images[index].fileType == 'detail') {
                        this.detailImages.push(this.images[index]);
                    } else if (this.images[index].fileType == 'package'){
                        this.packageUrl = this.images[index].fileId;
                    }else if (this.images[index].fileType == 'readme'){
                        this.readmeUrl = this.images[index].fileId;
                    }
                }
                
                this.functions = response.functionList.filter(item=>item.funType == 0)
                this.highlights = response.functionList.filter(item=>item.funType == 1)
                
            })
            },
            // 下载安装手册
            downloadReadme(){
                // console.log('手册id',this.readmeUrl)
                const loading = this.$loading({
                    lock: true,
                    text: '正在下载，请稍后...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                downloadFast(this.readmeUrl,loading);
            },
            // 下载安装包
            warnBuy(){
                if(!this.token){
                    this.$confirm('您未登录,请您先去登录' , '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(()=> {
                        this.$router.push('/login?type=log')
                    }).catch(()=>{
                        // console.log('取消')
                    }) 
                 } else {
                     window.open('http://test.lovecode.cc:6060/Kinterface-2.2.1-setup.exe')
                 }
                // this.$alert("请您购买后在我的工具下载。")
            },
            // 下载安装手册
            downloadReadme(){
                if(!this.token){
                    this.$confirm('您未登录,请您先去登录' , '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(()=> {
                        this.$router.push('/login?type=log')
                    }).catch(()=>{
                        // console.log('取消')
                    }) 
                 } else {
                     window.open('http://test.lovecode.cc:6060/Kinterface-instruction-manual.pdf')
                 }
            },
            // 下载用户手册
            downloadInstruction(){
                if(!this.token){
                    this.$confirm('您未登录,请您先去登录' , '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(()=> {
                        this.$router.push('/login?type=log')
                    }).catch(()=>{
                        // console.log('取消')
                    }) 
                 } else {
                     window.open('http://test.lovecode.cc:6060/Kinterface-user-guid.pdf')
                 }
            },
            //加入购物车
            addtocat(){
                // console.log('加入购物车',this.amount);
                 if(!this.token){
                    this.$confirm('您未登录,请您先去登录' , '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(()=> {
                        this.$router.push('/login?type=log')
                    }).catch(()=>{
                        // console.log('取消')
                    }) 
                 }else{
                     addShoppingCart(this.id, this.amount).then(response => {
                         // console.log('response',response)
                         if(response.code==200){
                             this.$notify({
                                 title: '添加购物车成功',
                                 message: '',
                                 align: 'center',
                                 type: 'success'
                             });
                             // if(response.cartCount==0){
                             //     response.cartCount=1
                             // }
                             listMyMessageCount().then(res => {
                                 // console.log('信息购物车数量',res)
                                 store.commit('SET_CARTCOUNT',res.cartCount);
                                 setTimeout(() => {
                                     this.$router.push('/console/cart')
                                 },1000);
                             })                   
                         }
                     })
                 }
            },
            //立即购买
            buynow(){
                // console.log('立即购买',this.amount);
                if(!this.token){
                    this.$confirm('您未登录,请您先去登录' , '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(()=> {
                        this.$router.push('/login?type=log')
                    }).catch(()=>{
                        // console.log('取消')
                    }) 
                }else{             
                    this.paydiaopen=true;
                    this.buyTool = this.tool;
                    this.buyAmount = this.amount;
                }
            },
            //关闭支付弹窗
            handleClose(){
                this.boxShow=false;
                clearInterval(this.timers);
            },
            //立即支付
            immediatelypay(){
                let param = {};
                param.toolId = this.buyTool.toolId
                param.amount = this.buyAmount;
                param.deliverType = this.buyTool.deliverType;
                param.price = this.buyTool.price;
                param.payType = this.payType;
                param.toolType = this.buyTool.toolType;
                if (param.price == 0) { //直接生成支付成功的订单
                    noPayBuy(param).then(response => {
                        this.$notify({
                            title: '支付成功',
                            message: '可在我的工具中查看已购买的工具',
                            align: 'center',
                            type: 'success'
                        });
                        this.paydiaopen = false;
                        setTimeout(() => {
                            this.$router.push('/console/mytools')
                        },1000);
                    })
                } else {
                    if (this.paymentType == 'ali') {
                        param.payType = 'ali';
                        //支付宝支付
                        // this.$router.push({path: '/buy/alipay', query:{res: data}});
                        buyTool(param).then(response => {
                            this.apply = response.data;
                            // 打开新的页面进行填充html。
                            var newWindow = window.open("#", "_blank");
                            newWindow.document.write(response.data);
                            // this.$nextTick(()=>{
                            //   document.forms[0].submit()
                            // })
                            // this.$notify({
                            //   title: '购买成功',
                            //   message: '请在我的工具中查看',
                            //   align: 'center',
                            //   type: 'success'
                            // });
                        })
                        this.paydiaopen = false;
                    } else {
                        //微信支付，这里跳转到本文的微信支付模块的3.步骤handelPay方法
                        // this.$router.push({path: '/buy/alipay', query:{res: data}});
                        param.payType = "wx";
                        buyTool(param).then(response => {
                            this.boxShow = true;
                            this.codeUrl = response.code_url;
                            this.orderNumber = response.out_trade_no;
                            // document.getElementById("qrcode").innerHTML = ""; //获取生成二维码后显示的容器的ID
                            let self = this
                            // this.qrCode = new QRCode('qrcode', {
                            //     width: 150,                     //二维码的宽度
                            //     height: 150,                    //二维码的高度
                            //     text: this.codeUrl,            //调用weixincode()方法时后台传的code
                            //     colorDark: '#000',              //二维码颜色
                            //     colorLight: '#fff',             //二维码底色
                            // })
                            // this.boxShow = true;
                            self.getOrderstate()
                        })
                    }
                }
            },
            getOrderstate() {
                let self = this;
                let num = 0
                self.timers = setInterval(() => { //创建一个全局的定时器
                    num++;
                    queryOrderState(this.orderNumber).then(res => {
                        if (res.data == true) { //判断 如果data.data==true就是订单支付成功
                            this.$notify({
                                title: '支付成功',
                                message: '可在我的工具中查看已购买的工具',
                                align: 'center',
                                type: 'success'
                            });
                            this.boxShow=false;
                            this.paydiaopen = false;
                            setTimeout(() => {
                                this.$router.push('/console/mytools')
                            },1000);
                            // this.$store.dispatch("tagsView/delView", this.$route);
                            // this.$router.push({path: "/market/market"});
                            clearInterval(this.timers) //别忘记关闭定时器，否则会一直调这个接口
                        }
                    })
                    if (num == 500) { //这里是判断num++到500的情况下用户还没有支付则自动关闭定时器和二维码
                        this.boxShow = false
                        clearInterval(this.timers)
                    }
                }, 1500)
            },
            //关闭支付弹窗
            closeBuyDialog(){
                if (this.timers) {
                    clearInterval(this.timers); //关闭
                }
            },

            // 锚点定位
            toDetail () {
                this.goodsBtnType = 1
                document.querySelector("#goodsDetail").scrollIntoView({behavior: "smooth"});
            },
            toPrice () {
                this.goodsBtnType = 2
                document.querySelector("#goodsPrice").scrollIntoView({behavior: "smooth"});
            },
            toServiceSupport () {
                this.goodsBtnType = 3
                document.querySelector("#serviceSupport").scrollIntoView({behavior: "smooth"});
            },
            toVideo () {
                this.goodsBtnType = 4
                document.querySelector("#productVideo").scrollIntoView({behavior: "smooth"});
            },
            toQuestion () {
                this.goodsBtnType = 5
                document.querySelector("#goodsQuestion").scrollIntoView({behavior: "smooth"});
            },
            // toComments () {
            //     this.goodsBtnType = 5
            //     document.querySelector("#goodsComments").scrollIntoView({behavior: "smooth"});
            // },
            handleScrollx() {
                //计算滚动条位置
                var scrollTop1 = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                //计算绑定div位置this.$refs.piediv.getBoundingClientRect().top; 
                // var offsetTop = document.querySelector('#goodsPrice').getBoundingClientRect().top;
                //进行比较设置位置fixed
                // this.scrolltop = scrollTop1 > offsetTop;
                if (scrollTop1 > 600) {
                    this.scrolltop = true
                } else {
                    this.scrolltop = false
                }
                if (this.$refs.goodsDetail) {
                    if (this.$refs.goodsDetail.getBoundingClientRect().top < 200) {
                        this.goodsBtnType = 1
                    }
                }
                if (this.$refs.goodsPrice) {
                    if (this.$refs.goodsPrice.getBoundingClientRect().top < 200) {
                        this.goodsBtnType = 2
                    }
                }
                if (this.$refs.serviceSupport) {
                    if (this.$refs.serviceSupport.getBoundingClientRect().top < 200) {
                        this.goodsBtnType = 3
                    }
                }
                if (this.$refs.productVideo) {
                    if (this.$refs.productVideo.getBoundingClientRect().top < 200) {
                        this.goodsBtnType = 4
                    }
                }
                if (this.$refs.goodsQuestion) {
                    if (this.$refs.goodsQuestion.getBoundingClientRect().top < 200) {
                        this.goodsBtnType = 5
                    }
                }
            }
        },

    }
</script>
<style scoped>
    .noperson{
        /* background:#FFFFFF; */
        /* border-top:1px solid #EBEBEB */
    }
    .person{
        background:#FFFFFF;
    }
    .bgnk{
        width:920px;
        margin:30px auto;
        display:flex;
        justify-content:space-between
    }
    .nobgnk{
        width:920px;
        margin:20px auto;
        display:flex;
        justify-content:space-between
    }
    .keydap{
        font-size: 18px;
        font-weight: bold;
        color: #1A1A1A;
        line-height: 35px;
    }
    .el-divider--horizontal{
        margin:0
    }
    /* .keyda :nth-child(2){
        font-weight: bold;
        color: #666666;
        font-size:14px;
    } */
    .toolprice{
        /* display:flex;
        align-items:center; */
        width: 40%;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
        line-height: 35px;
    }
    /* .toolprice :nth-child(1){
        color: #666666;
        font-size:14px;
        margin-right:35px;
    }
    .toolprice :nth-child(2){
        color: #333333;
        font-size:14px;
    } */
    .joinpurch>>>.el-button{
        margin-top:15px;
        font-size:14px!important;
        width: 126px;
        height: 40px;
        background: #E84C3D;
        border:none;
        border-radius:4px;
        color:#FFFFFF;
    }
    .goodsde>>>.el-tabs__item{
        font-size: 18px;
         color: #333333;;
    }
    .goodsde>>>.el-tabs__item.is-active{
        font-size: 18px;
        font-weight: bold;
        color: #0066EB;
    }
    .goodsde>>>.el-tabs__item:hover{
        font-size: 18px;
        font-weight: bold;
        color: #0066EB;
    }
    .goodsde>>>.el-tabs__active-bar{
        background-color: #0066EB;
    }
    .dvied{
        width: 4px;
        height: 18px;
        background: #0066EB;
    }
    .sourcecode{
        width: 530px;
        height: 93px;
        background: #F4F5FA;
        border-radius: 4px;
        text-align: left;
        /* padding-bottom:1px; */
        margin-top:25px;
        /* margin-left:30px; */
        /* padding:10px 0 */
    }
    .sourcecode :nth-child(1){
        /* width: 93px; */
        /* height: 93px; */
        font-size: 16px;
        font-weight: bold;
        color: #1A1A1A;
        /* margin:10px 0 */
    }
    .sourcecode :nth-child(2){
        font-size: 14px;
        font-weight: 400;
        color: #333333;    
    }
    .paydialog>>>.el-form-item__label{
        color:#333333;
        font-weight:bold;
        margin-right:20px
    }
    .paydialog>>>.el-divider--horizontal{
        margin:-30px 0 10px 0;
    }
    .paydialog>>>.el-dialog__title{
        font-weight:bold;
        color: #0969bd
    }
    .goodsde{
        width:920px;
        background: #FFF;
        margin:0px auto;
        padding:30px 0
    }
    .menuListBtn {
        float:left;
        margin-right:50px;
        font-size: 18px;
    }
    .menuListBtn:hover {
        cursor: pointer;
        color: #0066EB;
        font-weight: bold;
    }
    .activeBtn {
        color: #0066EB;
        font-weight: bold;
    }

    .contentTitle {
        font-size: 18px;
        font-weight: bold;
        color: #1A1A1A;
        margin-top:40px;
    }
    .product {
        font-size: 14px;
        font-weight: 400;
        color: #333333;
        line-height: 37px;
    }
    .product::before{
        content:'';
        display: inline-block;
        width:7px;
        height:7px;
        background: #444444;
        border-radius: 50%;
        margin-right:6px;
        margin-bottom: 2px;
    }
    .downBtn {
        background: #0066EB;
        border:none;
        border-radius:0;
        color:#FFFFFF;
        height:50px;
        padding: 8px 20px;
        line-height:0;
    }
    .downBtn:hover {
        background: #0066EB;
        border:none;
        border-radius:0;
        color:#FFFFFF;
        height:50px;
        padding: 8px 20px;
        line-height:0;
    }
    .downBtn:focus {
        background: #0066EB;
        border:none;
        border-radius:0;
        color:#FFFFFF;
        height:50px;
        padding: 8px 20px;
        line-height:0;
    }

    .rightTopBox {
        width: 264px;
        height: 249px;
        background: #FFFFFF;
        margin: 30px 0 15px 15px;
    }
    .rightBottomBox {
        width: 264px;
        height: 500px;
        background: #FFFFFF;
        margin: 0 0 15px 15px;
    }

    .isFixedTop {
        padding: 20px 0;
        position: fixed;
        top: 0;
        background: #FFF;
        width: 920px;
        z-index: 3;
        box-shadow: 0px 5px 15px rgb(0 0 0 / 10%);
    }
    @media screen and (max-width: 1500px) {
         .bgnk{
            width:920px;
            margin:30px auto;
            display:flex;
            justify-content:space-between
        }
        .nobgnk{
            width:920px;
            margin:20px auto;
            display:flex;
            justify-content:space-between
        }
         .goodsde{
            width:920px;
            margin:0px auto;
            padding:30px 0
        }
    }
</style>