<template>
    <!-- 新增定时任务 -->
    <el-dialog v-dialogDrag :title="title" :visible.sync="visible" :close-on-click-modal="false" :before-close="cancel"
        class="dialogClass" width="45%">
        <div class="addDia">
            <el-form :model="form" ref="diaform" :rules="rules" class="diaform" label-width="120px">
                <el-form-item label="任务名称" prop="jobName">
                    <el-input size="small" v-model.trim="form.jobName" placeholder="请输入任务名称"></el-input>
                </el-form-item>
                <el-form-item label="任务组名" prop="jobGroup">
                    <el-select v-model="form.jobGroup" placeholder="请选择任务组名" style="width:100%;">
                        <el-option
                            v-for="item in jobGroupOption"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="invokeTarget">
                    <span slot="label">
                        调用方法
                        <el-tooltip placement="top">
                        <div slot="content">
                            Bean调用示例：ryTask.ryParams('ry')
                            <br />Class类调用示例：com.ruoyi.quartz.task.RyTask.ryParams('ry')
                            <br />参数说明：支持字符串，布尔类型，长整型，浮点型，整型
                        </div>
                        <i class="el-icon-question"></i>
                        </el-tooltip>
                    </span>
                    <el-input size="small" v-model.trim="form.invokeTarget" placeholder="请输入调用目标字符串"></el-input>
                </el-form-item>
                <el-form-item label="cron表达式" prop="cronExpression">
                    <el-popover v-model="cronPopover">
                        <cron @change="changeCron" @close="cronPopover=false" i18n="cn"></cron>
                        <el-input slot="reference" @click="cronPopover=true" v-model="form.cronExpression" placeholder="请输入定时策略"></el-input>
                    </el-popover>     
                </el-form-item>
                <el-form-item label="状态">
                    <el-radio-group v-model="form.status">
                        <el-radio label="0">启动</el-radio>
                        <el-radio label="1">暂停</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="执行策略" prop="misfirePolicy">
                    <el-radio-group v-model="form.misfirePolicy" size="small">
                        <el-radio-button label="1">立即执行</el-radio-button>
                        <el-radio-button label="2">执行一次</el-radio-button>
                        <el-radio-button label="3">放弃执行</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="是否并发" prop="concurrent">
                    <el-radio-group v-model="form.concurrent" size="small">
                        <el-radio-button label="0">允许</el-radio-button>
                        <el-radio-button label="1">禁止</el-radio-button>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-button icon="el-icon-circle-check" size="mini" @click="sumbit('diaform')" type="primary">保存</el-button>
                    <el-button icon="el-icon-circle-close" size="mini" @click="cancel" type="info">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </el-dialog>    
  </template>
  <script>
import {cron} from 'vue-cron';
export default {
    props: {
        visible: {
        type: Boolean,
        default: () => false,
        },
        title: {
        type: String,
        default: () => "新增任务",
        },
        form: {
        type: Object,
        default: () => {},
        },
    },
    components:{
        cron
    },
    data(){
        return {
            cronPopover:false,
            jobGroupOption:[
                {label:'默认',value:'DEFAULT'},
                {label:'系统',value:'SYSTEM'},
            ],
            expression:'',
            loading:false,
            btnloading: false,
            rules: {
                    jobName: [
                    { required: true, message: "任务名称不能为空", trigger: "blur" }
                    ],
                    jobGroup: [
                    { required: true, message: "任务组名不能为空", trigger: "change" }
                    ],
                    invokeTarget: [
                    { required: true, message: "调用目标字符串不能为空", trigger: "blur" }
                    ],
                    cronExpression: [
                    { required: true, message: "cron执行表达式不能为空", trigger: "blur" }
                    ]
                }
            }
    },
    methods: {
        changeCron(val){
            this.form.cronExpression=val;
        },
        sumbit(formName) {
        this.$refs[formName].validate((valid) => {
            if (valid) {
                if (this.title === "新增任务") {
                    this.$emit('clickAdd',this.form)
                }else{
                    this.$emit('clickEdit',this.form)
                }
            }
        });
        },
        cancel() {
            this.$refs.diaform.resetFields();
            this.$emit("cancel");
        },
    },
};
  
  </script>
  <style lang="scss" scoped>
    .addDia {
      padding: 0 5%;
      .diaform {
  
        ::v-deep .el-form-item__label {
          font-weight: 500;
        }
      }
  
      ::v-deep.el-scrollbar__wrap {
        overflow-x: hidden;
      }
    }
  
  </style>
  