<template>
  <div class="container" style="padding: 30px !important">
    <el-form
      :model="queryParam"
      ref="queryForm"
      :inline="true"
      label-width="68px"
    >
      <!--      <el-form-item label="测试类型"  prop="testType">-->
      <!--        <el-select v-model="queryParam.taskType">-->
      <!--          <el-option label="" value="">请选择</el-option>-->
      <!--          <el-option label="开源分析"  value="open">开源分析</el-option>-->
      <!--          <el-option label="相似度分析"  value="same">相似度分析</el-option>-->
      <!--          <el-option label="自主分析"  value="self">自主分析</el-option>-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->
      <el-form-item label="任务名称" prop="projectName">
        <el-input v-model="queryParam.projectName"></el-input>
      </el-form-item>
      <el-form-item label="任务状态" prop="status">
        <el-select v-model="queryParam.status">
          <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-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="list"
          >搜索</el-button
        >
        <el-button
          icon="el-icon-refresh"
          size="mini"
          @click="resetQuery"
          style="color: #1890ff !important"
          >重置
        </el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="tasks">
      <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="testType" prop="testType" :show-overflow-tooltip="true"-->
      <!--                       width="200">-->
      <!--        <template slot-scope="scope">-->
      <!--          <span>{{ scope.row.testType.replace("open","开源分析").replace("same","相似度分析").replace("self","自主分析") }}</span>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <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"
        key="updateTime"
        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"
              >测试中
            </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"
              >测试中
            </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"
              >任务完成
            </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"
              >任务异常 <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"
              >任务失败 <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>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParam.pageNum"
      :limit.sync="queryParam.pageSize"
      @pagination="list"
    />
    <el-dialog
      title="测试进度"
      :visible.sync="timeOpen"
      :close-on-click-modal="false"
      width="500px"
      append-to-body
      @close="confirmResult(1)"
    >
      <el-form
        label-width="100px"
        style="width: 400px; margin-left: auto; margin-right: auto"
      >
        <el-form-item label="工具名称">
          {{ currentToolName }}
        </el-form-item>
        <el-form-item label="任务名称">
          {{ currentTaskName }}
        </el-form-item>
        <el-form-item label="测试进度">
          已完成：{{ remainTime }}%
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="confirmResult(1)">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      title="测试结果详情"
      :visible.sync="resultOpen"
      :close-on-click-modal="false"
      width="500px"
      append-to-body
    >
      <el-form
        label-width="100px"
        style="width: 400px; margin-left: auto; margin-right: auto"
      >
        <el-form-item label="工具名称">
          {{ currentToolName }}
        </el-form-item>
        <el-form-item label="任务名称">
          {{ currentTaskName }}
        </el-form-item>
        <el-form-item
          v-for="(value, key) in result"
          :label="getLabel(key)"
          v-if="key != 'url' && key != 'userId'"
          :style="
            key == 'score' ? '{width:200px;font-size:18px;color:#0969bd;}' : ''
          "
        >
          <span
            v-html="
              key == 'testLevel'
                ? getTestLevelText(value)
                : key == 'testPlug' || key == 'testMilitary' || key == 'status'
                ? getBooleanText(value)
                : key == 'fileName'
                ? getDownloadUrl(value)
                : key == 'score'
                ? getScore(value)
                : value
            "
          ></span>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="downloadFile(downloadUrl)"
            >下载测试结果报告</el-button
          >
          <!-- <a :href="downloadUrl"   class="el-button el-button--primary el-button-mini btn-blue" style="width:400px;" target="_blank">下载测试结果报告</a> -->
        </el-form-item>
      </el-form>
    </el-dialog>
    <task-upload ref="taskUpload" @handleSuccess="list"></task-upload>
  </div>
</template>

<script>
import { listMyTasks } from "@/api/my/my";
import { queryProcess, queryResult } from "@/api/task/task";
import TaskUpload from "@/views/components/TaskUpload";
export default {
  name: "MyTask",
  inject: ["reload"],
  components: { TaskUpload },
  data() {
    return {
      loading: false,
      tasks: [],
      // 总条数
      total: 0,
      timeOpen: false,
      resultOpen: false,
      remainTime: 0,
      testTypes: [],
      result: {},
      downloadUrl: "",
      currentToolName: "",
      currentTaskName: "",
      // 查询参数
      queryParam: {
        taskType: undefined,
        projectName: undefined,
        status: undefined,
        pageNum: 1,
        pageSize: 10,
      },
    };
  },
  methods: {
    list() {
      this.loading = true;
      console.log("start query : " + new Date());
      listMyTasks(this.queryParam).then((response) => {
        this.tasks = response.rows;
        this.total = response.total;
        this.loading = false;
        console.log("end query : " + new Date());
      });
    },
    resetQuery() {
      this.resetForm("queryForm");
      this.list();
    },
    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;
    },
    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"];
        }
        if (res.fileUrl) this.downloadUrl = res.fileUrl;
      });
    },
    resubmit(row) {
      this.$refs.taskUpload.resubmit(row.taskId, row.toolId, row.toolName);
    },
    refresh() {
      this.list();
    },
    confirmResult(flag) {
      if (flag == 1) {
        this.timeOpen = false;
          this.list();
      } else this.resultOpen = false;
    },
    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;
    },
    downloadResult() {
      download(this.downloadUrl);
    },
    downloadFile(fileUrl) {
      const loading = this.$loading({
        lock: true,
        text: '正在下载，请稍后...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      downloadFast(fileUrl,loading);
    },
    getScore(value) {
      return (
        '<span style="font-weight: bold;font-size: 24px;line-height: 33px;color:#e84c3d;">' +
        value +
        "</span>"
      );
    },
  },
  created() {
    console.log("my task created:" + new Date());
    this.list();
  },
  mounted() {
    console.log("my task mounted:" + new Date());
  },
};
</script>

<style scoped>
</style>
