<!-- 任务管理-日志信息查询 -->
<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;

    }
  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>