<template>
  <!-- 执行配置 -->
  <a-form-model ref="ruleExecuteForm" :model="executeForm" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
    <a-form-model-item ref="executionMode" label="执行模式:" prop="executionMode">
      <a-radio-group v-model="executeForm.executionMode" @change="selectType">
        <a-radio value="0">
          单次执行
        </a-radio>
        <a-radio value="1">
          周期执行
        </a-radio>
      </a-radio-group>
    </a-form-model-item>

    <a-form-model-item v-if="this.typeState === '1'" ref="cycle" label="执行周期:" prop="cycle">
      <a-select mode="cycle" v-model="executeForm.cycle" style="width: 100%" placeholder="请选择执行周期" @change="handleChange">
        <a-select-option v-for="(v,i) in cycleArr" :key="i">
          {{ v }}
        </a-select-option>
      </a-select>
    </a-form-model-item>

    <!-- 周 -->
    <a-form-model-item v-if="this.typeState === '1' && this.dataState === 1" ref="weekData" label="执行星期:" prop="weekData">
      <a-select mode="weekData" v-model="executeForm.weekData" style="width: 100%" placeholder="请选择执行星期" @change="getWeek">
        <a-select-option v-for="(v,i) in weekDataArr" :key="i">
          {{ v.name }}
        </a-select-option>
      </a-select>
    </a-form-model-item>
    <!-- 月 -->
    <a-form-model-item v-if="this.typeState === '1' && this.dataState === 2" ref="executedate" label="执行日期:" prop="executedate">
      每月
      <a-input-number v-model="executeForm.executedate" :max="31" :min="1" @change="getMonth"/>
      号
    </a-form-model-item>

    <a-form-model-item v-if="this.typeState === '1'" ref="cycleTime" label="执行时间:" prop="cycleTime">
      <a-select mode="cycleTime" v-model="executeForm.cycleTime" style="width: 100%" placeholder="请选择执行时间" @change="getCycleTime">
        <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>

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

<script type="text/ecmascript-6">

export default {
  props: {},
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },

      executeForm: {
        executionMode: '0',
        cycle: '', // 周期
        cycleTime: '', // 执行时间
        cycleTimeName: '',
        weekData: '',
        executedate: ''
      },
      cycleArr: ['天', '周', '月'],
      taskCronTime: [],
      weekDataArr: [
        { name: '周一', notes: 'MON' },
        { name: '周二', notes: 'TUE' },
        { name: '周三', notes: 'WED' },
        { name: '周四', notes: 'THU' },
        { name: '周五', notes: 'FRI' },
        { name: '周六', notes: 'SAT' },
        { name: '周日', notes: 'SUN' }
      ],

      typeState: '0',
      dataState: '',

      rules: {
        cycle: [{ required: true, message: '请输入执行周期', trigger: 'blur' }],
        cycleTime: [{ required: true, message: '请选择执行时间', trigger: 'blur' }],
        weekData: [{ required: true, message: '请输入执行星期', trigger: 'blur' }],
        executedate: [{ required: true, message: '请选择执行日期', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.getCronDate()
  },
  methods: {
    getCycleTime(v) {
      this.executeForm.cycleTime = v
    },
    handleChange(value) {
      this.dataState = value
      this.executeForm.cycle = value
      this.fun(value)
      console.log(`selected`, value)
    },
    selectType(v) {
      // console.log('hhh', v.target)
      this.typeState = v.target.value
      this.executeForm.executionMode = v.target.value
    },
    // 0 30 12 ? * MON 每周一12:30
    fun(value) {
      const cycleState = value
      if (cycleState === 0) { // 每天
        this.getCronDate()
      } else if (cycleState === 1) { // 每周
        this.getCronWeek('MON')
      } else if (cycleState === 2) { // 每月
        this.getCronMonth(1)
      }
    },
    getWeek(index, info) {
      const week = this.weekDataArr[index].notes
      this.getCronWeek(week)
    },
    getMonth(index, info) {
      this.getCronMonth(index)
    },
    // 每月
    // 0 30 10 1 * ?  每月1号10:30
    getCronMonth(month) {
      const taskCronTimeArr = ['6:30', '7:00', '7:30', '8:00', '8:30', '9:00', '9:30', '10:00', '10:30', '11:00', '11:30']
      // console.log('getWeek:', week)

      var halfHour = [0, 30, 6, '*', '?']// 半时
      var fullHour = [0, 30, 6, '*', '?']// 整时
      halfHour.splice(3, 0, month)
      fullHour.splice(3, 0, month)

      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))
      this.taskCronTime = []
      taskCronTimeArr.forEach((item, index) => {
        var timeList = {}
        timeList.title = item
        timeList.time = hourList[index]
        this.taskCronTime.push(timeList)
      })
      // console.log('月: ', this.taskCronTime)
    },

    // 每周一12
    getCronWeek(week) {
      const taskCronTimeArr = ['6:30', '7:00', '7:30', '8:00', '8:30', '9:00', '9:30', '10:00', '10:30', '11:00', '11:30']
      // console.log('getWeek:', week)

      var halfHour = [0, 30, 6, '?', '*']// 半时
      var fullHour = [0, 30, 6, '?', '*']// 整时
      halfHour.push(week)
      fullHour.push(week)

      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))
      this.taskCronTime = []
      taskCronTimeArr.forEach((item, index) => {
        var timeList = {}
        timeList.title = item
        timeList.time = hourList[index]
        this.taskCronTime.push(timeList)
      })
      // console.log('周: ', this.taskCronTime)
    },

    // 每天
    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))
      this.taskCronTime = []
      taskCronTimeArr.forEach((item, index) => {
        var timeList = {}
        timeList.title = item
        timeList.time = hourList[index]
        this.taskCronTime.push(timeList)
      })
      // console.log('天: ', this.taskCronTime)
    },

    // 子组件校验表单
    validataExecuteForm() {
      var flag = false
      this.$refs.ruleExecuteForm.validate((valid) => {
        if (valid) {
          // console.log('成功！！')
          flag = true
        } else {
          console.log('error submit!!')
          flag = false
        }
      })
      return flag
    }
  }
}
</script>

<style scoped>
</style>
