<template>
    <div style="padding-bottom: 50px">
        <!-- <div style="display:flex;align-items:center">   
            <div class="dvied"></div>
            <div style="font-weight: bold;color: #333333;font-size: 18px;margin-left:10px">我的工具</div>
        </div> -->
        <div style="background: #ffffff; border-radius: 4px">
            <div class="toolclass">
                <el-radio-group v-model="currentool">
                    <el-radio-button label="当前工具"></el-radio-button>
                    <el-radio-button label="失效工具"></el-radio-button>
                </el-radio-group>
                <div v-loading="loading" v-if="currentool == '当前工具'" style="display: flex; flex-wrap: wrap">
                    <div v-for="(tool, key) of onTools" :key="key" class="contrl">
                        <!-- <img src="/assets/tool/rBT7.png" alt=""> -->
                        <!-- <img style="width:120px;object-fit:contain;margin:-10px 25px;"  v-if="tool.icon != null" :src="tool.icon" alt="">
                        <img v-if="tool.icon == null" src="/assets/tool/rBT7.png"/> -->
                        <img :src="tool.icon" style="width: 120px; object-fit: contain; margin: -10px 25px" alt="" />
                        <div style="text-align: left">
                            <p style="font-weight: bold; color: #1a1a1a; font-size: 18px">{{ tool.name }}</p>
                            <!-- <p style="font-size: 14px">规格：{{ tool.deliverType == 'License' ? '按月' : '按次' }}</p> -->
                            <p style="font-size: 14px">交付方式：{{ tool.deliver_type }}</p>
                            <p
                                v-if="tool.deliver_type == 'SaaS' && (tool.remark == 'times' || tool.remark == 'time')"
                                style="font-size: 14px"
                            >
                                剩余次数：{{ tool.remains }}
                            </p>
                            <p
                                v-if="tool.deliver_type == 'SaaS' && tool.remark == 'month'"
                                style="font-size: 14px"
                            >
                                过期时间：{{ dateFormat(new Date(tool.expire_time), 'yyyy-MM-dd') }}
                            </p>
                            <p v-if="tool.deliver_type == 'License'" style="font-size: 14px">
                                过期时间：{{ dateFormat(new Date(tool.expire_time), 'yyyy-MM-dd') }}
                            </p>
                            <!-- <router-link :to="'/console/mytooldetails?id='+ tool.toolId" class="link-type">
                                 <el-button >查看工具详情</el-button>
                            </router-link> -->
                            <!-- License只有按月 按钮：下载安装+注册码 -->
                            <el-button
                                v-if="tool.deliver_type == 'License'"
                                style="background: #0165e9"
                                @click="downLoad(tool.packagePath)"
                                >下载安装</el-button
                            >
                            <el-button
                                v-if="tool.deliver_type == 'License'"
                                style="background: #f2a51a"
                                @click="zhuceCodeFn(tool.toolId)"
                                >注册码</el-button
                            >
                            <!-- SaaS按月 按钮：在线试用+专属账密 -->
                            <el-button
                                v-if="tool.deliver_type == 'SaaS' && tool.remark == 'month'"
                                style="background: #0165e9"
                                @click="useOnline(tool.toolUrl)"
                                >在线使用</el-button
                            >
                            <el-button
                                v-if="tool.deliver_type == 'SaaS' && tool.remark == 'month'"
                                style="background: #f2a51a"
                                @click="myPass(tool.upasswd)"
                                >专属账密</el-button
                            >

                            <!-- SaaS按次 按钮：立即使用 -->
                            <el-button
                                v-if="tool.deliver_type == 'SaaS' && (tool.remark == 'times' || tool.remark == 'time')"
                                style="background: #0165e9"
                                @click="useTool(tool)"
                                >立即使用</el-button
                            >
                        </div>
                    </div>
                    <div v-if="onTools.length == 0" style="width: 170px; margin: 30px auto">
                        <el-empty description="当前没有可用工具"></el-empty>
                    </div>
                </div>
                <div v-loading="loading" v-if="currentool == '失效工具'" style="display: flex; flex-wrap: wrap">
                    <div v-for="(tool, key) of offTools" :key="key" class="contrl">
                        <div class="yishixiao">已失效</div>
                        <img
                            style="width: 120px; object-fit: contain; margin: -10px 25px"
                            v-if="tool.icon != null"
                            :src="tool.icon"
                            alt=""
                        />
                        <img v-if="tool.icon == null" src="/assets/tool/rBT7.png" />
                        <div style="text-align: left">
                            <p style="font-weight: bold; color: #1a1a1a; font-size: 18px">{{ tool.name }}</p>
                            <!-- <p style="font-size: 14px">规格：{{ tool.deliverType == 'License' ? '按月' : '按次' }}</p> -->
                            <p style="font-size: 14px">交付方式：{{ tool.deliver_type }}</p>
                            <p v-if="tool.deliver_type == 'SaaS' && (tool.remark == 'times' || tool.remark == 'time')" style="font-size: 14px">
                                剩余次数：{{ tool.remains }}
                            </p>
                            <p v-if="tool.deliver_type == 'SaaS' && tool.remark == 'month'" style="font-size: 14px">
                                过期时间：{{ dateFormat(new Date(tool.expire_time), 'yyyy-MM-dd') }}
                            </p>
                            <p v-if="tool.deliver_type == 'License'" style="font-size: 14px">
                                过期时间：{{ dateFormat(new Date(tool.expire_time), 'yyyy-MM-dd') }}
                            </p>
                            <!-- <router-link :to="'/console/mytooldetails?id=' + tool.toolId" class="link-type">
                                <el-button>查看工具详情</el-button>
                            </router-link> -->
                            <!-- <router-link :to="'/console/mytooldetails?id=' + tool.toolId" class="link-type">
                                <el-button style="background: #f2a51a">再次购买</el-button>
                            </router-link> -->
                            <!-- <el-button style="background:#F2A51A;">再次购买</el-button> -->
                        </div>
                    </div>
                    <div v-if="offTools.length == 0" style="width: 170px; margin: 30px auto">
                        <el-empty description="当前没有失效工具"></el-empty>
                    </div>
                </div>
            </div>
        </div>
        <task-upload ref="taskUpload" @handleSuccess="MyToolslist"></task-upload>
        <!-- 弹层 -->
        <el-dialog
            title="请输入机器码获取注册码"
            :visible.sync="jiqimaOpen"
            width="550px"
            :close-on-click-modal="false"
            @close="jiqimaOpenClose"
        >
            <el-input v-model="jiqicode" placeholder="请输入机器码"></el-input>
            <div style="display: flex; justify-content: center; align-items: center; margin-top: 20px">
                <el-button
                    style="
                        width: 250px;
                        height: 44px;
                        background: linear-gradient(90deg, #5ea6fd, #1a81f9);
                        border-radius: 22px;
                        font-size: 16px;
                        color: #ffffff;
                    "
                    @click="getZCCode"
                    >确定</el-button
                >
            </div>
        </el-dialog>
        <el-dialog title="注册码" :visible.sync="zhucemaOpen" width="550px" :close-on-click-modal="false">
            <div class="dialogtext">
                {{ zhucemacode }}
                <span v-clipboard:copy="zhucemacode" @click="copyFn" class="copybtn">复制</span>
            </div>
        </el-dialog>
        <el-dialog title="专属账密" :visible.sync="zhangmiOpen" width="550px" :close-on-click-modal="false">
            <div class="dialogtext">
                账号/密码：{{ zhangcode }}<span v-clipboard:copy="zhangcode" class="copybtn" @click="copyFn">复制</span>
            </div>
            <!-- <div class="dialogtext" style="margin-top: 10px">
                密码：{{ micode }}<span v-clipboard:copy="micode" @click="copyFn" class="copybtn">复制</span>
            </div> -->
        </el-dialog>
    </div>
</template>
<script>
import { listMyTools, getMyTool, getCodeByCode } from '@/api/my/my'
import { uploadTask } from '@/api/task/task'
import TaskUpload from './TaskUpload'
import { mapGetters } from 'vuex'
import { dateFormat } from '@/util/util'
export default {
    components: { TaskUpload },
    data() {
        return {
            loading: true,
            currentool: '当前工具',
            onTools: [], //当前工具
            offTools: [], //失效工具
            currentToolId: 0,
            currentToolName: '',
            // 机器码弹层
            jiqimaOpen: false,
            toolId: null,
            jiqicode: '',
            // 注册码弹层
            zhucemaOpen: false,
            zhucemacode: '',
            // 账密弹层
            zhangmiOpen: false,
            zhangcode: '123123',
        }
    },
    computed: {
        ...mapGetters(['token']),
    },
    mounted() {
        if (this.token) {
            this.MyToolslist()
        }
    },
    methods: {
        dateFormat,
        // 下载安装
        downLoad(url) {
            if (url) {
                window.open(url)
            }
        },

        // 注册码
        zhuceCodeFn(toolId) {
            this.toolId = toolId
            this.jiqimaOpen = true
        },
        // 关闭机器码弹层
        jiqimaOpenClose() {
            this.toolId = null
            this.jiqimaOpen = false
        },
        getZCCode() {
            const data = {
                toolId: this.toolId,
                registerCode: this.jiqicode,
            }
            getCodeByCode(data).then((res) => {
                if (res.code == 200) {
                    this.jiqimaOpen = false
                    this.zhucemacode = res.msg
                    this.zhucemaOpen = true
                }
            })
        },
        // 在线使用
        useOnline(url) {
            if (url) {
                window.open(url)
            }
        },
        // 专属账密
        myPass(pa) {
            this.zhangmiOpen = true
            this.zhangcode = pa
        },
        // 复制
        copyFn() {
            this.$message.success('复制成功')
        },

        MyToolslist() {
            listMyTools().then((response) => {
                this.myToolList = response.data
                this.onTools = this.myToolList.filter((item) => {
                    return item.status == 0
                })
                this.offTools = this.myToolList.filter((item) => {
                    return item.status == 1
                })
                this.loading = false
            })
        },
        // 立即使用工具
        useTool(tool) {
            getMyTool(tool.tool_id).then((response) => {
                let resuseTool = response.data
                if (resuseTool.remains == 0) {
                    this.$alert('该工具可用次数为0,请先购买再使用。', { dangerouslyUseHTMLString: true })
                    this.listMyTools()
                } else {
                    this.currentToolId = resuseTool.tool_id
                    this.currentToolName = resuseTool.name
                    this.$refs.taskUpload.openDialog(this.currentToolId, this.currentToolName)
                }
            })
        },
    },
}
</script>
<style scoped>
.yishixiao {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 75px;
    height: 35px;
    background: #fe3c3c;
    border-radius: 30px 0px 1px 0px;
    font-weight: 500;
    font-size: 16px;
    color: #ffffff;
    line-height: 35px;
    text-align: center;
}
.dvied {
    width: 4px;
    height: 18px;
    background: #0066eb;
}
.toolclass >>> .el-radio-button__inner {
    width: 200px;
    height: 40px;
}
.toolclass >>> .el-radio-button__orig-radio:checked + .el-radio-button__inner {
    background-color: #0066eb;
    border-color: #0066eb;
}
.contrl {
    position: relative;
    background: #ffffff;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    width: 480px;
    display: flex;
    padding: 10px 10px 30px 10px;
    margin-top: 30px;
    margin-right: 30px;
}
.contrl >>> .el-button {
    /* width: 120px; */
    height: 34px;
    background: #0066eb;
    border-radius: 4px;
    color: #ffffff;
    margin-right: 15px;
    line-height: 10px;
}
.copybtn {
    color: #0066eb;
    margin-left: 20px;
    cursor: pointer;
}
.dialogtext {
    font-weight: 500;
    font-size: 16px;
    color: #333333;
}
</style>