<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="ordenum">
                <el-form :model="queryParam" :rules="rules" label-position="left"  label-width="70px" class="baseinfo" ref="queryForm">
                    <div style="display:flex;flex-wrap:wrap;padding-top: 10px;padding-left: 20px;background: #edecec;">
                        <el-form-item  label="任务名称" prop="projectName" >
                            <el-input v-model="queryParam.projectName"  size="mini" clearable></el-input>
                        </el-form-item>
                        <el-form-item  label="任务状态" prop="status" style="margin-left:20px">
                            <el-select v-model="queryParam.status" placeholder=""  size="mini" clearable>
                                <!-- <el-option label="请选择" value="">请选择</el-option> -->
                                <el-option label="测试中" value="0">执行中</el-option>
                                <el-option label="任务完成" value="1">处理完成</el-option>
                                <el-option label="任务异常" value="2">错误</el-option>
                                <el-option label="任务失败" value="3">异常</el-option>
                            </el-select>
                        </el-form-item>
                        <el-button  type="primary" icon="el-icon-search"  size="small" @click="getList()">搜索</el-button>
                        <el-button style="background: #F2A51A;" @click="resetQuery">重置</el-button>
                    </div>
                </el-form>
                <el-table v-loading="loading" :data="tasksdata" style="margin-top: 30px;">
                    <el-table-column label="序号" width="100px" align="center">
                        <template slot-scope="scope">
                            {{ scope.$index + 1 }}
                        </template>
                    </el-table-column>
                    <el-table-column  label="任务ID" align="center"  key="jobLogId"  prop="jobLogId" width="80" />
                    <el-table-column  label="测试工具"  align="center"  key="toolName" prop="toolName" :show-overflow-tooltip="true" />
                    <el-table-column  label="任务名称"  align="center"  key="projectName"  prop="projectName" :show-overflow-tooltip="true" />
                    <el-table-column label="创建时间"  align="center" key="createTime"  prop="createTime" width="180" >
                        <template slot-scope="scope">
                        <span>{{ parseTime(scope.row.createTime) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  label="更新时间" align="center" prop="updateTime" width="180" >
                        <template slot-scope="scope">
                        <span>{{ parseTime(scope.row.updateTime) }}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" align="center" key="status" prop="status">
                        <template slot-scope="scope">
                        <el-tooltip  :disabled="scope.row.status == 0 || scope.row.status == 1" :content="scope.row.msg" placement="top" >
                            <el-tag  v-if="scope.row.status == 0"  type="primary"  effect="dark"  size="small"
                                style="width: 68px; padding-left: 12px; padding-right: 12px;;cursor:pointer"  >测试中
                            </el-tag>
                            <el-tag  v-if="scope.row.status == 1 && (scope.row.fileUrl == null || scope.row.fileUrl == '')" type="primary" effect="dark" size="small"
                                style="width: 68px; padding-left: 9px; padding-right: 12px;;cursor:pointer" >测试中
                            </el-tag>
                            <el-tag  v-if="scope.row.status == 1 && scope.row.fileUrl != null && scope.row.fileUrl != ''"  type="success"  effect="dark" size="small"
                                style="width: 68px; padding-left: 9px; padding-right: 12px;cursor:pointer" >任务完成
                            </el-tag>
                            <el-tag  v-if="scope.row.status == 2"  type="warning" effect="dark" size="small" style="width: 77px; padding-left: 9px; padding-right: 12px;;cursor:pointer" >
                                     任务异常<i class="el-icon-warning"></i>
                            </el-tag>
                            <el-tag  v-if="scope.row.status == 3"  type="danger" effect="dark" size="small"
                                style="width: 77px; padding-left: 9px; padding-right: 12px;cursor:pointer" >任务失败 <i class="el-icon-warning"></i>
                            </el-tag>
                        </el-tooltip>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="操作">
                        <template slot-scope="scope">
                        <el-button v-if="scope.row.status == 0" size="mini" type="text" icon="el-icon-help"  style="color: #1890ff !important"  
                                    @click="viewTime(scope.row)">查看测试进度
                        </el-button>
                        <!--   -->
                        <el-button v-if="scope.row.status == 1 && (scope.row.fileUrl == null || scope.row.fileUrl == '')" size="mini" type="text" icon="el-icon-help"
                            style="color: #1890ff !important"  @click="viewTime(scope.row)" >查看测试进度
                        </el-button>
                        <!-- -->
                        <el-button  v-if="scope.row.status == 1 && scope.row.fileUrl != null && scope.row.fileUrl != ''"  size="mini"  type="text"    icon="el-icon-help"
                            style="color: #1890ff !important"  @click="viewResult(scope.row)">查看测试结果
                        </el-button>
                        <el-button   v-if="scope.row.status == 2"  size="mini" type="text" icon="el-icon-help" style="color: #1890ff !important"
                            @click="resubmit(scope.row)"  >重新提交任务
                        </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- @size-change="handleSizeChange" :current-page="currentPage"         -->
                <div v-if="total>8"  style='width:100%;margin-top:30px;text-align: center;'>
                    <el-pagination background                   
                        @current-change="handleCurrentChange"
                             
                        :page-size="queryParam.pageSize"
                        layout="total,  prev, pager, next, jumper"
                        :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>
        <el-dialog title="测试结果详情" :visible.sync="resultOpen" width="600px"  :close-on-click-modal="false" append-to-body class="tooldialog" @close="confirmResult()">
            <el-divider style="margin-bottom:10px"></el-divider>
            <div style="display:flex;margin-left:30px;">
                <p style="font-weight:bold;margin-right:20px;color:#333333;">工具名称</p>
                <p>{{currentToolName}}</p>
            </div>
            <div style="display:flex;margin-left:30px;">
                <p style="font-weight:bold;margin-right:20px;color:#333333;">任务名称</p>
                <p>{{currentTaskName}}</p>
            </div>
            <div v-for="(value, key) in result" :key="key">
                <div style="display:flex;margin-left:30px;" v-if="key != 'url' && key != 'userId'" :style="key == 'score' ? '{width:200px;font-size:18px;color:#0969bd;}' : ''">
                    <p style="font-weight:bold;margin-right:20px;color:#333333;">{{getLabel(key)}}</p>
                    <p  v-html="key == 'testLevel' 
                                        ? getTestLevelText(value) : key == 'testPlug' || key == 'testMilitary' || key == 'status'
                                        ? getBooleanText(value)
                                        : key == 'fileName'
                                        ? getDownloadUrl(value)
                                        : key == 'score'
                                        ? getScore(value)
                                        : value">
                    </p>
                </div>
            </div>
            <div style="text-align:center;margin-top:20px" @click="downloadFile(downloadUrl)">   
                <el-button icon='el-icon-download' style="background: #0066EB;color:#FFFFFF">下载测试结果报告</el-button>
            </div>
        </el-dialog>
        <el-dialog title="测试进度" :visible.sync="timeOpen" :close-on-click-modal="false" width="600px" append-to-body @close="confirmResult(1)" class="tooldialog">
             <el-divider style="margin-bottom:10px"></el-divider>
            <div style="display:flex;margin-left:50px;">
                <p style="font-weight:bold;margin-right:30px;color:#333333;">工具名称</p>
                <p>{{currentToolName}}</p>
            </div>
            <div style="display:flex;margin-left:50px;">
                <p style="font-weight:bold;margin-right:30px;color:#333333;">任务名称</p>
                <p>{{currentTaskName}}</p>
            </div>
            <div style="display:flex;margin-left:50px;">
                <p style="font-weight:bold;margin-right:30px;color:#333333;">测试进度</p>
                <p>已完成：{{ remainTime }}%</p>
            </div>
            <div style="text-align:center;margin-top:20px">
                <el-button style="background: #0066EB;color:#FFFFFF;width:100px" @click="confirmResult(1)">确定</el-button>
            </div>
        </el-dialog>
        <task-upload ref="taskUpload" @handleSuccess="getList"></task-upload>
    </div>
</template>
<script>
    import { listMyTasks } from "@/api/my/my";
    import { queryProcess, queryResult } from "@/api/task/task";
    import TaskUpload from "./TaskUpload";
    import {mapGetters} from "vuex";
    export default{
        components: { TaskUpload },
        data(){
            return{
                loading:false,
                // 查询参数
                queryParam: {
                    taskType: undefined,
                    projectName: undefined,
                    status: undefined,
                    pageNum: 1,
                    pageSize: 10,
                },
                rules:{},
                tasksdata:[],
                total:'',
                timeOpen: false,//测试进度
                resultOpen: false,//测试结果
                result: {},
                downloadUrl: "",//下载的id
                currentToolName: "",//工具名称
                currentTaskName: "",//任务名称
                remainTime: 0,//任务进度
            }
        },
        computed: {
            ...mapGetters(['token'])
        },

        mounted(){
            if(this.token){
                this.getList();
            }
        },
        methods:{
            //重置    
            resetQuery() {
                this.resetForm("queryForm");
                this.getList();
            },
            getList(){
                this.loading = true;
                listMyTasks(this.queryParam).then((response) => {
                    this.tasksdata = response.rows;
                    this.total = response.total;
                    this.loading = false;
                });  
            },
            // //分页
            // handleSizeChange(val) {
            //      this.queryParam.pageSize=val;
            //     this.getList();
            // },
            //当前页码
            handleCurrentChange(val) {
                this.queryParam.pageNum=val;
                this.getList();
            },
            //重新提交上传任务
            resubmit(row) {
                this.$refs.taskUpload.resubmit(row.taskId, row.toolId, row.toolName);
            },
            // 查看测试结果
            viewResult(row) {
                this.currentToolName = row.toolName;
                this.currentTaskName = row.projectName;
                queryResult(row.taskId).then((res) => {
                    if (res.result) {
                        this.result = JSON.parse(res.result);                     
                        this.resultOpen = true;
                        this.downloadUrl = this.result["url"];
                        // this.downloadUrl =res.fileUrl;
                    }else{
                        this.$message.warning('暂无结果')
                    }
                    if (res.fileUrl) {
                        this.downloadUrl = res.fileUrl;
                    }
                });
            },
            //查看测试进度
            viewTime(row) {
                this.currentToolName = row.toolName;
                this.currentTaskName = row.projectName;
                queryProcess(row.taskId).then((res) => {
                    if (res.remainTime) {
                    this.remainTime = res.remainTime;
                    }
                });
                this.timeOpen = true;
            },
            downloadResult() {
                download(this.downloadUrl);
            },
            //下载测试报告
            downloadFile(fileid) {
                const loading = this.$loading({
                    lock: true,
                    text: '正在下载，请稍后...',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                // downloadHttp(fileid)
                // let fileUrl=`https://keyitest.cn/prod-api/common/download/fast?filePath=${fileid}&delete=false`         
                // window.location.href=fileUrl
                downloadFast(fileid,loading);
            },
            getLabel(key) {
                if ("testPlug" == key) return "是否检测第三方插件";
                if ("testMilitary" == key) return "是否军用代码";
                if ("testLevel" == key) return "检测特征级别";
                if ("status" == key) return "是否存在分析结果";
                if ("sensitivityThreshold" == key) return "灵敏度阈值";
                if ("fileName" == key) return "测试结果";
                if ("version" == key) return "版本";
                if ("score" == key) return "测试得分";
                if ("projectId" == key) return "项目ID";
                return key;
            },
            getBooleanText(value) {
                if (value == 0) return "否";
                    else return "是";
                },
            getTestLevelText(value) {
                if (value == 0) return "否";
                else return "是";
                },
            getDownloadUrl(value) {
                // let url = this.result['url'];
                // + '&nbsp;&nbsp;<a href="javascript:downloadFast(\''+url+'\')" class="el-button el-button--primary el-button-mini btn-blue">下载</a>'
                    return value;
            },
            getScore(value) {
                return (
                    '<span style="font-weight: bold;font-size: 24px;line-height: 33px;color:#e84c3d;">' +
                    value +
                    "</span>"
                );
            },
            //关闭测试进度
            confirmResult(flag) {
                if (flag == 1) {
                    this.timeOpen = false;
                    this.getList();
                } else 
                    this.resultOpen = false;
                },
        }
    }
</script>
<style scoped>
    .dvied{
        width: 4px;
        height: 18px;
        background: #0066EB;
    }
    .baseinfo >>> .el-input, .baseinfo>>>.el-select{
        width:206px;
        height:40px;
        border-radius: unset;
    }
    /* .baseinfo >>> .el-input__inner{
        height:30px;
    } */
    .baseinfo>>>.el-button{
        width:90px;
        height:30px;
        background: #0066EB;
        border-radius: 4px;
        margin-left:20px;
        color:#FFFFFF;
        margin-top:5px;
        line-height:9px;
    }
    .baseinfo >>> .el-form-item {
        margin-bottom: 10px;
    }
    .ordenum>>>.el-table th{
        background-color:#F7F7F7;
       color:#666666;
        text-align:center;
    }
    .ordenum>>>.el-table td{
        text-align:center;
        background-color:#FFFFFF;
        height:60px;
        color:#333333;
    }
    .ordenum>>>.el-table--border th{
        border-right:#F7F7F7
    }
    .inforbtn>>>.el-button{
        width: 90px;
        height: 34px;
        background: #0066EB;
        border-radius: 4px;
        color:#FFFFFF
    }
    .tooldialog>>>.el-divider--horizontal{
        margin:-20px 0 10px 0;
    }
    .tooldialog>>>.el-form-item__label{
        color:#333333;
        font-weight:bold;
        margin-right:20px
    }
    .tooldialog>>>.el-dialog__title{
        font-weight:bold;
        color: #0969bd
    }
</style>