<!-- 任务管理-日志信息查询 -->
<template>
  <div id="daily">
    <h5>
      任务名称：{{ taskText }}
      <span @click="taskGo" class="pull-right">返回任务管理列表</span>
    </h5>
    <xfTable
      ref="table"
      @currentChange="currentChange"
      :btnAuthority="authority"
      @sizeSee="sizeChange"
      @taskDaily="taskDaily"
      @cancel="cancel"
    >
    </xfTable>

    <!-- 数据添加 -->
    <el-dialog
      :title="modelHead"
      :visible.sync="dataEdit"
      :close-on-click-modal="closeOnClick"
      :lock-scroll="closeOnClick"
      width="50%"
      :modal="closeOnClick"
      @close="modelClose"
      class="model_body"
    >
      <p>任务进度：</p>
      <el-progress
        :percentage="percentage"
        :color="customColors"
        class="m-b-20"
      ></el-progress>
      <p>
        任务状态：<span :style="{ color: taskColor }">{{ taskStatus }}</span>
      </p>
      <div class="scrollShow">
        <p
          v-for="(item, index) in recordIds"
          :key="index"
          class="m-b-10 zhixing"
        >
          {{ index + 1 }} : {{ item.excuteDate | dateReset }}
          {{ item.taskRecordDetailNow }}
        </p>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="modelClose">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import project from "../../mixins/project";
var moment = require("moment");
import { notify } from "../../util/item";
import { setInterval, clearInterval } from "timers";
/*负责导出组件*/
export default {
  name: "daily",
  data() {
    return {
      deleteId: "taskId", //标记删除字段
      modelHead: "",
      taskText: "",
      dataEdit: false,
      center: true,
      taskColor: "",
      scrollLock: false,
      closeOnClick: false,
      taskId: "",
      deleteList: [],
      taskStatus: "",
      timeoutDaily: "",
      percentage: 0,
      customColors: [
        {
          color: "#f56c6c",
          percentage: 20
        },
        {
          color: "#e6a23c",
          percentage: 40
        },
        {
          color: "#C32CD5",
          percentage: 60
        },
        {
          color: "#23D767",
          percentage: 80
        },
        {
          color: "#209EF4",
          percentage: 100
        }
      ],

      recordIds: [],
      loadOption: {
        menuWidth: 150,
        menu: true,
        column: [
          {
            label: "任务触发时间",
            prop: "tringgerTime",
            formatter: function(row, value, text, column) {
              if (value === null) {
                return "";
              }
              return moment(value).format("YYYY-MM-DD HH:mm:ss");
            }
          },
          {
            label: "触发类型",
            prop: "tringgerType",
            formatter: function(row, value, text, column) {
              switch (value) {
                case "TASK_CRON":
                  return "Cron触发";
                  break;
                default:
                  return "手动触发";
              }
            }
          },
          {
            label: "任务状态",
            prop: "status",
            formatter: function(row, value, text, column) {
              switch (value) {
                case "WAITING":
                  return "等待中";
                  break;
                case "RUNNING":
                  return "执行中";
                  break;
                case "CANCELED":
                  return "取消执行";
                  break;
                case "ERROR":
                  return "执行异常";
                  break;
                case "STOP":
                  return "停止";
                  break;
                default:
                  return "执行完毕";
              }
            }
          },
          {
            label: "修改时间",
            prop: "updated",
            formatter: function(row, value, text, column) {
              if (value === null) {
                return "";
              }
              return moment(value).format("YYYY-MM-DD HH:mm:ss");
            }
          }
        ]
      }
    };
  },
  mixins: [project],
  props: {},
  created() {
    this.authorityMeth("daily");
  },
  mounted() {
    this.dailyParams(this.$route.query);
  },
  filters: {
    dateReset(val) {
      /**
       * 更新时间
       */
      if (val === null) {
        return "";
      }
      return moment(val).format("YYYY-MM-DD HH:mm:ss");
    }
  },
  beforeDestroy() {
    this.clearDaily();
  },
  methods: {
    dailyParams(newVal) {
      //默认第一页数据
      this.page.currentPage = 1;
      this.page.pageSize = 10;
      this.taskId = newVal.taskId;
      this.taskText = newVal.taskName;
      this.modelHead = `正在执行任务 : ${newVal.taskName}`;
      this.getLists(newVal.taskId);
    },
    modelClose() {
      // 关闭模态框
      this.dataEdit = false;
      this.clearDaily();
    },
    clearDaily() {
      // 清空定时查询追加增量信息
      let _this = this,
        flages = this.timeoutDaily ? true : false;
      if (flages) {
        clearTimeout(_this.timeoutDaily);
      }
    },
    taskDaily(row, index) {
      /**
       * 任务详情
       */
      this.dataEdit = true;
      this.getDailyTask(row["recordId"]);
    },
    async cancel(row, index) {
      /**
       * 取消
       */
      let datas = {
        params: {
          recordId: row["recordId"]
        }
      };
      let response = await this.$http.get(this.nozzle.taskCancelTask, datas);
      notify(response);
      this.getLists();
    },
    taskGo() {
      // 返回任务管理列表
      this.clearDaily();
      this.$emit("daily");
      this.$router.push({
        path: "/quality/dataProcess/scheduledTasks"
      });
    },
    async getDailyTask(recordId = "") {
      /**
       * 获取任务记录,查看
       */
      this.percentage = 0;
      this.deleteList = [];
      let datas = {
        params: {
          taskRecordId: recordId
        }
      };

      let response = await this.$http.get(this.nozzle.getTaskRecordStep, datas);
      this.recordIds = response.data.data ? response.data.data : [];
      let lastData = this.recordIds[this.recordIds.length - 1];

      if (this.recordIds.length > 0 && lastData["status"] !== "DONE") {
        // 任务状态不为空，则进行定时查询
        if (lastData["status"] === "ERROR") {
          this.percentage = ~~lastData["percentage"];
          return;
        }

        this.$notify({
          type: "success",
          message: "任务执行中，请稍后..."
        });

        this.setTimeoutGetTask(recordId, lastData["excuteDate"]);
      }

      // 最后一个参数
      if (this.recordIds.length > 0) {
        this.percentage = ~~lastData["percentage"];
        this.taskStatus = lastData["status"];
        // 字体标记
        this.taskColor = this.customColors[this.choiceColor(this.percentage)][
          "color"
        ];
      }
    },
    scrollBottom() {
      // 滚动到底部
      this.$nextTick(() => {
        let scr = document.querySelector(".scrollShow");
        scr.scrollTop = scr.scrollHeight;
      });
    },
    choiceColor(num) {
      num = +num;
      if (0 <= num && num <= 20) {
        return 0;
      } else if (20 < num && num <= 40) {
        return 1;
      } else if (40 < num && num <= 60) {
        return 2;
      } else if (60 < num && num <= 80) {
        return 3;
      } else if (80 < num && num <= 100) {
        return 4;
      }
    },
    async setTimeoutGetTask(recordId, lastTime) {
      // 定时获取任务，关闭则清除定时器
      let datas = {
        params: {
          taskRecordId: recordId,
          lastExcuteTime: moment(lastTime).format("YYYY-MM-DD HH:mm:ss")
        }
      };

      this.timeoutDaily = setTimeout(() => {
        let response = this.$http
          .get(this.nozzle.getTaskRecordCacheInc, datas)
          .then(response => {
            // if (response.data.code === 200) {
            //   response.data.message = '任务执行中，请稍后...'
            // }
            // notify(response);

            let res = response.data.data ? response.data.data : [];

            // 成功渲染数据
            if (response.data.code === 200) {
              this.recordIds = [...this.recordIds, ...res];
              // 进度条
              this.percentage =
                res.length === 0
                  ? this.percentage
                  : ~~res[res.length - 1]["percentage"];

              this.taskStatus =
                res.length === 0
                  ? this.taskStatus
                  : res[res.length - 1]["status"];
              this.scrollBottom();
            }

            if (res.length !== 0) {
              if (
                res[res.length - 1]["status"] === "DONE" ||
                res[res.length - 1]["status"] === "ERROR"
              ) {
                // 最后一个参数，清理定时器
                this.clearDaily();

                this.$notify({
                  type: "success",
                  message: "任务执行完毕..."
                });
              }
            } else {
              // 已每条最新数据作为查询条件
              this.setTimeoutGetTask(
                recordId,
                res.length === 0 ? lastTime : [res.length - 1]["excuteDate"]
              );
            }
          });
      }, 3000);
    },
    async getLists(taskId = this.taskId) {
      /**
       * 获取日志记录
       */
      if (taskId === "") {
        taskId = this.taskId;
      }

      this.deleteList = [];
      let datas = {
        params: {
          taskId: taskId,
          pageNo: this.page.currentPage,
          pageSize: this.page.pageSize
        }
      };
      // 获取数据返回状态 日志
      let response = await this.getTableData(
        datas,
        this.nozzle.queryRecordByTaskId
      );
      this.rendering(response);
    }
  }
};
</script>
<style scoped>
h5 {
  padding: 10px;
  font-size: 18px;
  color: var(--white) !important;
}
h5 span {
  cursor: pointer;
  text-decoration: underline;
  color: #409eff;
}

#daily {
  height: 98%;
  /* background: #fff; */
  padding: 20px;
}

.scrollShow {
  height: 450px;
  overflow-y: auto;
}

.zhixing {
  padding-left: 5px !important;
  line-height: 24px;
}

.model_body p {
  padding: 5px 0;
  font-size: 16px;
}
</style>