<template>

  <a-form-model
    ref="ruleForm"
    :model="taskForm"
    :label-col="labelCol"
    :wrapper-col="wrapperCol"
  >
    <a-form-model-item ref="taskType" label="启用任务设置:" prop="taskType">
      <a-switch v-model="taskForm.taskTypeBool" @change="onChange" />
    </a-form-model-item>

    <a-form-model-item ref="taskCycle" label="执行周期:" prop="taskCycle">
      <a-select
        v-model="taskForm.taskCycle"
        placeholder="请选择执行周期"
        @change="taskCycleChange">
        <a-select-option
          v-for="(item, index) in taskCycleArr"
          :key="index"
          :value="item.value">
          {{ item.title }}
        </a-select-option>

      </a-select>
    </a-form-model-item>

    <template v-if="taskForm.taskCycle==='3'">
      <a-form-model-item ref="taskCron" label="选择执行时间:" prop="taskCron">
        <a-select
          v-model="taskForm.taskCron"
          placeholder="请选择执行时间"
          @change="selectChange">

          <a-select-option
            v-for="(item, index) in taskCronTime"
            :key="index"
            :value="item.time">
            {{ item.title }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
    </template>

    <template v-if="taskForm.taskCycle==='4'">
      <a-form-model-item ref="taskCron" label="cron表达式 :" prop="taskCron">
        <a-input v-model="taskForm.taskCron" @blur="taskCronVerify(taskForm.taskCron)"/>
        <div class="tips" v-if="isValidCronBool">cron表达式格式错误</div>
      </a-form-model-item>
    </template>

  </a-form-model>
</template>

<script type="text/ecmascript-6">
import { isValidCron } from 'cron-validator'
export default {
  data() {
    return {
      labelCol: { span: 8 },
      wrapperCol: { span: 12 },
      taskForm: {
        taskType: '',
        taskCycle: '',
        taskCron: '',
        taskTypeBool: false
      },

      isValidCronBool: false,
      taskCycleArr: [
        { title: '实时', value: '1', time: '0 * * * * ?' },
        { title: '每时', value: '2', time: '0 0 * * * ?' },
        { title: '每天', value: '3', time: '' },
        { title: '自定义', value: '4', time: '' }
      ],
      taskCronTime: []

    }
  },
  mounted() {
    this.getCronDate()
  },
  methods: {

    onChange(checked) {
      switch (checked) {
        case true:
          this.taskForm.taskType = '0'
          break
        case false:
          this.taskForm.taskType = '1'
          break
        }
      // console.log(`a-switch to ${this.taskForm.taskType}`)
    },
    taskCycleChange(e) {
      if (e === '1') {
        this.taskForm.taskCron = '0 * * * * ?'
      } else if (e === '2') {
        this.taskForm.taskCron = '0 0 * * * ?'
      }
    },
    getCronDate() {
      const taskCronTimeArr = ['6:30', '7:00', '7:30', '8:00', '8:30', '9:00', '9:30', '10:00', '10:30', '11:00', '11:30']
      var halfHour = [0, 30, 6, '*', '*', '?']
      var fullHour = [0, 0, 7, '*', '*', '?']
      var hourList = []
      for (var i = 6; i < 12; i++) {
        if (i > 6) {
          fullHour[2] = i
          var b = fullHour.join(' ')
          hourList.push(b)
        }
        halfHour[2] = i
        var a = halfHour.join(' ')
        hourList.push(a)
      }
      hourList = Array.from(new Set(hourList))
      taskCronTimeArr.forEach((item, index) => {
        var timeList = {}
        timeList.title = item
        timeList.time = hourList[index]
        this.taskCronTime.push(timeList)
      })
    },
    selectChange(e) {
      // console.log('hhhhhhhhhhhhhh: ', e)
    },
    taskCronVerify(e) {
      if (isValidCron(e)) {
        // Do something
        this.isValidCronBool = false
        // console.log('校验成功')
      } else {
        this.isValidCronBool = true
        // console.log('校验失败')
      }
    }

  }
}
</script>

<style scoped>
.tips{
  color: #f5222d;
  line-height: 22px;
}
</style>
