<template>
  <div>
    <el-card>
      <template slot="header">
        <span>任务管理</span>
        <div class="pull-right">
          <el-button type="primary" @click="doAdd()" icon="el-icon-fa-plus" title="新增任务"></el-button>
        </div>
      </template>
      <el-form :model="queryform" ref="queryform">
        <el-row>
          <el-col :lg='4' :sm='12'>
            <el-form-item label="任务名称" prop="jobName">
              <el-input v-model="queryform.jobName" />
            </el-form-item>
          </el-col>
          <el-col :lg='4' :sm='12'>
            <el-form-item label="执行状态" prop="triggerState">
              <el-select v-model="queryform.triggerState" placeholder="请选择">
                <el-option v-for="item in triStOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="margin-top-2">
      <template slot="header">
        <span>任务数据列表</span>
        <div class="pull-right">
          <el-button type="primary" @click="queryJobData" icon="el-icon-fa-search" title="查询"></el-button>
          <el-button type="primary" @click="resetquery" icon="el-icon-fa-reply-all" title="重置"></el-button>
          <el-button type="primary" :disabled="!multipleSelection.length>0" icon="el-icon-fa-play" @click="lockJobs(true)" title="批量启用"></el-button>
          <el-button type="primary" :disabled="!multipleSelection.length>0" icon="el-icon-fa-pause" @click="lockJobs(false)" title="批量暂停"></el-button>
          <el-button type="primary" :disabled="!multipleSelection.length>0" icon="el-icon-fa-trash" @click="delJobs()" title="批量删除"></el-button>
        </div>
      </template>
      <PageTable :auto-load="true" hideTitle ref="dataTable" @load-data="dataTableLoad" @selection-change="handleSelectionChange" :data="table.data" highlight-current-row stripe border>
        <el-table-column type="selection" align='center' width="50" fixed='left'></el-table-column>
        <el-table-column prop="jobname" label="任务名称" show-overflow-tooltip></el-table-column>
        <el-table-column prop="description" label="任务描述" show-overflow-tooltip></el-table-column>
        <el-table-column prop="jobclasspath" label="执行类" show-overflow-tooltip></el-table-column>
        <el-table-column prop="triggerstate" label="状态" width="50" show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button v-if="scope.row.triggerstate == 'ACQUIRED'" type="success">执行</el-button>
            <el-button v-if="scope.row.triggerstate == 'PAUSED'" type="info">暂停</el-button>
            <el-button v-if="scope.row.triggerstate == 'ERROR'" type="error">错误</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="cronexpression" label="Cron表达式" width="120" show-overflow-tooltip></el-table-column>
        <!-- <el-table-column prop="triggername" label="触发器名称" width="100" show-overflow-tooltip></el-table-column>
        <el-table-column prop="triggergroup" label="触发器组" width="100" show-overflow-tooltip></el-table-column>
        <el-table-column prop="nextfiretime" label="下一次执行时间" width="140" show-overflow-tooltip>
          <template slot-scope='scope'>{{scope.row.nextfiretime|date('%Y-%m-%d %T')}}</template>
        </el-table-column>
        <el-table-column prop="prevfiretime" label="上一次执行时间" width="140" show-overflow-tooltip>
          <template slot-scope='scope'>{{scope.row.prevfiretime|date('%Y-%m-%d %T')}}</template>
        </el-table-column>
        <el-table-column prop="starttime" label="触发器生效时间" width="140" show-overflow-tooltip>
          <template slot-scope='scope'>{{scope.row.starttime|date('%Y-%m-%d %T')}}</template>
        </el-table-column>
        <el-table-column prop="endtime" label="触发器失效时间" width="140" show-overflow-tooltip>
          <template slot-scope='scope'>{{scope.row.endtime|date('%Y-%m-%d %T')}}</template>
        </el-table-column>
        <el-table-column prop="cronexpression" label="Cron表达式" width="120" show-overflow-tooltip></el-table-column>
        <el-table-column prop="timezoneid" label="触发器时区" width="120" show-overflow-tooltip></el-table-column> -->
        <el-table-column label="操作" fixed='right' width="150" align="center">
          <template slot-scope="scope">
            <el-button :disabled="scope.row.triggerstate==='ACQUIRED'" type="primary" icon="el-icon-fa-edit" title="修改" @click="doEdit(scope.row)"></el-button>
            <el-button type="primary" icon="el-icon-fa-eye" title="查看" @click="doEye(scope.row)"></el-button>
            <el-button v-if='scope.row.triggerstate==="PAUSED"' type="primary" icon="el-icon-fa-play" title="启用" @click="dolock(scope.row,true)"></el-button>
            <el-button v-if='scope.row.triggerstate==="ACQUIRED"' type="primary" icon="el-icon-fa-pause" title="暂停" @click="dolock(scope.row,false)"></el-button>
            <el-button :disabled="scope.row.triggerstate==='ACQUIRED'" type="primary" icon="el-icon-fa-trash" title="删除" @click="delJob(scope.row)"></el-button>
          </template>
        </el-table-column>
      </PageTable>
    </el-card>

    <el-dialog append-to-body v-draggable :visible.sync="showDia" title="任务管理" :close-on-click-modal="false">
      <div class="dialog-button" v-if='!currJobData.onlyRead'>
        <el-button @click="$refs.taskmgredit.submitForm()" type="primary" plain icon="el-icon-fa-save" title="保存"></el-button>
        <el-button @click="$refs.taskmgredit.resetForm()" type="primary" icon="el-icon-fa-reply-all" plain title="重置"></el-button>
      </div>
      <task-mgr-edit ref='taskmgredit' :jobData='currJobData' @closeDia='closeDia'></task-mgr-edit>
    </el-dialog>

  </div>
</template>
<script>
import TaskMgrEdit from "./TaskMgrEdit";
import TaskMgrApi from "@/api/base/sysm/TaskMgrApi";

export default {
  name: "TaskMgr",
  components: { TaskMgrEdit },
  data() {
    return {
      triStOptions: [
        // {
        //   value: "WAITING",
        //   label: "等待"
        // },
        {
          value: "PAUSED",
          label: "暂停",
          info: "info"
        },
        {
          value: "ACQUIRED",
          label: "正常执行",
          type: "success"
        },
        // {
        //   value: "BLOCKED",
        //   label: "阻塞"
        // },
        {
          value: "ERROR",
          label: "错误",
          typeL: "danger"
        }
      ],
      currJobData: {
        job: null,
        onlyRead: null
      },
      queryform: {
        jobName: null,
        triggerState: null
      },
      showDia: false,
      table: {
        data: []
      },
      multipleSelection: []
    };
  },
  methods: {
    closeDia() {
      this.showDia = false;
      this.queryJobData();
    },
    doEdit(rowData) {
      this.currJobData = {
        job: Object.assign({}, rowData),
        onlyRead: false
      };
      this.showDia = true;
    },
    doAdd() {
      this.currJobData = {
        job: null,
        onlyRead: false
      };
      this.showDia = true;
    },
    doEye(rowData) {
      this.currJobData = {
        job: Object.assign({}, rowData),
        onlyRead: true
      };
      this.showDia = true;
    },
    queryJobData() {
      this.$refs.dataTable.load(this.queryform);
    },
    resetquery() {
      this.$refs.queryform.resetFields();
    },
    dataTableLoad(params, resolve) {
      TaskMgrApi.queryJob(params)
        .then(resolve) // 让表格解析你提供的数据 (主要解析页码等)
        .then(respData => (this.table.data = respData.datarows)); // 本地也记录一下数据 (提供给表示显示的数据)
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // triggerState(row, column, cellValue) {
    //   let label = "unknow";
    //   let currIndex = this.triStOptions.findIndex(
    //     item => item.value === cellValue
    //   );
    //   if (currIndex > -1) return this.triStOptions[currIndex].label;
    //   return label;
    // },
    lockJobs(t) {
      let jobKeys = [];
      this.multipleSelection.forEach((value, index) => {
        jobKeys.push({
          jobName: value.jobname
        });
      });
      if (t) {
        TaskMgrApi.runJob(jobKeys).then(resp => {
          if (resp.respCode === "000000") {
            this.$message.success(resp.respDesc);
          } else {
            this.$message.error(resp.respDesc);
          }
          this.queryJobData();
        });
      } else {
        TaskMgrApi.stopJob(jobKeys).then(resp => {
          if (resp.respCode === "000000") {
            this.$message.success(resp.respDesc);
          } else {
            this.$message.error(resp.respDesc);
          }
          this.queryJobData();
        });
      }
    },
    dolock(rowData, t) {
      if (t) {
        TaskMgrApi.runJob([
          {
            jobName: rowData.jobname
          }
        ]).then(resp => {
          if (resp.respCode === "000000") {
            this.$message.success(resp.respDesc);
          } else {
            this.$message.error(resp.respDesc);
          }
          this.queryJobData();
        });
      } else {
        TaskMgrApi.stopJob([
          {
            jobName: rowData.jobname
          }
        ]).then(resp => {
          if (resp.respCode === "000000") {
            this.$message.success(resp.respDesc);
          } else {
            this.$message.error(resp.respDesc);
          }
          this.queryJobData();
        });
      }
    },
    delJobs() {
      let jobKeys = [];
      this.multipleSelection.forEach((value, index) => {
        jobKeys.push({
          jobName: value.jobname
        });
      });
      TaskMgrApi.delJob(jobKeys).then(resp => {
        if (resp.respCode === "000000") {
          this.$message.success(resp.respDesc);
        } else {
          this.$message.error(resp.respDesc);
        }
        this.queryJobData();
      });
    },
    delJob(rowData) {
      TaskMgrApi.delJob([
        {
          jobName: rowData.jobname
        }
      ]).then(resp => {
        if (resp.respCode === "000000") {
          this.$message.success(resp.respDesc);
        } else {
          this.$message.error(resp.respDesc);
        }
        this.queryJobData();
      });
    }
  }
};
</script>
