<template>
  <div class="select_cron_container">
     <a-tabs v-model="tabVal">
      <a-tab-pane key="second" tab="秒">
         <a-radio-group v-model="radioList['second']" :disabled="!isEdit" @change="radioChange">
          <a-radio :value="'*'">
            每秒 允许的通配符[, - * /]
          </a-radio>
          <a-radio :value="'-'">
            周期从
            <a-input-number class="ipt" :min="0" v-model="formData.second.ipt1" :disabled="!isEdit" @change="iptChange('-')"></a-input-number> - 
            <a-input-number class="ipt" :min="0" v-model="formData.second.ipt2" :disabled="!isEdit" @change="iptChange('-')"></a-input-number>秒
          </a-radio>
          <a-radio :value="'/'">
            从<a-input-number class="ipt" :min="0" v-model="formData.second.ipt3" :disabled="!isEdit" @change="iptChange('/')"></a-input-number>秒开始，
            每<a-input-number class="ipt" :min="0" v-model="formData.second.ipt4" :disabled="!isEdit" @change="iptChange('/')"></a-input-number>秒执行一次
          </a-radio>
          <a-radio :value="'checkedVal'">
            指定
            <a-select
              mode="multiple"
              v-model="formData.second.checkedList"
              :maxTagCount="3"
              :disabled="!isEdit"
              @change="checkChange"
            >
              <a-select-option v-for="item in checkList['second']" :key="item.value" :value="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-radio>
        </a-radio-group>
        <p class="title">最近运行时间</p>
      </a-tab-pane>
      <a-tab-pane key="minute" tab="分钟">
        <a-radio-group v-model="radioList['minute']" :disabled="!isEdit" @change="radioChange">
          <a-radio :value="'*'">
            每分钟 允许的通配符[, - * /]
          </a-radio>
          <a-radio :value="'-'">
            周期从
            <a-input-number class="ipt" :min="0" v-model="formData.minute.ipt1" :disabled="!isEdit" @change="iptChange('-')"></a-input-number> - 
            <a-input-number class="ipt" :min="0" v-model="formData.minute.ipt2" :disabled="!isEdit" @change="iptChange('-')"></a-input-number>分钟
          </a-radio>
          <a-radio :value="'/'">
            从<a-input-number class="ipt" :min="0" v-model="formData.minute.ipt3" :disabled="!isEdit" @change="iptChange('/')"></a-input-number>分钟开始，
            每<a-input-number class="ipt" :min="0" v-model="formData.minute.ipt4" :disabled="!isEdit" @change="iptChange('/')"></a-input-number>分钟执行一次
          </a-radio>
          <a-radio :value="'checkedVal'">
            指定
            <a-select
              mode="multiple"
              v-model="formData.minute.checkedList"
              :maxTagCount="3"
              :disabled="!isEdit"
              @change="checkChange"
            >
              <a-select-option v-for="item in checkList['minute']" :key="item.value" :value="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-radio>
        </a-radio-group>
        <p class="title">最近运行时间</p>
      </a-tab-pane>
      <a-tab-pane key="hour" tab="小时">
        <a-radio-group v-model="radioList['hour']" :disabled="!isEdit" @change="radioChange">
          <a-radio :value="'*'">
            每小时 允许的通配符[, - * /]
          </a-radio>
          <a-radio :value="'-'">
            周期从
            <a-input-number class="ipt" :min="0" v-model="formData.hour.ipt1" :disabled="!isEdit" @change="iptChange('-')"></a-input-number> - 
            <a-input-number class="ipt" :min="0" v-model="formData.hour.ipt2" :disabled="!isEdit" @change="iptChange('-')"></a-input-number>小时
          </a-radio>
          <a-radio :value="'/'">
            从<a-input-number class="ipt" :min="0" v-model="formData.hour.ipt3" :disabled="!isEdit" @change="iptChange('/')"></a-input-number>小时开始，
            每<a-input-number class="ipt" :min="0" v-model="formData.hour.ipt4" :disabled="!isEdit" @change="iptChange('/')"></a-input-number>小时执行一次
          </a-radio>
          <a-radio :value="'checkedVal'">
            指定
            <a-select
              mode="multiple"
              v-model="formData.hour.checkedList"
              :maxTagCount="3"
              :disabled="!isEdit"
              @change="checkChange"
            >
              <a-select-option v-for="item in checkList['hour']" :key="item.value" :value="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-radio>
        </a-radio-group>
        <p class="title">最近运行时间</p>
      </a-tab-pane>
      <a-tab-pane key="day" tab="日">
        <a-radio-group v-model="radioList['day']" :disabled="!isEdit" @change="radioChange">
          <a-radio :value="'*'">
            每天 允许的通配符[, - * / L W]
          </a-radio>
          <a-radio :value="'?'">
            不指定
          </a-radio>
          <a-radio :value="'-'">
            周期从
            <a-input-number class="ipt" :min="0" v-model="formData.day.ipt1" :disabled="!isEdit" @change="iptChange('-')"></a-input-number> - 
            <a-input-number class="ipt" :min="0" v-model="formData.day.ipt2" :disabled="!isEdit" @change="iptChange('-')"></a-input-number>日
          </a-radio>
          <a-radio :value="'/'">
            从<a-input-number class="ipt" :min="0" v-model="formData.day.ipt3" :disabled="!isEdit" @change="iptChange('/')"></a-input-number>日开始，
            每<a-input-number class="ipt" :min="0" v-model="formData.day.ipt4" :disabled="!isEdit" @change="iptChange('/')"></a-input-number>天执行一次
          </a-radio>
          <a-radio :value="'W'">
            每月<a-input-number class="ipt" :min="0" v-model="formData.day.ipt5" :disabled="!isEdit" @change="iptChange('W')"></a-input-number>号最近的那个工作日
          </a-radio>
          <a-radio :value="'L'">
            本月最后一天
          </a-radio>
          <a-radio :value="'checkedVal'">
            指定
            <a-select
              mode="multiple"
              v-model="formData.day.checkedList"
              :maxTagCount="3"
              :disabled="!isEdit"
              @change="checkChange"
            >
              <a-select-option v-for="item in checkList['day']" :key="item.value" :value="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-radio>
        </a-radio-group>
        <p class="title">最近运行时间</p>
      </a-tab-pane>
      <a-tab-pane key="month" tab="月">
        <a-radio-group v-model="radioList['month']" :disabled="!isEdit" @change="radioChange">
          <a-radio :value="'*'">
            每月 允许的通配符[, - * /]
          </a-radio>
          <a-radio :value="'?'">
            不指定
          </a-radio>
          <a-radio :value="'-'">
            周期从
            <a-input-number class="ipt" :min="0" v-model="formData.month.ipt1" :disabled="!isEdit" @change="iptChange('-')"></a-input-number> - 
            <a-input-number class="ipt" :min="0" v-model="formData.month.ipt2" :disabled="!isEdit" @change="iptChange('-')"></a-input-number>月
          </a-radio>
          <a-radio :value="'/'">
            从<a-input-number class="ipt" :min="0" v-model="formData.month.ipt3" :disabled="!isEdit" @change="iptChange('/')"></a-input-number>月开始，
            每<a-input-number class="ipt" :min="0" v-model="formData.month.ipt4" :disabled="!isEdit" @change="iptChange('/')"></a-input-number>月执行一次
          </a-radio>
          <a-radio :value="'checkedVal'">
            指定
            <a-select
              mode="multiple"
              v-model="formData.month.checkedList"
              :maxTagCount="3"
              :disabled="!isEdit"
              @change="checkChange"
            >
              <a-select-option v-for="item in checkList['month']" :key="item.value" :value="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-radio>
        </a-radio-group>
        <p class="title">最近运行时间</p>
      </a-tab-pane>
      <a-tab-pane key="week" tab="周">
        <a-radio-group v-model="radioList['week']" :disabled="!isEdit" @change="radioChange">
          <a-radio :value="'*'">
            每周 允许的通配符[, - * / L #]
          </a-radio>
          <a-radio :value="'?'">
            不指定
          </a-radio>
          <a-radio :value="'-'">
            周期从星期
            <a-input-number class="ipt" :min="0" v-model="formData.week.ipt1" :disabled="!isEdit" @change="iptChange('-')"></a-input-number> - 
            <a-input-number class="ipt" :min="0" v-model="formData.week.ipt2" :disabled="!isEdit" @change="iptChange('-')"></a-input-number>
          </a-radio>
          <a-radio :value="'/'">
            第<a-input-number class="ipt" :min="0" v-model="formData.week.ipt3" :disabled="!isEdit" @change="iptChange('/')"></a-input-number>
            周的星期<a-input-number class="ipt" :min="0" v-model="formData.week.ipt4" :disabled="!isEdit" @change="iptChange('/')"></a-input-number>
          </a-radio>
          <a-radio :value="'L'">
            本月最后一个星期
            <a-input-number class="ipt" :min="0" v-model="formData.week.ipt5" :disabled="!isEdit" @change="iptChange('L')"></a-input-number>
          </a-radio>
          <a-radio :value="'checkedVal'">
            指定
            <a-select
              mode="multiple"
              v-model="formData.week.checkedList"
              :maxTagCount="3"
              :disabled="!isEdit"
              @change="checkChange"
            >
              <a-select-option v-for="item in checkList['week']" :key="item.value" :value="item.value">
                {{ item.label }}
              </a-select-option>
            </a-select>
          </a-radio>
        </a-radio-group>
        <p class="title">最近运行时间</p>
      </a-tab-pane>
      <a-tab-pane key="year" tab="年">
        <a-radio-group v-model="radioList['year']" :disabled="!isEdit" @change="radioChange">
          <a-radio :value="''">
            不指定 允许的通配符[, - * /]非必填
          </a-radio>
          <a-radio :value="'*'">
            每年
          </a-radio>
          <a-radio :value="'-'">
            周期从
            <a-input-number class="ipt" :min="0" v-model="formData.year.ipt1" :disabled="!isEdit" @change="iptChange('-')"></a-input-number> - 
            <a-input-number class="ipt" :min="0" v-model="formData.year.ipt2" :disabled="!isEdit" @change="iptChange('-')"></a-input-number>年
          </a-radio>
        </a-radio-group>
        <p class="title">最近运行时间</p>
      </a-tab-pane>
    </a-tabs>
    <div class="foot_list">
      <a-button size="small" @click="close"> 关闭 </a-button>
      &nbsp;
      <a-button type="primary" size="small" @click="submit"> 确定 </a-button>
    </div>
  </div>
</template>
<script>
/**
 * @Author: y_zp
 * @description: Cron选择列表
 */
import moment from 'moment'
export default {
  props: {
    data: [String, Object],
    show: [Boolean],
    isEdit: {
      type: Boolean,
      default: () => {
        return true
      }
    }
  },
  data() {
    return {
      tabVal: 'second',
      formData: {
        second: {
          ipt1: 1,
          ipt2: 2,
          ipt3: 0,
          ipt4: 1,
          checkedList: []
        },
        minute: {
          ipt1: 1,
          ipt2: 2,
          ipt3: 0,
          ipt4: 1,
          checkedList: []
        },
        hour: {
          ipt1: 1,
          ipt2: 2,
          ipt3: 0,
          ipt4: 1,
          checkedList: []
        },
        day: {
          ipt1: 1,
          ipt2: 2,
          ipt3: 0,
          ipt4: 1,
          ipt5: 1,
          checkedList: []
        },
        month: {
          ipt1: 1,
          ipt2: 2,
          ipt3: 0,
          ipt4: 1,
          checkedList: []
        },
        week: {
          ipt1: 1,
          ipt2: 2,
          ipt3: 0,
          ipt4: 1,
          ipt5: 1,
          checkedList: []
        },
        year: {
          ipt1: 2016,
          ipt2: 2017
        }
      },
      radioList: {
        second: '',
        minute: '',
        hour: '',
        day: '',
        month: '',
        week: '',
        year: ''
      },
      checkList: {},
      dataList: {
        second: '*',
        minute: '*',
        hour: '*',
        day: '*',
        month: '*',
        week: '?',
        year: ''
      },
    }
  },
  watch: {
    'tabVal': {
      handler(val) {
        if(this.checkList[val] && this.checkList[val].length > 0) return
        this.checkList[val] = this.setCheckboxData(val, '')
      },
      immediate: true
    },
    show(val) {
      if(val) {
        this.initDate(this.data)
      }
    }
  },
  created() {
    this.initDate(this.data)
  },
  methods: {
    /**
     * @Author: y_zp
     * @description: 初始化数据
     */
    initDate(val) {
      this.dataList = val;
      for (let i in this.dataList) {
        this.radioList[i] = this.setInitDate(i, this.dataList[i])
      }
    },

    setInitDate(index, val) {
      if (val.indexOf('-') > -1) {
        this.formData[index].ipt1 = val.split('-')[0]
        this.formData[index].ipt2 = val.split('-')[1]
        return '-'
      } else if(val.indexOf('/') > -1) {
        this.formData[index].ipt3 = val.split('/')[0]
        this.formData[index].ipt4 = val.split('/')[1]
        return '/'
      } else if(val.indexOf('W') > -1) {
        this.formData[index].ipt5 = val.split('W')[0]
        return 'W'
      } else if (val == '*' || val == '?' || val == 'L' || val == '') {
        return val
      } else if(val != "L" && val.indexOf('L') > -1) {
        this.formData[index].ipt5 = val.split('L')[0]
        return "L"
      } else {
        this.formData[index].checkedList = val.split(',').map( item => { return Number(item) })
        return 'checkedVal'
      }
    },

    /**
     * @Author: y_zp
     * @description: radio切换
     */
    radioChange(e) {
      this.checkList[this.tabVal] = this.setCheckboxData(this.tabVal, e.target.value)
      if(e.target.value == 'checkedVal') {
        this.formData[this.tabVal].checkedList = ['second', 'minute', 'hour'].indexOf(this.tabVal) > -1 ? [0] : [1]
      }
      this.dataList[this.tabVal] = this.returnVal(this.tabVal, e.target.value)
    },

    iptChange(type) {
      if (this.radioList[this.tabVal] == type) {
        this.dataList[this.tabVal] = this.returnVal(this.tabVal, type)
      }
    },

    /**
     * @Author: y_zp
     * @description: 确定按钮
     */
    submit() {
      this.$emit('setSchConf', this.dataList)
    },

    close() {
      this.$emit('close')
    },

    /**
     * @Author: y_zp
     * @description: radio选择返回对应的值
     */
    returnVal(type, val) {
      switch(val) {
        case '*':
          return '*'
        case '-':
          this.formData[type].ipt1 = this.formData[type].ipt1 || 1;
          this.formData[type].ipt2 = this.formData[type].ipt2 || 2;
          return this.formData[type].ipt1 + val + this.formData[type].ipt2
        case '/':
          this.formData[type].ipt3 = this.formData[type].ipt3 || 0;
          this.formData[type].ipt4 = this.formData[type].ipt4 || 1;
          return this.formData[type].ipt3 + val + this.formData[type].ipt4
        case 'W':
          this.formData[type].ipt5 = this.formData[type].ipt5 || 1
          return this.formData[type].ipt5 + val
        case 'L':
          type == "week" && (this.formData[type].ipt5 = this.formData[type].ipt5 || 1)
          return type == "week" ? this.formData[type].ipt5 + val : val
        case '?':
          return val
        case '':
          return ''
        case 'checkedVal':
          return this.formData[type].checkedList.join(',')
      }
    },

    /**
     * @Author: y_zp
     * @description: checkbox选中的值
     */
    checkChange(val) {
      if(this.radioList[this.tabVal] == "checkedVal") {
        this.dataList[this.tabVal] = val.join(',')
      }
    },

    /**
     * @Author: y_zp
     * @description: 设置checkbox的值
     */
    setCheckboxData(val, type) {
      let data = []
      switch(val) {
        case 'second':
          for(let i = 0; i < 60; i++) {
            data.push({
              disabled: type != 'checkedVal',
              label: `00${i}`.slice(-2),
              value: i
            })
          }
          return data
        case 'minute':
          for(let i = 0; i < 60; i++) {
            data.push({
              disabled: type != 'checkedVal',
              label: `00${i}`.slice(-2),
              value: i
            })
          }
          return data
        case 'hour':
          for(let i = 0; i < 24; i++) {
            data.push({
              disabled: type != 'checkedVal',
              label: `00${i}`.slice(-2),
              value: i
            })
          }
          return data
        case 'day':
          for(let i = 1; i <= moment().daysInMonth(); i++) {
            data.push({
              disabled: type != 'checkedVal',
              label: `00${i}`.slice(-2),
              value: i
            })
          }
          return data
        case 'week':
          for(let i = 1; i <= 7; i++) {
            data.push({
              disabled: type != 'checkedVal',
              label: i,
              value: i
            })
          }
          return data
        case 'month':
          for(let i = 1; i <= 12; i++) {
            data.push({
              disabled: type != 'checkedVal',
              label: `00${i}`.slice(-2),
              value: i
            })
          }
        return data
      }
    }
  }
}
</script>
<style lang="less">
.select_cron_container {
  width: 430px;
  .ant-radio-wrapper {
    display: block;
    margin-bottom: 5px;
  }
  .check-box {
    margin-left: 20px;
    white-space: break-spaces;
    width: 400px;
    .ant-checkbox-wrapper {
      margin-left: 8px;
    }
  }
  .ipt {
    width: 80px;
    border: 0 none;
    border-bottom: 1px solid #d9d9d9;
    border-radius: inherit;
    outline: none;
    height: 24px;
  }
  .ant-checkbox-checked::after {
    background: #2d5afa !important;
  }
  .ant-select {
    width: 260px;
    display: inline-block;
  }
  .foot_list {
    margin-top: 16px;
    text-align: right;
  }
}
</style>