<template>
  <el-drawer :visible.sync="drawer" size="60%">
    <!-- 标题 -->
    <h3 slot="title">{{ rowData.taskName }}</h3>
    <div style="padding:0 15px;">
      <!-- 任务信息 -->
      <div class="table-top-title">
        <el-row>
          <el-col :span="6"><b>应用：</b>{{ rowData.appName }}</el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="6"><b>状态：</b>{{ taskStatus }}</el-col>
          <el-col :span="18"><b>操作人：</b>{{ rowData.operatorName }}</el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="6"><b>操作时间：</b>{{ rowData.datadate }}</el-col>
          <el-col :span="18"><b>操作结果：</b>{{ taskOperationResult }}</el-col>
        </el-row>
      </div>
      <!-- 任务详细列表 -->
      <task-table :table-list="tableData" :header="head"></task-table>
    </div>
  </el-drawer>
</template>

<script>
import TaskTable from "../TaskTable";

import { handleAdvertiserOcmp } from "@/api/report.js";

export default {
  components: {
    TaskTable
  },
  props: {
    pkgList: {
      type: Array
    }
  },
  computed: {
    taskStatus() {
      let status = true;
      this.tableData.map(item => {
        status &= item.currentPlan >= item.totalPlan;
      });
      return status ? "已完成" : "未完成";
    },
    taskOperationResult() {
      let taskAll = this.rowData;
      let diff = taskAll.total - taskAll.current;
      return (
        "总共" +
        taskAll.total +
        "条，已完成" +
        taskAll.current +
        "条，未完成" +
        diff +
        "条"
      );
    }
  },
  data() {
    return {
      drawer: false, //弹窗控制
      rowData: {}, //外面任务列表一行的数据
      tableData: [], //表格数据列
      head: [
        { prop: "id", label: "ID", width: "50" },
        { prop: "advertiserId", label: "广告主ID", width: "160" },
        { prop: "bid", label: "目标改价", width: "50" },
        { prop: "advertiserName", label: "广告主", tooltip: true },
        { label: "任务进度", tag: "detailProgress" },
        // { prop: "createdAt", label: "创建时间", width: "180" },
        {
          prop: "executeTime",
          label: "执行时间",
          width: "120",
          formatter: row => {
            if (!row.executeTime) return "无";
            let str = "";
            let time = row.executeTime;
            let hour = Math.floor(time / 3600);
            time = Math.floor(time % 3600);
            str += hour ? hour + " 小时 " : "";
            let minutes = Math.floor(time / 60);
            time = Math.floor(time % 60);
            str += minutes ? minutes + " 分 " : "";
            str += time ? time + " 秒 " : "";
            return str;
          }
        },
        { label: "状态&操作", tag: "operation", width: "150" }
      ] //表头定制
    };
  },
  methods: {
    /**
     * 获取任务列表
     */
    getTaskList(row) {
      this.drawer = true;
      this.rowData = row; //获取到行数据
      handleAdvertiserOcmp({ taskId: row.id }, "get").then(res => {
        this.tableData = res.result.data;
      });
    }
  }
};
</script>

<style scoped>
.table-top-title {
  line-height: 22px;
  margin-bottom: 10px;
}
</style>
