<template>
  <!-- 任务列表 -->
  <div id="dailyDatas" class="tab">
    <!-- 表格内容展示 -->
    <div v-show='dailyFlageTable' class="asideBgc">
      <div class='butClick'>
        <xf-buttons @changes="searChange" :btnAuthority='authority' @add='modelAdd(0)' @edit='clickeEdit'
          @deletes='delectVals()' @get='searchChange' :searchPlaceholder='searchPlaceholder'>

          <template #search>
            <span class="m-r-20">
              状态查询：
              <el-radio-group v-model="resources">
                <el-radio label="">全部</el-radio>
                <el-radio label="RUNNING">执行中</el-radio>
                <el-radio label="STOP">停止</el-radio>
              </el-radio-group>
            </span>
          </template>

        </xf-buttons>
      </div>

      <xfTable ref="table" :btnAuthority='authority' @sizeSee='sizeChange' @selectionChange='selectionChange'
        @currentChange='currentChange' @refreshChange='refreshChange' @handleCurrentRowChange='
    handleCurrentRowChange' @handleEdit='handleEdit' @daily='daily' @delectVal='delectVal' @prohibit='enable'
        @enable='enable' @implement='implement' :slotOverhidden='slotName'>
      </xfTable>
    </div>

    <router-view v-show='!dailyFlageTable' @getLists='getLists' @daily='destory'></router-view>
    <!-- 数据添加 -->

    <!-- 数据库类型和队列类型 -->
    <el-dialog title="选择任务类型" :visible.sync="dataSelect" :close-on-click-modal='closeOnClick'
      :lock-scroll='closeOnClick' width="50%" :modal='closeOnClick'>

      <el-row type='flex' class="sqlIcon">
        <el-col v-for='(item,index) in taskTypes' :key='index' :span='5' :offset='1' class="text-center"
          @click.native='handleAdd(item.type,item.taskType)'>
          <el-card shadow="hover">
            <span><i :class="item.iconfont"></i></span>
            <p>{{item.caption}}</p>
          </el-card>
        </el-col>
        </el-col>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dataSelect = false">取 消</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import project from '../../mixins/project'

  var moment = require('moment');

  import {
    notify
  } from '../../util/item'

  /*负责导出组件*/
  export default {
    name: 'dailyDatas',
    data() {
      return {
        deleteId: 'taskId', //标记删除字段
        dataSelect: false,
        dataCl: [{
          caption: '数据任务',
          taskType: 'dataProcessTask',
          type: 0,
          iconfont: 'iconfont icon-shujulvwangtubiao-1'
        }, {
          caption: '数据补遗',
          type: 2,
          taskType: 'dataProcessTask',
          iconfont: 'iconfont icon-shujulvwangtubiao-'
        }],
        resources: '',
        dailyFlageTable: true,
        searchPlaceholder: '请输入任务名称',
        taskTypes: [],
        closeOnClick: false,
        deleteList: [],
        clickValue: '',
        projectInter: '',
        slotName: 'taskName',
        loadOption: {
          menuWidth: 220,
          selection: true,
          menu: true,
          column: [{
            label: '任务名称',
            prop: 'taskName',
            overHidden: true,
            solt: true
          }, {
            label: '类型名称',
            prop: 'taskType',
            formatter: (row, value, text, column) => {
              switch (value) {
                case 'dataProcessTask':
                  return '数据任务'
                  break;
                default:
                  return '任务'
              }
            }
          }, {
            label: '分组名称',
            prop: 'taskGroup'
          }, {
            label: '任务类型',
            prop: 'isTemp',
            formatter: function (row, value, text, column) {
              switch (value) {
                case 'Y':
                  return '临时'
                  break;
                default:
                  return '周期'
              }
            }
          }, {
            label: '任务状态',
            prop: 'state',
            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: 'updateTime',
            formatter: function (row, value, text, column) {
              if (value === null) {
                return ''
              }
              return moment(value).format('YYYY-MM-DD HH:mm:ss')
            }
          }, {
            label: '启用',
            prop: 'statusruleAddendumEsp',
            overHidden: true,
            solt: true
          }]
        },
      }
    },
    mixins: [project],
    watch: {
      $route(to, from) {
        // 修改当前页面跳转路径，返回实例，并保存当前菜单栏选中状态
        if (to.path === '/quality/dataProcess/scheduledTasks') {
          this.dailyFlageTable = true
        }
      },
    },
    mounted() {
      this.projectDatas();
    },
    methods: {
      async projectDatas() {
        /**
         * 获取任务类型
         */
        this.deleteList = [];
        let datas = {};
        let response = await this.$http.get(this.nozzle.taskType, datas);
        this.getLists();
        this.taskTypes = response.data ? response.data.data : [];
        for (let item of this.taskTypes.values()) {
          item['iconfont'] = 'iconfont icon-shujulvwangtubiao-1';
          item['type'] = 0;
        }

        // 添加数据补遗参数
        this.taskTypes.push({
          caption: '数据补遗',
          type: 2,
          taskType: 'dataProcessTask',
          iconfont: 'iconfont icon-shujulvwangtubiao-'
        })
      },
      destory() {
        // 展示任务列表

        this.dailyFlageTable = true;
      },
      daily(row, index) {
        /**
         * 日志信息查询
         */
        this.dailyFlageTable = false;

        // 日志详情
        this.$router.push({
          path: '/quality/daily',
          query: {
            taskName: row['taskName'],
            taskId: row['taskId']
          }
        })

      },
      implement(row, index) {
        /**
         * 执行
         */
        if (!row['statusruleAddendumEsp']) {
          this.$notify({
            type: 'warning',
            message: '启动任务状态，才能执行任务'
          })
          return
        }

        this.$http.get(this.nozzle.taskRun, {
          params: {
            taskId: row['taskId']
          }
        }).then(response => {
          notify(response)
          if (response.data.code === 200) {
            this.getLists()
          }
        })
      },
      enable(row, index) {
        /**
         * 启用 && 禁用
         */
        // status 启用或者禁用状态：启用为1 禁用为0
        let status = row['disabled'];

        let api = '';
        // 启用
        if (status) {
          api = this.nozzle.startTask;
        } else {
          // 禁用
          api = this.nozzle.stopTask;
        }
        this.editParameter(api, {
          taskId: row['taskId']
        });
      },
      async editParameter(api, datas = {}) {
        // 修改数据传值
        datas['taskParams'] = typeof datas['taskParams'] === 'string' ? datas['taskParams'] : JSON.stringify(datas[
          'taskParams']);

        const response = await this.$http.get(api, {
          params: datas
        });
        this.getLists()
      },
      searchChange(val = '') {
        // 搜索数据
        if (val === '') {
          this.page.currentPage = 1;
          this.getLists();
        } else {
          this.getLists(val);
        }
      },
      async getLists(taskName = null) {
        /**
         * 获取表格数据
         */
        this.deleteList = [];
        let datas = {
          params: {
            "taskName": taskName,
            "state": this.resources === '' ? null : this.resources,
            "pageNo": this.page.currentPage,
            "pageSize": this.page.pageSize
          }
        }
        // 获取数据返回状态 日志
        let response = await this.getTableData(datas, this.nozzle.taskGet);
        response = this.statusCalculation(response);

        this.rendering(response);

      },
      statusCalculation(response) {
        // 状态值计算
        let newRes = response.data.data.list;

        if (newRes.length !== 0) {
          for (let item of newRes.values()) {
            if (item['disabled']) {
              item['statusruleAddendumEsp'] = false;
              item['addendumTitle'] = '禁用';
            } else {
              item['statusruleAddendumEsp'] = true;
              item['addendumTitle'] = '启用';
            }
          }
        }
        return response
      },
      modelAdd(type) {
        /**
         * 添加数据按钮
         * @param {Number} type 类型
         */
        this.dataSelect = true;
      },
      handleAdd(type, task) {
        // 新增按钮
        this.$router.push({
          path: '/dailyWindow',
          query: {
            headTitle: type,
            taskType: task
          }
        })

        this.dataSelect = false;

        this.dailyFlageTable = false;
      },
      clickeEdit() {
        // 单击修改
        if (!this.clickValue) {
          this.$notify.warning('请先选择要修改的行,再进行数据修改!');
          return
        } else {
          this.handleEdit(this.clickValue)
        }
      },
      handleEdit(row) {
        // 行内点击修改

        this.$router.push({
          path: '/dailyWindow',
          query: {
            headTitle: 1,
            taskId: row['taskId']
          }
        })

        this.dailyFlageTable = false;
      },

      deleteUserLise(ids) {
        // 批量删除
        let datas = {
          "params": {
            "taskIds": ids
          }
        }
        this.asyncDelete(datas, this.nozzle.taskDelete);
      },
    }
  }

</script>
<style>
  .sqlIcon {
    margin: 20px 0;
  }

  .sqlIcon .iconfont[class^="icon"] {
    width: auto !important;
    font-size: 60px;
  }

  #dailyDatas .asideBgc {
    height: 100%;
  }

  #dailyDatas .el-dialog__body {
    padding: 18px 38px 0 38px;
  }
   #dailyWindow .el-date-editor .el-range__icon,
    .el-date-editor .el-range-separator {
      line-height: 23px;
    }

   #dailyWindow .fzs {
      display: inline-block;
      width: 330px;
      text-align: right;
      padding-right: 10px;
    }

   #dailyWindow .w60 {
      width: 60%;
    }

   #dailyWindow .datainterval {
      width: 26%;
    }

   #dailyWindow .yzFlex {
      display: flex;
      justify-content: space-around;
    }

   #dailyWindow .dataSourceTest {
      float: right;
      margin-top: 5px;
    }

   #dailyWindow .conditiona {
      padding: 0px 0 10px 141px;
    }

  #dailyWindow .addendumNames {
      line-height: 40px;
    }

   #dailyWindow .el-autocomplete {
      width: 100%;
    }

   #dailyWindow .icon-qiyong:before {
      color: red;
      cursor: pointer;
    }


  #dailyWindow .el-form-itemSuccess {
      color: #63e06e;
      font-size: 12px;
      line-height: 1;
      padding-top: 4px;
      position: absolute;
      top: 100%;
      left: 0;
    }

   #dailyWindow .pull-left {
      float: left;
      color: #1890ff !important;
      font-size: 14px;
      line-height: 23px;
      cursor: pointer;
    }

  #dailyWindow .sectionH2 {
      font-size: 16px;
      color: #000;
      padding-bottom: 12px;
    }

    #dailyWindow .basicB {
      box-shadow: 2px 2px 9px 0px var(--white) !important;
      /* background-color: #fff; */
    }

   #dailyWindow .el-form-item {
      margin-bottom: 12px;
    }

  

</style>