<!--
 * @Author: 仲春阳
 * @Date: 2023/09/06 09:15:44
 * @LastEditors: 仲春阳
 * @Description: 定时任务配置
 -->
<template>
    <Page :loading="false">
        <div class="timer">
            <div id="select-form">
                <el-form :inline="true">
                    <el-form-item label="任务名称:">
                        <el-input v-model="store.params.searchValue" placeholder="请输入"></el-input>
                    </el-form-item>
                    <el-form-item label="任务状态:">
                        <el-select v-model="store.params.searchState" placeholder="请选择" clearable>
                            <el-option label="运行" :value="1"></el-option>
                            <el-option label="停止" :value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item class="box1">
                        <el-button type="primary" icon="el-icon-search" @click="store.reload">查询</el-button>
                        <el-button type="primary" icon="el-icon-search" @click="add">新增定时任务</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-table
                stripe
                v-if="tableHeight"
                :height="tableHeight"
                :data="store.data"
                highlight-current-row
                header-cell-class-name="table_header"
                v-loading="store.loading"
                style="width: 100%"
                border
            >

                <el-table-column prop="timerName" label="任务名称" width="270"></el-table-column>
                <el-table-column prop="actionClass" label="任务执行器" width="480"></el-table-column>
                <el-table-column prop="cron" label="定时任务表达式" width="150"></el-table-column>
                <el-table-column prop="remark" width="320" label="备注"></el-table-column>
                <el-table-column prop="jobStatus" label="状态" width="110">
                    <template slot-scope="scope">
                        <div :class="scope.row.jobStatus === 1 ? 'start' : 'stop'" @click="auditTimerStatus(scope.row)">
                            <i class="el-icon-video-play" v-if="scope.row.jobStatus === 1"></i>
                            <i class="el-icon-video-pause" v-else></i>
                            {{ scope.row.jobStatus === 1 ? '运行中' : '未启动' }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="sort" label="排序" width="90"></el-table-column>
                <el-table-column label="操作"   min-width="380"  fixed="right">
                    <template slot-scope="scope">
                        <el-button type="primary" size="small" icon="el-icon-check" @click="runOnce(scope.row)">执行</el-button>
                        <el-button type="primary" size="small" icon="el-icon-edit" @click="auditTimer(scope.row)">编辑</el-button>
                        <el-button type="danger" size="small" icon="el-icon-delete" @click="deleteTimer(scope.row)">删除</el-button>
                        <el-button type="primary" size="small" icon="el-icon-check" @click="dialogRe(scope.row)">补招</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                background
                align="right"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="store.params.pageNum"
                :page-sizes="[20, 30, 40, 50, 100]"
                :page-size="store.params.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="store.total"
                class="mt10"
            ></el-pagination>
            <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="30%">
                <el-form
                    ref="form"
                    class="forms"
                    :model="form"
                    label-width="120px"
                    :rules="rules"
                    style="padding: 10px 0 20px 0"
                >
                    <el-form-item label="任务名称：" prop="timerName">
                        <el-input v-model="form.timerName"></el-input>
                    </el-form-item>
                    <el-form-item label="任务执行器：" prop="actionClass" style="margin-top: 10px">
                        <el-select v-model="form.actionClass" placeholder="请选择">
                            <el-option
                                v-for="item in actionClassesOptions"
                                :key="item"
                                :label="item"
                                :value="item"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="任务表达式：" prop="cron" style="margin-top: 10px">
                        <el-input v-model="form.cron"></el-input>
                    </el-form-item>
                  <el-form-item label="排序：" prop="sort" style="margin-top: 10px">
                    <el-input v-model="form.sort"></el-input>
                  </el-form-item>
                    <el-form-item label="备注：" style="margin-top: 10px">
                        <el-input type="textarea" v-model="form.remark"></el-input>
                    </el-form-item>

                    <el-form-item></el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addTimer">确 定</el-button>
                </span>
            </el-dialog>



            <el-dialog title="选择日期" :visible.sync="dateVisible" width="20%" :before-close="handleClose">
            <el-form
                ref="formDate"
                class="forms"
                :model="formDate"
                label-width="120px"
                style="padding: 10px 0 20px 0"
            >
              <el-form-item label="执行日期：" prop="date">

                  <el-date-picker
                      v-model="formDate.date"
                      type="date"
                      value-format = 'yyyy-MM-dd'
                      placeholder="选择日期">
                  </el-date-picker>

              </el-form-item>





            </el-form>
            <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="okRun">确 定</el-button>
                </span>
          </el-dialog>
        </div>
    </Page>
</template>
<script>
import list from '@/mixins/list'
import request from '@/utils/request'

export default {
    mixins: [list],
    data() {
        return {
            form: {
                cron: '',
                actionClass: '',
                timerName: '',
                remark: '',
                jobStatus: 1,
                sort:100,
            },
          formDate:{
              date:''
          },
            dialogTitle: '新增定时任务',
            dialogVisible: false,

            actionClassesOptions: [],


            dateVisible:false,
            rowId:'',

            rules: {
                actionClass: [{ required: true, message: '请选择任务执行器', trigger: 'change' }],
                timerName: [{ required: true, message: '请输入任务名称', trigger: 'blur' }],
                cron: [{ required: true, message: '任务表达式', trigger: 'blur' }],
                sort: [{ required: true, message: '排序号', trigger: 'blur' }],
                date: [{ required: true, message: '日期不可为空', trigger: 'blur' }],

            }
        }
    },
    created() {
        this.store = this.dataSource('/system-boot/timer/list')
        this.store.reload()
        this.getActionClasses()

      let day = new Date()
      day.setDate(day.getDate() - 1)
      this.formDate.date = this.$tools.formatDate(day, 'yyyy-MM-dd')
    },
    methods: {


        // 获取所有的action
        getActionClasses() {
            request({
                url: '/system-boot/timer/getActionClasses',
                method: 'get'
            }).then(res => {
                if (res.code === 'A0000') {
                    this.actionClassesOptions = res.data
                }
            })
        },

      dialogRe(row){
          this.dateVisible = true
          this.rowId = row.id;
      },

      okRun(){


          if(!this.formDate.date || this.formDate.date === ''){
            this.$message({
              message: '时间不可为空',
              type: 'warning'
            })
            return false;
          }





        this.$confirm('是否确认执行该定时任务?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          request({
            url: '/system-boot/timer/run',
            method: 'get',
            params: {
              id: this.rowId,
              date:this.formDate.date
            }
          }).then(res => {
            if (res.code === 'A0000') {
              this.$message({
                message: '操作成功',
                type: 'success'
              })
            }
          })
        })

      },
        // 执行一次
        runOnce(row) {

            this.$confirm('是否确认执行该定时任务?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              request({
                url: '/system-boot/timer/run',
                method: 'get',
                params: {
                  id: row.id
                }
              }).then(res => {
                if (res.code === 'A0000') {
                  this.$message({
                    message: '操作成功',
                    type: 'success'
                  })
                }
              })
            })

        },
        add() {
            this.dialogTitle = '新增定时任务'
            ;(this.form = {
                cron: '',
                actionClass: '',
                timerName: '',
                remark: '',
                jobStatus: 1,
                sort:100,
            }),
                (this.dialogVisible = true)
        },
        // 修改定时任务状态
        auditTimerStatus(row) {
            let url = '/system-boot/timer/start'
            if (row.jobStatus === 1) {
                url = '/system-boot/timer/stop'
            }
            request({
                url,
                method: 'get',
                params: {
                    id: row.id
                }
            }).then(res => {
                if (res.code === 'A0000') {
                    this.$message({
                        message: res.message,
                        type: 'success'
                    })
                    this.store.search()
                }
            })
        },
        // 删除
        deleteTimer(row) {
            this.$confirm('此操作将永久删除该定时任务, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                request({
                    url: '/system-boot/timer/delete',
                    method: 'post',
                    data: [row.id]
                }).then(res => {
                    if (res.code === 'A0000') {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                        this.store.search()
                    }
                })
            })
        },
        // 编辑定时器
        auditTimer(row) {
            this.dialogTitle = '编辑定时任务'
            for (const key in this.form) {
                this.form[key] = row[key]
            }
            this.form.id = row.id
            this.dialogVisible = true
        },
        // 新增以及编辑
        addTimer() {
            this.$refs['form'].validate(valid => {
                if (valid) {
                    let url = '/system-boot/timer/add'
                    if (this.dialogTitle === '新增定时任务') {
                        this.form.jobStatus = 1
                        delete this.form.id
                    } else {
                        url = '/system-boot/timer/update'
                    }
                    // for (const key in this.form) {
                    //     if (!this.form[key]) {
                    //         this.$message({
                    //             message: '请填写完整',
                    //             type: 'warning'
                    //         })
                    //         flag = false
                    //     }
                    // }
                    request({
                        url,
                        method: 'post',
                        data: this.form
                    }).then(res => {
                        if (res.code === 'A0000') {
                            let message = this.dialogTitle === '新增定时任务' ? '新增成功' : '修改成功'
                            this.$message({
                                message,
                                type: 'success'
                            })

                            for (const key in this.form) {
                                this.form[key] = ''
                            }
                            this.store.search()
                            this.dialogVisible = false
                        }
                    })
                }
            })
        },

      handleClose() {
        this.dateVisible = false
        let day = new Date()
        day.setDate(day.getDate() - 1)
        this.formDate.date = this.$tools.formatDate(day, 'yyyy-MM-dd')
      },
    }
}
</script>
<style lang="scss">
.timer {
    .start {
        color: #3ca541;
        cursor: pointer;
    }

    .stop {
        color: #ee6d6f;
        cursor: pointer;
    }
}
::v-deep.forms {
    .el-form-item {
        margin-bottom: 15px !important;
    }
}
</style>
