<template>
  <div>
    <div class="title">
      <el-button size="small" type="primary" plain @click="onAddJobClicked" icon="el-icon-plus">添加</el-button>
      <el-button size="small" type="primary" plain @click="loadJobData" :loading="loading" icon="el-icon-refresh-right">刷新</el-button>
      <el-button size="small" type="warning" plain @click="onUpdateStatusClicked" v-if="isStandby" icon="el-icon-video-pause">待机中</el-button>
      <el-button size="small" type="success" plain @click="onUpdateStatusClicked" v-else icon="el-icon-video-play">运行中</el-button>
    </div>

    <div>
      <el-table :data="jobList" class="w100p" border center @row-click="onTriggerClicked">
        <el-table-column prop="jobName" label="任务名称" align="center"></el-table-column>
        <el-table-column prop="jobGroup" label="任务所在组" sortable align="center"></el-table-column>
        <el-table-column prop="jobClass" label="任务类名" align="center">
           <template v-slot="scope">
            {{ scope.row.jobClass.slice(scope.row.jobClass.lastIndexOf('.') + 1) }}
          </template>
        </el-table-column>
        <el-table-column prop="jobDescription" label="任务描述" align="center"></el-table-column>
        <el-table-column prop="jobState" label="状态" align="center" width="80px">
           <template v-slot="scope">
            <span  v-if="scope.row.jobState === 'NORMAL'" style="color:#409EFF;">运行中</span>
            <span  v-else-if="scope.row.jobState === 'PAUSED'" style="color:#E6A23C;">暂停</span>
            <span  v-else-if="scope.row.jobState === 'COMPLETE'" style="color:#67C23A;">完成</span>
            <span  v-else-if="scope.row.jobState === 'ERROR'" style="color:#F56C6C;">错误</span>
            <span  v-else-if="scope.row.jobState === 'BLOCKED'" style="color:#909399;">锁定</span>
            <span  v-else style="color:blue;">未知状态</span>
          </template>
        </el-table-column>
        <el-table-column prop="previousFireTime" label="上次执行时间" align="center" width="110px">
           <template v-slot="scope">
            <div v-html="dateFormat('yyyy-MM-dd<br/>HH:mm:ss', scope.row.previousFireTime)"></div>
          </template>
        </el-table-column>
        <el-table-column prop="nextFireTime" label="下次执行时间" align="center" width="110px">
           <template v-slot="scope">
            <div v-html="dateFormat('yyyy-MM-dd<br/>HH:mm:ss', scope.row.nextFireTime)"></div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200px">
           <template v-slot="scope">
            <el-tooltip effect="dark" content="添加" placement="top" class="ml10">
              <el-link icon="el-icon-circle-plus-outline" @click="onAddTriggerClicked(scope.row)"></el-link>
            </el-tooltip>
            <el-tooltip effect="dark" content="暂停" placement="top" class="ml10">
              <el-link icon="el-icon-video-pause" @click="onUpdateJobStatusClicked(scope.row, false)"></el-link>
            </el-tooltip>
            <el-tooltip effect="dark" content="恢复" placement="top" class="ml10">
              <el-link icon="el-icon-video-play" @click="onUpdateJobStatusClicked(scope.row, true)"></el-link>
            </el-tooltip>
            <el-tooltip effect="dark" content="删除" placement="top" class="ml10">
              <el-link icon="el-icon-delete" @click="onDeleteJobClicked(scope.row)">
              </el-link>
            </el-tooltip>
            <el-tooltip effect="dark" content="修改" placement="top" class="ml10">
              <el-link icon="el-icon-edit-outline" @click="onUpdateJobClicked(scope.row)">
              </el-link>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog title="添加任务" :visible.sync="addJobDialogVisible" center @close="$refs['addJobForm'].resetFields()">
      <el-form :model="addJobForm" ref="addJobForm">
        <el-form-item label="任务类名" label-width="110px" class="w90p" prop="jobClass" required>
          <el-select v-model="addJobForm.jobClass" placeholder="请选择" class="w100p">
            <el-option v-for="item in jobClassList" :key="item" :label="item.slice(item.lastIndexOf('.')+1)" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="任务名称" label-width="110px" class="w90p" prop="jobName">
          <el-input v-model="addJobForm.jobName"></el-input>
        </el-form-item>
        <el-form-item label="任务分组" label-width="110px" class="w90p" prop="jobGroup" required>
          <el-input v-model="addJobForm.jobGroup"></el-input>
        </el-form-item>
        <el-form-item label="任务描述" label-width="110px" class="w90p" prop="jobDescription">
          <el-input v-model="addJobForm.jobDescription"></el-input>
        </el-form-item>

        <el-form-item label="添加触发器" label-width="110px" class="w90p" prop="addTrigger">
          <el-switch v-model="addJobForm.addTrigger"></el-switch>
        </el-form-item>
        <el-form-item label="触发器类型" label-width="110px" v-if="addJobForm.addTrigger" class="w90p" prop="trigger.type">
          <el-radio v-model="addJobForm.trigger.type" label="SIMPLE" border>SIMPLE</el-radio>
          <el-radio v-model="addJobForm.trigger.type" label="CRON" border>CRON</el-radio>
        </el-form-item>
        <el-form-item label="触发器名称" label-width="110px" v-if="addJobForm.addTrigger" class="w90p" prop="trigger.triggerName">
          <el-input v-model="addJobForm.trigger.triggerName"></el-input>
        </el-form-item>
        <el-form-item label="触发器分组" label-width="110px" v-if="addJobForm.addTrigger" class="w90p" prop="trigger.triggerGroup">
          <el-input v-model="addJobForm.trigger.triggerGroup"></el-input>
        </el-form-item>
        <el-form-item label="触发器描述" label-width="110px" v-if="addJobForm.addTrigger" class="w90p" prop="trigger.triggerDescription">
          <el-input v-model="addJobForm.trigger.triggerDescription"></el-input>
        </el-form-item>
        <el-form-item label="开始时间" label-width="110px" v-if="addJobForm.addTrigger" class="w90p" prop="trigger.startTime">
          <el-date-picker v-model="addJobForm.trigger.startTime" type="datetime" :default-value="addJobForm.trigger.startTime" value-format="timestamp" placeholder="选择日期时间" class="w100p">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" label-width="110px" v-if="addJobForm.addTrigger" class="w90p" prop="trigger.endTime">
          <el-date-picker v-model="addJobForm.trigger.endTime" type="datetime" :default-value="addJobForm.trigger.endTime" value-format="timestamp" placeholder="选择日期时间" class="w100p">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="重复次数" v-if="addJobForm.trigger.type === 'SIMPLE' && addJobForm.addTrigger" label-width="110px" class="w90p" prop="trigger.repeatCount">
          <el-input v-model="addJobForm.trigger.repeatCount" placeholder="0" type="number"></el-input>
        </el-form-item>
        <el-form-item label="重复间隔(ms)" v-if="addJobForm.trigger.type === 'SIMPLE' && addJobForm.addTrigger" label-width="110px" class="w90p" prop="trigger.repeatInterval">
          <el-input v-model="addJobForm.trigger.repeatInterval" placeholder="0" type="number"></el-input>
        </el-form-item>
        <el-form-item label="表达式" v-if="addJobForm.trigger.type === 'CRON' && addJobForm.addTrigger" label-width="110px" class="w90p" prop="trigger.cron">
          <el-input v-model="addJobForm.trigger.cron"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addJobDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addJob">确定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="添加触发器" :visible.sync="addTriggerDialogVisible" @close="$refs['addTriggerForm'].resetFields()" center>
      <el-form :model="addTriggerForm" ref="addTriggerForm">
        <el-form-item label="任务名称" label-width="110px" class="w90p">
          <el-input v-model="addTriggerForm.jobName" disabled></el-input>
        </el-form-item>
        <el-form-item label="任务分组" label-width="110px" class="w90p">
          <el-input v-model="addTriggerForm.jobGroup" disabled></el-input>
        </el-form-item>
        <el-form-item label="触发器类型" label-width="110px" class="w90p">
          <el-radio v-model="addTriggerForm.type" label="SIMPLE" border>SIMPLE</el-radio>
          <el-radio v-model="addTriggerForm.type" label="CRON" border>CRON</el-radio>
        </el-form-item>
        <el-form-item label="触发器名称" label-width="110px" class="w90p" prop="triggerName" required>
          <el-input v-model="addTriggerForm.triggerName"></el-input>
        </el-form-item>
        <el-form-item label="触发器分组" label-width="110px" class="w90p" prop="triggerGroup" required>
          <el-input v-model="addTriggerForm.triggerGroup"></el-input>
        </el-form-item>
        <el-form-item label="触发器描述" label-width="110px" class="w90p" prop="triggerDescription">
          <el-input v-model="addTriggerForm.triggerDescription"></el-input>
        </el-form-item>
        <el-form-item label="开始时间" label-width="110px" class="w90p" prop="startTime" required>
          <el-date-picker v-model="addTriggerForm.startTime" type="datetime" :default-value="addTriggerForm.startTime" value-format="timestamp" placeholder="选择日期时间" class="w100p">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" label-width="110px" class="w90p" prop="endTime" required>
          <el-date-picker v-model="addTriggerForm.endTime" type="datetime" :default-value="addTriggerForm.endTime" value-format="timestamp" placeholder="选择日期时间" class="w100p">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="重复次数" v-if="addTriggerForm.type === 'SIMPLE'" label-width="110px" class="w90p" prop="repeatCount">
          <el-input v-model="addTriggerForm.repeatCount" placeholder="0" type="number"></el-input>
        </el-form-item>
        <el-form-item label="重复间隔(ms)" v-if="addTriggerForm.type === 'SIMPLE'" label-width="110px" class="w90p" prop="repeatInterval">
          <el-input v-model="addTriggerForm.repeatInterval" placeholder="0" type="number"></el-input>
        </el-form-item>
        <el-form-item label="表达式" v-if="addTriggerForm.type === 'CRON'" label-width="110px" class="w90p" prop="cron">
          <el-input v-model="addTriggerForm.cron"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addTriggerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addTrigger">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="修改触发器" :visible.sync="updateTriggerDialogVisible" center>
      <el-form :model="updateTriggerForm" ref="updateTriggerForm">
        <el-form-item label="触发器类型" label-width="110px" class="w90p" prop="type">
          <el-radio v-model="updateTriggerForm.type" label="SIMPLE" border>SIMPLE</el-radio>
          <el-radio v-model="updateTriggerForm.type" label="CRON" border>CRON</el-radio>
        </el-form-item>
        <el-form-item label="触发器名称" label-width="110px" class="w90p" prop="triggerName">
          <el-input v-model="updateTriggerForm.triggerName" disabled></el-input>
        </el-form-item>
        <el-form-item label="触发器分组" label-width="110px" class="w90p" prop="triggerGroup">
          <el-input v-model="updateTriggerForm.triggerGroup" disabled></el-input>
        </el-form-item>
        <el-form-item label="触发器描述" label-width="110px" class="w90p" prop="triggerDescription">
          <el-input v-model="updateTriggerForm.triggerDescription"></el-input>
        </el-form-item>
        <el-form-item label="开始时间" label-width="110px" class="w90p" required prop="startTime">
          <el-date-picker v-model="updateTriggerForm.startTime" type="datetime" :default-value="updateTriggerForm.startTime" value-format="timestamp" placeholder="选择日期时间" class="w100p">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" label-width="110px" class="w90p" required prop="endTime">
          <el-date-picker v-model="updateTriggerForm.endTime" type="datetime" :default-value="updateTriggerForm.endTime" value-format="timestamp" placeholder="选择日期时间" class="w100p">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="重复次数" v-if="updateTriggerForm.type === 'SIMPLE'" label-width="110px" class="w90p" prop="repeatCount">
          <el-input v-model="updateTriggerForm.repeatCount" placeholder="0" type="number"></el-input>
        </el-form-item>
        <el-form-item label="重复间隔(ms)" v-if="updateTriggerForm.type === 'SIMPLE'" label-width="110px" class="w90p" prop="repeatInterval">
          <el-input v-model="updateTriggerForm.repeatInterval" placeholder="0" type="number"></el-input>
        </el-form-item>
        <el-form-item label="表达式" v-if="updateTriggerForm.type === 'CRON'" label-width="110px" class="w90p" prop="cron">
          <el-input v-model="updateTriggerForm.cron"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateTriggerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateTrigger">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="触发器" v-if="triggerDialogVisible" :visible.sync="triggerDialogVisible" fullscreen >
      <el-table :data="triggerList" class="w100p" border center>
        <el-table-column prop="triggerName" label="名称" align="center"></el-table-column>
        <el-table-column prop="triggerGroup" label="组" sortable align="center"></el-table-column>
        <el-table-column prop="triggerDescription" label="描述" align="center"></el-table-column>
        <el-table-column prop="type" label="类型" align="center" width="80px"></el-table-column>
        <el-table-column prop="triggerState" label="状态" align="center" width="80px">
           <template v-slot="scope">
            <span  v-if="scope.row.triggerState === 'NORMAL'" style="color:#409EFF;">运行中</span>
            <span  v-else-if="scope.row.triggerState === 'PAUSED'" style="color:#E6A23C;">暂停</span>
            <span  v-else-if="scope.row.triggerState === 'COMPLETE'" style="color:#67C23A;">完成</span>
            <span  v-else-if="scope.row.triggerState === 'ERROR'" style="color:#F56C6C;">错误</span>
            <span  v-else-if="scope.row.triggerState === 'BLOCKED'" style="color:#909399;">锁定</span>
            <span  v-else style="color:blue;">未知状态</span>
          </template>
        </el-table-column>
        <el-table-column prop="startTime" label="开始时间" align="center" width="110px">
           <template v-slot="scope">
            <div v-html="dateFormat('yyyy-MM-dd<br/>HH:mm:ss', scope.row.startTime)"></div>
          </template>
        </el-table-column>
        <el-table-column prop="endTime" label="结束时间" align="center" width="110px">
           <template v-slot="scope">
            <div v-html="dateFormat('yyyy-MM-dd<br/>HH:mm:ss', scope.row.endTime)"></div>
          </template>
        </el-table-column>
        <el-table-column prop="previousFireTime" label="上次执行时间" align="center" width="110px">
           <template v-slot="scope">
            <div v-html="dateFormat('yyyy-MM-dd<br/>HH:mm:ss', scope.row.previousFireTime)"></div>
          </template>
        </el-table-column>
        <el-table-column prop="nextFireTime" label="下次执行时间" align="center" width="110px">
           <template v-slot="scope">
            <div v-html="dateFormat('yyyy-MM-dd<br/>HH:mm:ss', scope.row.nextFireTime)"></div>
          </template>
        </el-table-column>
        <el-table-column prop="repeatCount" label="重复次数" align="center" width="80px">
           <template v-slot="scope">
            {{ scope.row.type === 'SIMPLE' ? scope.row.repeatCount : '/' }}
          </template>
        </el-table-column>
        <el-table-column prop="repeatInterval" label="重复间隔" align="center" width="80px">
           <template v-slot="scope">
            {{ scope.row.type === 'SIMPLE' ? scope.row.repeatInterval : '/' }}
          </template>
        </el-table-column>
        <el-table-column prop="timesTriggered" label="已触发次数" align="center" width="95px">
           <template v-slot="scope">
            {{ scope.row.type === 'SIMPLE' ? scope.row.timesTriggered : '/' }}
          </template>
        </el-table-column>
        <el-table-column prop="cron" label="表达式" align="center" width="100px">
           <template v-slot="scope">
            {{ scope.row.type === 'SIMPLE' ? '/' : scope.row.cron }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="150px">
           <template v-slot="scope">
            <el-tooltip effect="dark" content="暂停" placement="top" v-if="scope.row.triggerState === 'NORMAL'" class="ml10">
              <el-link icon="el-icon-video-pause" @click="onUpdateTriggerStatusClicked(scope.row)"></el-link>
            </el-tooltip>
            <el-tooltip effect="dark" content="恢复" placement="top" v-else-if="scope.row.triggerState === 'PAUSED'" class="ml10">
              <el-link icon="el-icon-video-play" @click="onUpdateTriggerStatusClicked(scope.row)"></el-link>
            </el-tooltip>
            <el-tooltip effect="dark" content="删除" placement="top" class="ml10">
              <el-link icon="el-icon-delete" @click="onDeleteTriggerClicked(scope.row)">
              </el-link>
            </el-tooltip>
            <el-tooltip effect="dark" content="修改" placement="top" class="ml10">
              <el-link icon="el-icon-edit-outline" @click="onUpdateTriggerClicked(scope.row)"></el-link>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog title="修改任务" :visible.sync="updateJobDialogVisible" center>
      <el-form :model="updateJobForm" ref="updateJobForm">
        <el-form-item label="任务类名" label-width="110px" class="w90p" required prop="jobClass">
          <el-select v-model="updateJobForm.jobClass" placeholder="请选择" class="w100p">
            <el-option v-for="item in jobClassList" :key="item" :label="item.slice(item.lastIndexOf('.')+1)" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="任务描述" label-width="110px" class="w90p" prop="jobDescription">
          <el-input v-model="updateJobForm.jobDescription"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateJobDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateJob">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {dateFormat} from "@/utils/dateUtil";

export default {
  name: "SystemJob",
  data() {
    return {
      // 任务列表
      jobList: [],
      // 触发器列表
      triggerList: [],
      // 任务类名
      jobClassList: [],
      //调度器是否待机
      isStandby: false,
      //添加任务对话框默认可见性
      addJobDialogVisible: false,
      //添加触发器框默认可见性
      addTriggerDialogVisible: false,
      // 修改对话框默认可见性
      updateJobDialogVisible: false,
      // 触发器对话框可见性
      triggerDialogVisible: false,
      // 修改触发器对话框可见性
      updateTriggerDialogVisible: false,
      // 查看任务
      job: {},
      // 添加任务表单
      addJobForm: {
        jobClass: '',
        jobName: '',
        jobGroup: '',
        jobDescription: '',
        addTrigger: false,
        trigger: {
          jobName: '',
          jobGroup: '',
          type: 'SIMPLE',
          triggerName: '',
          triggerGroup: '',
          triggerDescription: '',
          startTime: undefined,
          endTime: undefined,
          repeatCount: -1,
          repeatInterval: 0,
          cron: ''
        }
      },
      // 添加触发器表单
      addTriggerForm: {
        jobName: '',
        jobGroup: '',
        type: 'SIMPLE',
        triggerName: '',
        triggerGroup: '',
        triggerDescription: '',
        startTime: undefined,
        endTime: undefined,
        repeatCount: -1,
        repeatInterval: 0,
        cron: ''
      },
      // 修改触发器表单
      updateTriggerForm: {
        type: 'SIMPLE',
        triggerName: '',
        triggerGroup: '',
        triggerDescription: '',
        startTime: undefined,
        endTime: undefined,
        repeatCount: 0,
        repeatInterval: 0,
        cron: ''
      },
      updateJobForm: {
        jobClass: '',
        jobName: '',
        jobGroup: '',
        jobDescription: ''
      },
      loading: false
    };
  },

  filters: {
  },

  mounted() {
    //载入数据
    this.loadSchedulerStatus();
    this.loadJobData();
  },

  methods: {
    dateFormat: dateFormat,
    // 加载调度器状态
    loadSchedulerStatus() {
      this.$axios.get('v1/job/status').then(data => {
        this.isStandby = data;
        this.loadJobData()
      });
    },

    // 修改调度器状态
    onUpdateStatusClicked() {
      this.$axios.post('v1/job/status').then(data => {
        this.isStandby = data;
        this.loadJobData()
      });
    },

    // 加载任务数据
    loadJobData() {
      this.loading = true;
      this.$axios.get('v1/job/list').then(data => {
        this.jobList = data;
        this.loading = false;
      });
    },

    // 加载触发器数据
    loadTriggerData() {
      this.$axios.get('v1/job/trigger/list', {
        params: {
          jobName: this.job.jobName,
          jobGroup: this.job.jobGroup
        }
      }).then(data => {
        this.triggerList = data;
      });
    },

    // 触发器
    onTriggerClicked(row, column) {
      if (column.label !== '操作') {
        this.job = row;
        this.loadTriggerData();
        this.triggerDialogVisible = true;
      }
    },

    // 弹出添加触发器对话框
    onAddTriggerClicked(row) {
      this.addTriggerForm.jobName = row.jobName;
      this.addTriggerForm.jobGroup = row.jobGroup;
      this.addTriggerForm.startTime = Date.now();
      this.addTriggerForm.endTime = Date.now() + 24 * 60 * 60 * 1000;
      this.addTriggerDialogVisible = true;
    },

    // 添加触发器
    addTrigger() {
      this.$refs["addTriggerForm"].validate((valid) => {
        if (valid) {
          this.$axios.post('v1/job/trigger/add', this.addTriggerForm).then(() => {
            this.loadJobData();
            this.addTriggerDialogVisible = false;
          });
        }
      })
    },

    // 弹出添加任务对话框
    onAddJobClicked() {
      //加载任务类别
      this.$axios.get('v1/job/class').then(data => {
        this.jobClassList = data;
        this.addJobForm.trigger.startTime = Date.now();
        this.addJobForm.trigger.endTime = Date.now() + 24 * 60 * 60 * 1000;
        this.addJobDialogVisible = true;
      });
    },

    // 添加任务
    addJob() {
      let from = JSON.parse(JSON.stringify(this.addJobForm));
      if (!from.addTrigger) {
        delete from.trigger;
      } else {
        from.trigger.jobName = from.jobName;
        from.trigger.jobGroup = from.jobGroup;
      }
      this.$refs['addJobForm'].validate((valid) => {
        if (valid) {
          this.$axios.post('v1/job/add', from).then(() => {
            this.loadJobData();
            this.addJobDialogVisible = false;
          });
        }
      })
    },

    // 删除任务
    onDeleteJobClicked(row) {
      this.$axios.delete('v1/job/delete', {
        params: {
          jobName: row.jobName,
          jobGroup: row.jobGroup
        }
      }).then(() => {
        this.loadJobData();
      });
    },

    // 弹出更新任务对话框
    onUpdateJobClicked(row) {
      //加载任务类别
      this.$axios.get('v1/job/class').then(data => {
        this.jobClassList = data
      });
      this.updateJobForm.jobClass = row.jobClass;
      this.updateJobForm.jobName = row.jobName;
      this.updateJobForm.jobGroup = row.jobGroup;
      this.updateJobForm.jobDescription = row.jobDescription;
      this.updateJobDialogVisible = true;
    },

    // 更新任务
    updateJob() {
      this.$refs['updateJobForm'].validate((valid) => {
        if (valid) {
          this.$axios.put('v1/job/update', this.updateJobForm).then(() => {
            this.loadJobData();
            this.updateJobDialogVisible = false;
          });
        }
      })
    },

    // 更新任务运行状态
    onUpdateJobStatusClicked(row, running) {
      this.$axios.put('v1/job/update/status', {
        jobName: row.jobName,
        jobGroup: row.jobGroup,
        running
      }).then(() => {
        this.loadJobData();
      });
    },

    // 更新触发器运行状态
    onUpdateTriggerStatusClicked(row) {
      this.$axios.put('v1/job/trigger/update/status', {
        triggerName: row.triggerName,
        triggerGroup: row.triggerGroup,
        running: row.triggerState === 'PAUSED'
      }).then(() => {
        this.loadJobData();
        this.loadTriggerData();
      });
    },

    // 删除触发器
    onDeleteTriggerClicked(row) {
      this.$axios.delete('v1/job/trigger/delete', {
        params: {
          triggerName: row.triggerName,
          triggerGroup: row.triggerGroup,
        }
      }).then(() => {
        this.loadJobData();
        this.loadTriggerData();
      });
    },

    // 弹出更修改触发器对话框
    onUpdateTriggerClicked(row) {
      this.updateTriggerForm.type = row.type;
      this.updateTriggerForm.triggerName = row.triggerName;
      this.updateTriggerForm.triggerGroup = row.triggerGroup;
      this.updateTriggerForm.triggerDescription = row.triggerDescription;
      this.updateTriggerForm.startTime = row.startTime;
      this.updateTriggerForm.endTime = row.endTime;
      this.updateTriggerForm.repeatCount = row.repeatCount;
      this.updateTriggerForm.repeatInterval = row.repeatInterval;
      this.updateTriggerForm.cron = row.cron;
      this.updateTriggerDialogVisible = true;
    },

    // 修改触发器
    updateTrigger() {
      this.$refs['updateTriggerForm'].validate((valid) => {
        if (valid) {
          this.$axios.put('v1/job/trigger/update', this.updateTriggerForm).then(() => {
            this.updateTriggerDialogVisible = false;
            this.loadJobData();
            this.loadTriggerData();
          })
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.title {
  background: #badff9aa;
  padding: 10px 15px;
  overflow: hidden
}
</style>