<template>
  <ele-modal
    :visible.sync="visible"
    :title="title"
    width="600px"
    append-to-body
    @close="cancel"
    :maxable="true"
  >
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      label-width="120px"
      class="create-form"
    >
      <el-row :gutter="15">
        <el-col v-bind="styleResponsive ? { lg: 24, md: 24 } : { span: 24 }">
          <el-form-item label="任务名称:" prop="name">
            <el-input
              v-model="form.name"
              maxlength="50"
              placeholder="请输入"
              :disabled="type == 'detail'"
            />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 24, md: 24 } : { span: 24 }">
          <el-form-item label="任务类名:" prop="handlerName">
            <el-input
              v-model="form.handlerName"
              maxlength="50"
              placeholder="请输入"
              :readonly="type == 'update'"
              :disabled="type == 'detail'"
            />
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 24, md: 24 } : { span: 24 }">
          <el-form-item label="CRON表达式:" prop="cronExpression">
            <el-input v-model="form.cronExpression" placeholder="请输入" :disabled="type == 'detail'">
              <template #append>
                <el-button @click="handleShowCron" :disabled="type == 'detail'">设置</el-button>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 24, md: 24 } : { span: 24 }">
          <el-form-item label="重试次数:" prop="retryCount">
            <el-input
              v-model="form.retryCount"
              type="number"
              placeholder="请输入"
              :disabled="type == 'detail'"
            >
              <template #append>
                <span>次</span>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 24, md: 24 } : { span: 24 }">
          <el-form-item label="重试间隔:" prop="retryInterval">
            <el-input
              v-model="form.retryInterval"
              type="number"
              placeholder="请输入"
              :disabled="type == 'detail'"
            >
              <template #append>
                <span>毫秒</span>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col v-bind="styleResponsive ? { lg: 24, md: 24 } : { span: 24 }">
          <el-form-item label="监控超时时间:" prop="monitorTimeout">
            <el-input
              v-model="form.monitorTimeout"
              type="number"
              placeholder="请输入"
              :disabled="type == 'detail'"
            >
              <template #append>
                <span>毫秒</span>
              </template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <el-button @click="cancel">取消</el-button>
      <el-button
        type="primary"
        @click="save"
        :loading="loading"
        v-if="type != 'detail'"
      >
        保存
      </el-button>
    </template>

    <!-- Cron表达式生成器 -->
    <ele-modal
      :visible.sync="openCron"
      title="Cron表达式生成器"
      width="50vw"
      append-to-body
      :maxable="true"
    >
      <crontab2 @hide="openCron = false" @fill="crontabFill" :expression="expression"></crontab2>
    </ele-modal>
  </ele-modal>
</template>

<script>
import * as JobApi from '@/api/config/scheduledTasks'
import Crontab2 from '@/components/Crontab2/index.vue'

const defForm = {
  id: undefined,
  name: '',
  handlerName: '',
  handlerParam: '',
  cronExpression: '',
  retryCount: '',
  retryInterval: '',
  monitorTimeout: ''
}

export default {
  components: {
    Crontab2
  },
  name: 'JobForm',
  data() {
    return {
      visible: false,
      title: '',
      type: '',
      loading: false,
      openCron: false,
      expression: '',
      form: { ...defForm },
      rules: {
        name: [{ required: true, message: '任务名称不能为空', trigger: 'blur' }],
        handlerName: [{ required: true, message: '任务类名不能为空', trigger: 'blur' }],
        cronExpression: [{ required: true, message: 'CRON 表达式不能为空', trigger: 'blur' }],
        retryCount: [{ required: true, message: '重试次数不能为空', trigger: 'blur' }],
        retryInterval: [{ required: true, message: '重试间隔不能为空', trigger: 'blur' }]
      }
    }
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive() {
      return this.$store.state.theme.styleResponsive
    }
  },
  methods: {
    /** 打开弹窗 */
    open(type, id) {
      this.type = type
      this.title = type === 'create' ? '新增定时任务' : '编辑定时任务'

      // 重置表单
      this.form = { ...defForm }

      // 修改时，加载数据
      if (id) {
        this.loading = true
        JobApi.getJob(id)
          .then((res) => {
            this.form = res
          })
          .finally(() => {
            this.loading = false
          })
      }

      this.visible = true
    },

    /** 取消 */
    cancel() {
      this.form = { ...defForm }
      this.visible = false
    },

    /** 保存 */
    save() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.loading = true
          const data = { ...this.form }

          const action = this.type === 'create' ? JobApi.createJob(data) : JobApi.updateJob(data)

          action
            .then(() => {
              this.$message.success('操作成功')
              this.cancel()
              this.$emit('success')
            })
            .catch((e) => {
              console.error(e)
            })
            .finally(() => {
              this.loading = false
            })
        }
      })
    },

    /** 填充CRON表达式 */
    crontabFill(value) {
      this.form.cronExpression = value
    },

    /** 显示CRON生成器 */
    handleShowCron() {
      this.expression = this.form.cronExpression
      this.openCron = true
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  font-size: 16px;
  line-height: 45px;
}
</style>
