<template>
    <div style="background: #ffffff; padding-bottom: 40px">
        <div class="topBg">
            <div class="container topBgBox">
                <div class="topBgimg">
                    <img :src="tool.newUrl" alt="" />
                </div>
                <div class="topBgContent">
                    <div class="topBgContentT">
                        <div class="topBgContentTL">{{ tool.name }}</div>
                        <div class="topBgContentTR">
                            <div v-if="tool.price == 0" class="nopay">限时免费</div>
                            <div v-else style="font-weight: bold">
                                <span style="color: #e93a3a">￥ {{ tool.price }} </span>
                                <span>/月</span>
                            </div>
                        </div>
                    </div>
                    <div class="topBgContentP">
                        {{ tool.toolDesc }}
                    </div>
                    <div class="topBgContentB">
                        <div>
                            工具类型:{{ findLabelValueByProp(tooltypelist, tool.toolType, 'dictValue', 'dictLabel') }}
                        </div>
                        <div style="color: #b2b8c1; opacity: 0.53; font-size: 12px">|</div>
                        <div>交付方式：{{ tool.deliverType }}</div>
                        <div style="color: #b2b8c1; opacity: 0.53; font-size: 12px">|</div>
                        <div>上架时间：{{ tool.onlineTime && tool.onlineTime.slice(0, 10) }}</div>
                    </div>
                    <div class="joinpurch">
                        <el-button @click="buynow">立即购买</el-button>
                    </div>
                </div>
            </div>
        </div>
        <div class="tabbarBox container">
            <div class="tabbarBoxTab">
                <div
                    :class="{ tabbarBoxitemact: activetab == 'cpjjBox' }"
                    class="tabbarBoxTabitem"
                    @click="scrollFn('cpjjBox')"
                >
                    产品简介
                </div>
                <div
                    v-show="functions.length"
                    :class="{ tabbarBoxitemact: activetab == 'cpgnBox' }"
                    class="tabbarBoxTabitem"
                    @click="scrollFn('cpgnBox')"
                >
                    产品功能
                </div>
                <div
                    v-show="highlights.length"
                    :class="{ tabbarBoxitemact: activetab == 'cpldBox' }"
                    class="tabbarBoxTabitem"
                    @click="scrollFn('cpldBox')"
                >
                    产品亮点
                </div>
                <div
                    :class="{ tabbarBoxitemact: activetab == 'cpjgBox' }"
                    class="tabbarBoxTabitem"
                    @click="scrollFn('cpjgBox')"
                >
                    产品价格
                </div>
                <div
                    :class="{ tabbarBoxitemact: activetab == 'fwzcBox' }"
                    class="tabbarBoxTabitem"
                    @click="scrollFn('fwzcBox')"
                    v-show="tool.package || tool.instructionManual || tool.userGuide"
                >
                    服务与支持
                </div>
                <div
                    :class="{ tabbarBoxitemact: activetab == 'cpspBox' }"
                    class="tabbarBoxTabitem"
                    @click="scrollFn('cpspBox')"
                    v-show="tool.vedio"
                >
                    产品视频
                </div>
                <div
                    :class="{ tabbarBoxitemact: activetab == 'cjwtBox' }"
                    class="tabbarBoxTabitem"
                    @click="scrollFn('cjwtBox')"
                    v-show="tool.productQA"
                >
                    常见问题
                </div>
            </div>
            <div class="cpjjBox" id="cpjjBox">
                <img :src="tool.detailUrl" class="cpjjBoximg" alt="" />
                <div class="cpjjBoxCon">
                    <div class="cpjjBoxConT">产品简介</div>
                    <div class="cpjjBoxConC">{{ tool.toolDesc }}</div>
                </div>
            </div>
        </div>
        <div class="cpgnBox" id="cpgnBox">
            <div class="cpgnBoxTitle" v-show="functions.length">产品功能</div>
            <div class="cpgnCon container" v-show="functions.length">
                <div class="cpgnConitem" v-for="(fun, key) in functions" :key="key">
                    <div class="cpgnConitemTitle">{{ fun.title }}</div>
                    <div class="cpgnConitemDesc">{{ fun.funDesc }}</div>
                </div>
            </div>
        </div>
        <div class="cpldBox container">
            <div class="cpldBoxTitle" id="cpldBox" v-show="highlights.length">产品亮点</div>
            <div class="cpldBoxCon" v-show="highlights.length">
                <div class="cpldBoxConitem" v-for="(fun, key) in highlights" :key="key">
                    <img class="cpldBoxConitemimg" :src="fun.img" alt="" />
                    <div class="cpldBoxConitemtext">{{ fun.funDesc }}</div>
                </div>
            </div>
            <div class="cpldBoxTitle" id="cpjgBox">产品价格</div>
            <div class="cpldBoxConjg">
                <div class="cpldBoxConimgbox">
                    <img class="cpldBoxConimg" src="/assets/tool/jiage.png" />
                </div>
                <div class="cpldBoxConimgboxtext">系统处于运营推广初级阶段，该款测试工具供广大用户免费试用。</div>
            </div>
            <div class="cpldBoxTitle" id="fwzcBox" v-show="tool.package || tool.instructionManual || tool.userGuide">
                服务与支持
            </div>
            <div class="fwyzcbox" v-show="tool.package || tool.instructionManual || tool.userGuide">
                <div
                    style="
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        margin: 20px 0 0px 0;
                        height: 50px;
                        background: #f4f5fa;
                    "
                    v-if="tool.package"
                >
                    <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;
                    "
                    v-if="tool.instructionManual"
                >
                    <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;
                    "
                    v-if="tool.userGuide"
                >
                    <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 class="cpldBoxTitle" id="cpspBox" v-show="tool.vedio">产品视频</div>
            <div style="display: flex; justify-content: space-around; margin-top: 20px" v-show="tool.vedio">
                <video width="385px" controls="controls" class="avatar" :src="tool.vedio"></video>
            </div>
            <div class="cpldBoxTitle" id="cjwtBox" v-show="tool.productQA">常见问题</div>
            <div
                style="background: #ffffff; font-size: 14px; font-weight: 400; color: #000000; line-height: 35px"
                v-show="tool.productQA"
            >
                <p style="white-space: pre-line">{{ tool.productQA }}</p>
            </div>
        </div>

        <el-dialog
            :title="title"
            :visible.sync="paydiaopen"
            width="574px"
            :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="服务类型:">
                    <el-select v-model="serviceType" size="small" placeholder="请选择">
                        <el-option
                            v-if="buyTool.deliverType == 'SaaS'"
                            label="测试服务(按次计)"
                            value="测试服务(按次计)"
                        >
                        </el-option>
                        <el-option label="使用时长(按月计)" value="使用时长(按月计)"> </el-option>
                    </el-select>

                    <!-- {{ buyTool.deliverType == 'License' ? '按月' : '按次' }} -->
                </el-form-item>
                <el-form-item label="商品价格:">
                    <span v-if="serviceType == '测试服务(按次计)' && buyTool.priceTime == 0">限时免费</span>
                    <span v-else-if="serviceType == '使用时长(按月计)' && buyTool.price == 0">限时免费</span>
                    <span v-else>￥{{ serviceType == '测试服务(按次计)' ? buyTool.priceTime : buyTool.price }}</span>
                </el-form-item>
                <el-form-item label="购买数量:">
                    <span
                        v-if="
                            (serviceType == '测试服务(按次计)' && buyTool.priceTime == 0) ||
                            (serviceType == '使用时长(按月计)' && buyTool.price == 0)
                        "
                        >1</span
                    >
                    <el-input-number
                        v-else
                        size="mini"
                        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="应付金额:">
                    <span style="font-weight: bold; font-size: 22px; color: #fd461a">
                        <span v-if="addPriceAll == 0">限时免费</span>
                        <span v-else>￥ {{ addPriceAll }}</span>
                    </span>
                </el-form-item>
                <el-form-item label="支付方式:">
                    <el-row>
                        <el-col class="paytypebtn">
                            <el-radio size="small" v-model="paymentType" label="A01" border>
                                <img class="btnpayimg" src="/assets/home/zfb.png" alt="" />支付宝</el-radio
                            >
                            <el-radio size="small" v-model="paymentType" label="W01" border>
                                <img class="btnpayimg" src="/assets/home/wx.png" alt="" />微信</el-radio
                            >
                            <el-radio size="small" v-model="paymentType" label="WALLET" border :disabled="myLQDDisable">
                                <img class="btnpayimg" src="/assets/home/lingqian.png" alt="" />{{
                                    myLQDDisable ? '零钱不足' : '零钱'
                                }}</el-radio
                            >
                        </el-col>
                    </el-row>
                </el-form-item>
            </el-form>
            <div class="joinpurch123">
                <el-button @click="immediatelypay">立即支付</el-button>
            </div>
        </el-dialog>
        <el-dialog
            title="待支付"
            :visible.sync="boxShow"
            width="600px"
            :before-close="handleClose"
            class="qcode"
            :close-on-click-modal="false"
            @close="closeCode"
        >
            <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="color: #fd461a; font-size: 28px; font-weight: 700; margin-bottom: 20px">
                    {{ addPriceAll }}元
                </div>
                <div style="margin-top: 20px; font-size: 16px">
                    请使用{{ paymentType == 'A01' ? '支付宝' : '微信' }}扫描二维码支付
                </div>
            </div>
        </el-dialog>
        <el-dialog
            title="钱包支付"
            :visible.sync="qianbaoShow"
            width="600px"
            class="qcode"
            :close-on-click-modal="false"
        >
            <div style="display: flex">
                <div style="width: 100px; line-height: 40px">交易密码:</div>
                <el-input v-model="jypassword" type="password" show-password></el-input>
            </div>
            <div class="joinpurch123">
                <el-button @click="qianbaozhifu">立即支付</el-button>
            </div>
        </el-dialog>
        <el-dialog
            title="设置密码"
            :visible.sync="nopasswordDialog"
            width="600px"
            class="qcode"
            :close-on-click-modal="false"
        >
            <div style="font-weight: 500; font-size: 16px; color: #333333; text-align: center">
                您还未设置过交易密码
            </div>
            <div class="joinpurch123">
                <el-button @click="goSetPassword">去设置</el-button>
            </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'
import { orderPay, searchOrderStatus, searchMyMoney } from '@/api/pay/index.js'

import { queryAccount } from '@/api/my/testb.js'
import { encrypt } from '@/util/encrypt'
export default {
    props: ['mydetails'],
    data() {
        return {
            activetab: 'cpjjBox',
            nopasswordDialog: false,
            orderTimers: null,
            qianbaoShow: false,
            jypassword: '',
            id: '',
            amount: 1, //购买数量
            buyAmount: 1, //弹窗购买数量
            goodsactive: '1',
            tool: {}, //工具详情
            functions: [], //主要功能
            highlights: [], //技术亮点
            images: [], //图片全集
            icon: {}, //推荐图信息
            detailImages: [], //详情图片列表
            packageUrl: '',
            readmeUrl: '',
            paydiaopen: false,
            buyTool: {},
            title: '订单支付',
            paymentType: 'A01', //支付方式
            myLQDDisable: false,
            boxShow: false,
            rules: {},
            orderNumber: '', //订单id
            codeUrl: '',
            options: { size: 150 },
            goodsBtnType: 1, //商品按钮类型
            scrolltop: false,
            toolslist: [],
            mp4InfoActive: {},
            serviceType: '使用时长(按月计)',
            baseUrl: process.env.VUE_APP_BASE_TARGET,
        }
    },
    components: {
        qrcode: VueQrcode,
    },
    filters: {},
    watch: {
        serviceType(newval, oldval) {
            this.amount = 1
            this.buyAmount = 1
        },
    },
    computed: {
        ...mapGetters(['paytype', 'tooltypelist', 'token', 'userinform']),
        addPriceAll() {
            if (this.serviceType == '测试服务(按次计)') {
                return this.buyTool.priceTime * this.buyAmount
            } else {
                return this.buyTool.price * this.buyAmount
            }
        },
    },
    beforeDestroy(to, from, next) {
        window.addEventListener('scroll', this.handleScrollx)
    },
    mounted() {
        window.addEventListener('scroll', this.handleScrollx, true)
        // this.getList()
        this.id = this.$route.query.id
        getTool(this.id).then((response) => {
            this.tool = response.tool

            this.$emit('inform', this.tool)
            this.tool.amount = 1

            // 处理可下载文件fileType  fileUrl  filePath
            if (response.fileInfoList.length) {
                response.fileInfoList.forEach((it) => {
                    if (it.fileType == 'vedio') {
                        // mp4
                        this.tool.vedio = it.fileUrl
                    } else if (it.fileType == 'package') {
                        // 软件包package
                        this.tool.package = it.fileUrl
                    } else if (it.fileType == 'instructionManual') {
                        // 安装手册instructionManual
                        this.tool.instructionManual = it.fileUrl
                    } else if (it.fileType == 'userGuide') {
                        // 用户使用手册userGuide
                        this.tool.userGuide = it.fileUrl
                    } else if (it.fileType == 'userGuide') {
                        // 用户使用手册userGuide
                        this.tool.userGuide = it.fileUrl
                    } else if (it.fileType == 'icon') {
                        this.tool.newUrl = it.fileUrl
                    } else if (it.fileType == 'detail') {
                        this.tool.detailUrl = it.fileUrl
                    }
                })
            }

            this.functions = response.functionList.filter((item) => item.funType == 0)
            this.highlights = response.functionList.filter((item) => item.funType == 1)
            const icon = [
                '/assets/tool/newicon1.png',
                '/assets/tool/newicon2.png',
                '/assets/tool/newicon3.png',
                '/assets/tool/newicon4.png',
                '/assets/tool/newicon1.png',
                '/assets/tool/newicon2.png',
                '/assets/tool/newicon3.png',
                '/assets/tool/newicon4.png',
                '/assets/tool/newicon1.png',
                '/assets/tool/newicon2.png',
                '/assets/tool/newicon3.png',
                '/assets/tool/newicon4.png',
            ]
            if (this.highlights.length) {
                this.highlights.forEach((it, index) => {
                    it.img = icon[index] || icon[0]
                })
            }
        })
    },
    methods: {
        // 没交易密码，去设置交易密码
        goSetPassword() {
            this.$router.push({
                path: '/console/account',
                query: { code: '3' },
            })
        },
        findByvalue,
        findLabelValueByProp,
        toolback() {
            this.$router.back()
        },
        //购买数量的方法
        handleChange(value) {},
        //tab点击
        handleClick(tab, event) {},
        /** 查询列表 */
        getList() {
            this.loading = true
            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]
                }
            })
            listTools(data)
                .then((response) => {
                    this.toolslist = response.rows.splice(0, 5)
                    this.total = response.total
                    this.loading = false
                })
                .catch((err) => {})
        },


        // 下载安装包
        warnBuy() {
            if (!this.token) {
                this.$confirm('您未登录,请您先去登录', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                })
                    .then(() => {
                        this.$router.push('/login?type=log')
                    })
                    .catch(() => {})
            } else {
                this.tool.package && window.open(this.tool.package,'_self')
            }
            // this.$alert("请您购买后在我的工具下载。")
        },
        // 下载安装手册
        downloadReadme() {
            if (!this.token) {
                this.$confirm('您未登录,请您先去登录', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                })
                    .then(() => {
                        this.$router.push('/login?type=log')
                    })
                    .catch(() => {})
            } else {
                this.tool.instructionManual && window.open(this.tool.instructionManual,'_self')
            }
        },
        // 下载用户手册
        downloadInstruction() {
            if (!this.token) {
                this.$confirm('您未登录,请您先去登录', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                })
                    .then(() => {
                        this.$router.push('/login?type=log')
                    })
                    .catch(() => {})
            } else {
                this.tool.userGuide && window.open(this.tool.userGuide,'_self')
            }
        },
        //加入购物车
        addtocat() {
            if (!this.token) {
                this.$confirm('您未登录,请您先去登录', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                })
                    .then(() => {
                        this.$router.push('/login?type=log')
                    })
                    .catch(() => {})
            } else {
                addShoppingCart(this.id, this.amount).then((response) => {
                    if (response.code == 200) {
                        this.$notify({
                            title: '添加购物车成功',
                            message: '',
                            align: 'center',
                            type: 'success',
                        })
                        // if(response.cartCount==0){
                        //     response.cartCount=1
                        // }
                        listMyMessageCount().then((res) => {
                            store.commit('SET_CARTCOUNT', res.cartCount)
                            setTimeout(() => {
                                this.$router.push('/console/cart')
                            }, 1000)
                        })
                    }
                })
            }
        },
        //立即购买
        buynow() {
            if (!this.token) {
                this.$confirm('您未登录,请您先去登录', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                })
                    .then(() => {
                        this.$router.push('/login?type=log')
                    })
                    .catch(() => {})
            } else {
                this.paydiaopen = true
                this.buyTool = this.tool
                this.buyAmount = this.amount
            }
        },
        //关闭支付弹窗
        handleClose() {
            this.boxShow = false
            clearInterval(this.timers)
        },
        // 钱包支付
        qianbaozhifu() {
            let param = {}
            param.toolId = this.buyTool.toolId
            param.amount = this.buyAmount
            param.deliverType = this.buyTool.deliverType
            param.price = this.serviceType == '使用时长(按月计)' ? this.buyTool.price : this.buyTool.priceTime
            param.payType = this.paymentType
            param.paytype = this.paymentType
            param.toolType = this.buyTool.toolType
            param.userId = this.userinform.userId
            param.password = encrypt(this.jypassword)
            param.priceType = this.serviceType == '使用时长(按月计)' ? 'month' : 'times'
            param.recordName = '购买工具：' + this.buyTool.name
            orderPay(param).then((res) => {
                if (res.retcode == 'SUCCESS') {
                    this.qianbaoShow = false
                    this.paydiaopen = false
                    this.$message.success('支付成功，请前往工作台-我的工具使用')
                    // 跳工作台
                    setTimeout(() => {
                        this.$router.push('/console/mytools')
                    }, 1000)
                } else {
                    this.$message.error('支付失败，请联系管理员')
                }
            })
        },
        closeCode() {
            clearInterval(this.orderTimers)
        },
        //立即支付
        immediatelypay() {
            let param = {}
            param.toolId = this.buyTool.toolId
            param.amount = this.buyAmount
            param.deliverType = this.buyTool.deliverType
            param.price = this.serviceType == '使用时长(按月计)' ? this.buyTool.price : this.buyTool.priceTime
            param.payType = this.paymentType
            param.paytype = this.paymentType
            param.toolType = this.buyTool.toolType
            param.userId = this.userinform.userId
            param.priceType = this.serviceType == '使用时长(按月计)' ? 'month' : 'times'
            //价格为0直接生成支付成功的订单
            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 (param.payType == 'WALLET') {
                    // 获取金额
                    queryAccount(this.userinform.userId).then((res) => {
                        // 查询钱包余额是否足够
                        if (this.addPriceAll > res.balance) {
                            // 钱不够
                            this.myLQDDisable = true
                            this.paymentType = 'A01'
                            this.$message.warning('你的账户零钱不足,请使用其他支付方式')
                        } else {
                            // 钱够了
                            if (!res.password) {
                                this.nopasswordDialog = true
                            } else {
                                this.qianbaoShow = true
                            }
                        }
                    })
                } else {
                    // 微信支付宝支付
                    const loading = this.$loading({
                        lock: true,
                        text: '请稍候···',
                        spinner: 'el-icon-loading',
                        background: 'rgba(255, 255, 255, 0.1)',
                    })
                    orderPay(param)
                        .then((res) => {
                            if (res.payinfo && res.payinfo != '') {
                                loading.close()

                                this.codeUrl = res.payinfo
                                this.boxShow = true
                                // 轮训查订单状态
                                this.orderTimers = setInterval(() => {
                                    searchOrderStatus({ reqsn: res.reqsn }).then((res) => {
                                        if (res) {
                                            this.boxShow = false
                                            this.paydiaopen = false
                                            clearInterval(this.orderTimers)
                                            this.$message.success('支付成功，请前往工作台-我的工具使用')
                                            setTimeout(() => {
                                                this.$router.push('/console/mytools')
                                            }, 1000)
                                        }
                                    })
                                }, 3000)
                            }
                        })
                        .catch((error) => {
                            loading.close()
                        })
                }
            }
        },
        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
                }
            }
        },
        scrollFn(val) {
            this.activetab = val
            document.querySelector(`#${val}`).scrollIntoView({ behavior: 'auto', block: 'center' })
        },
    },
}
</script>
<style scoped>
.topBg {
    width: 100%;
    height: 400px;
    background: url('/assets/tool/topbg.png') no-repeat 100%;
}
.container {
    width: 1200px;
    margin: auto;
}
.topBgBox {
    display: flex;
    padding-top: 60px;
    box-sizing: border-box;
}
.topBgimg {
    width: 82px;
    height: 86px;
    margin-right: 40px;
}
.topBgimg img {
    width: 82px;
    height: 86px;
}
.topBgContent {
    width: 580px;
}
.topBgContentT {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.topBgContentTL {
    font-weight: bold;
    font-size: 32px;
    color: #000000;
}
.nopay {
    font-weight: 800;
    font-size: 20px;
    color: #de3834;
}
.topBgContentP {
    font-weight: 500;
    font-size: 14px;
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin: 40px 0;
}
.topBgContentB {
    width: 100%;
    height: 40px;
    background: rgba(255, 255, 255, 0.58);
    border-radius: 2px;
    font-weight: 500;
    font-size: 14px;
    color: #4d4d4d;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    box-sizing: border-box;
    margin-bottom: 20px;
}
.tabbarBox {
    padding-bottom: 50px;
}
.tabbarBoxTab {
    height: 89px;
    display: flex;
    align-items: center;
    width: 100%;
    border-bottom: 1px solid #f5f5f5;
    margin-bottom: 60px;
}
.tabbarBoxTabitem {
    height: 100%;
    font-weight: 500;
    font-size: 18px;
    color: #1a1a1a;
    box-sizing: border-box;
    margin-right: 60px;
    display: flex;
    align-items: center;
}
.tabbarBoxitemact {
    font-weight: bold;
    color: #0066eb;
    border-bottom: 4px solid #0066eb;
}
.cpjjBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 35px;
    box-sizing: border-box;
}
.cpjjBoximg {
    width: 468px;
    height: 360px;
}
.cpjjBoxCon {
    width: 630px;
}
.cpjjBoxConT {
    font-weight: bold;
    font-size: 24px;
    color: #000000;
    margin-bottom: 30px;
}
.cpjjBoxConC {
    font-weight: 500;
    font-size: 14px;
    color: #333333;
    line-height: 32px;
}
.cpgnBox {
    width: 100%;
    background: #f7f8fc;
    overflow: hidden;
}
.cpgnBoxTitle {
    margin: 35px 0 45px 0;
    font-weight: bold;
    font-size: 24px;
    color: #000000;
    text-align: center;
}
.cpgnCon {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.cpgnConitem {
    width: 590px;
    background: url('/assets/tool/bg2.png') no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    margin-bottom: 24px;
    overflow: hidden;
    padding: 34px 0;
}
.cpgnConitemTitle {
    font-weight: bold;
    font-size: 16px;
    color: #224879;
    margin-bottom: 10px;
    padding: 0 34px;
    box-sizing: border-box;
}
.cpgnConitemDesc {
    font-weight: 500;
    font-size: 14px;
    color: #4d4d4d;
    line-height: 28px;
    padding: 0 34px;
    box-sizing: border-box;
}
.cpldBox {
    overflow: hidden;
}
.cpldBoxTitle {
    font-weight: bold;
    font-size: 24px;
    color: #000000;
    margin: 45px 0;
    text-align: center;
}
.cpldBoxCon {
    display: grid;
    grid-template-columns: 280px 280px 280px 280px;
    justify-content: space-between;
    /* flex-wrap: wrap; */
}
.cpldBoxConitem {
    width: 280px;
    /* height: 220px; */
    background: #ffffff;
    box-shadow: 0px 2px 17px 1px rgba(34, 65, 106, 0.08);
    border-radius: 6px;
    border: 1px solid #e6e6e6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 25px;
    box-sizing: border-box;
    margin-bottom: 20px;
    padding-top: 24px;
}
.cpldBoxConitemimg {
    width: 70px;
    height: 70px;
    margin-bottom: 32px;
}
.cpldBoxConitemtext {
    font-weight: 500;
    font-size: 14px;
    color: #333333;
    line-height: 24px;
    /* overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; */
}
.cpldBoxConjg {
    display: flex;
    height: 93px;
    background: #f7f8fc;
    border-radius: 6px;
}
.cpldBoxConimgbox {
    width: 93px;
    height: 93px;
    background: #0066eb;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cpldBoxConimg {
    width: 41px;
    height: 41px;
}
.cpldBoxConimgboxtext {
    flex: 1;
    font-weight: 500;
    font-size: 15px;
    color: #333333;
    display: flex;
    align-items: center;
    padding-left: 30px;
    box-sizing: border-box;
}

/* 新css结束 */

.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; */
    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: 15px !important;
    border: none;
    color: #ffffff;
    width: 150px;
    height: 40px;
    background: #f7a130;
    border-radius: 4px;
}
.joinpurch123 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
}
.joinpurch123 >>> .el-button {
    width: 496px;
    height: 50px;
    background: #2084f9;
    border-radius: 6px;
    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__content {
    font-weight: 500;
    font-size: 16px;
    color: #333333;
}
.paydialog >>> .el-form-item__label {
    font-weight: 500;
    font-size: 16px;
    color: #808080;
}

/* .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;
}
.paydialog >>> .el-form-item {
    margin-bottom: 10px;
}
.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;
    }
}
.btnpayimg {
    width: 17px;
    height: 17px;
    margin-right: 5px;
}
.paytypebtn >>> .el-radio__input {
    display: none;
}
.paytypebtn >>> .el-radio {
    margin-right: 0;
}
.paytypebtn >>> .el-radio__label {
    display: flex;
    align-items: center;
    padding: 0;
}
</style>