<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="cycleDate" label="执行星期:" prop="cycleDate">
      <a-select mode="cycleDate" v-model="executeForm.cycleDate" style="width: 100%" placeholder="请选择执行星期" @change="getWeek">
        <a-select-option v-for="v in weekDataArr" :key="v.value">
          {{ v.title }}
        </a-select-option>
      </a-select>
    </a-form-model-item>
    <!-- 月 -->
    <a-form-model-item v-if="this.typeState === '1' && this.dataState === 2" ref="cycleDate" label="执行日期:" prop="cycleDate">
      每月
      <a-input-number
        v-model="executeForm.cycleDate"
        :max="28"
        :min="1"
        @change="getMonth"/>
      号
    </a-form-model-item>

    <a-form-model-item v-if="this.typeState === '1'" ref="cycleTime" label="执行时间:" prop="cycleTime">
      <a-time-picker
        style="width: 100%"
        format="HH:mm:ss"
        v-model="executeForm.cycleTime"
        @change="onChange" />
    </a-form-model-item>

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

<script type="text/ecmascript-6">
import moment from 'moment'
export default {
  props: {},
  data() {
    return {
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },

      executeForm: {
        executionMode: '0',
        cycle: null, // 周期
        cycleDate: null,
        cycleTime: null // 执行时间
      },
      endTimeData: '',
      cycleArr: ['天', '周', '月'],
      weekDataArr: [
        { title: '周一', value: '1' },
        { title: '周二', value: '2' },
        { title: '周三', value: '3' },
        { title: '周四', value: '4' },
        { title: '周五', value: '5' },
        { title: '周六', value: '6' },
        { title: '周日', value: '7' }
      ],
      typeState: '0',
      dataState: 0,
      rules: {
        cycle: [{ required: true, message: '请输入执行周期', trigger: 'blur' }],
        cycleTime: [{ required: true, message: '请选择执行时间', trigger: ['blur', 'change'] }],
        cycleDate: [{ required: true, message: '请选择执行日期', trigger: ['blur', 'change'] }]
      }
    }
  },
  // created() {
  // console.log('aaaaaaaaaaaaaa=>>>>>>>>>>>>>', this.executeForm)
  // },
  mounted() {
  // console.log('bbbbbbbbbbbbbb=>>>>>>>>>>>>>', this.executeForm)
  // this.onChange('', '10:20:20')
  },
  methods: {
    moment,
    onChange(time, timeString) {
      this.executeForm.cycleTime = time
      this.endTimeData = timeString
      console.log('time', time, timeString)
    },
    handleChange(value) {
      this.dataState = value
      this.executeForm.cycle = value
      console.log(`selected`, value)
    },
    selectType(v) {
      this.typeState = v.target.value
      this.executeForm.executionMode = v.target.value
    },

    getWeek(value) {
      this.executeForm.cycleDate = value.toString()
      console.log('cycleDate', value)
    },
    getMonth(value) {
      this.executeForm.cycleDate = value.toString()
      console.log('cycleDate', value)
    },

    // 子组件校验表单
    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>
