<template>
  <section class="AiCron">
    <div id="changeContab">
      <el-tabs type="border-card">
        <el-tab-pane>
          <span slot="label"><i class="el-icon-date"></i>秒</span>
          <div class="tabBody">
            <el-row>
              <el-radio v-model="second.cronEvery" label="1">每一秒中</el-radio>
            </el-row>
            <el-row>
              <el-radio v-model="second.cronEvery" label="2">每隔
                <el-input-number size="small" v-model="second.incrementIncrement" :min="1" :max="60"></el-input-number>
                秒执行 从
                <el-input-number size="small" v-model="second.incrementStart" :min="0" :max="59"></el-input-number>
                秒开始
              </el-radio>
            </el-row>
            <el-row>
              <el-radio class="long" v-model="second.cronEvery" label="3">具体秒数(可多选)
                <el-select size="small" multiple v-model="second.specificSpecific">
                  <el-option v-for="(val,i) in 60" :key="i" :value="val-1">{{val-1}}</el-option>
                </el-select>
              </el-radio>
            </el-row>
            <el-row>
              <el-radio v-model="second.cronEvery" label="4">周期从
                <el-input-number size="small" v-model="second.rangeStart" :min="1" :max="60"></el-input-number>
                到
                <el-input-number size="small" v-model="second.rangeEnd" :min="0" :max="59"></el-input-number>
                秒
              </el-radio>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label"><i class="el-icon-date"></i>分</span>
          <div class="tabBody">
            <el-row>
              <el-radio v-model="minute.cronEvery" label="1">每一分钟</el-radio>
            </el-row>
            <el-row>
              <el-radio v-model="minute.cronEvery" label="2">每隔
                <el-input-number size="small" v-model="minute.incrementIncrement" :min="1" :max="60"></el-input-number>
                分执行 从
                <el-input-number size="small" v-model="minute.incrementStart" :min="0" :max="59"></el-input-number>
                分开始
              </el-radio>
            </el-row>
            <el-row>
              <el-radio class="long" v-model="minute.cronEvery" label="3">具体分钟数(可多选)
                <el-select size="small" multiple v-model="minute.specificSpecific">
                  <el-option v-for="(val,i) in 60" :key="i" :value="val-1">{{val-1}}</el-option>
                </el-select>
              </el-radio>
            </el-row>
            <el-row>
              <el-radio v-model="minute.cronEvery" label="4">周期从
                <el-input-number size="small" v-model="minute.rangeStart" :min="1" :max="60"></el-input-number>
                到
                <el-input-number size="small" v-model="minute.rangeEnd" :min="0" :max="59"></el-input-number>
                分
              </el-radio>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label"><i class="el-icon-date"></i>时</span>
          <div class="tabBody">
            <el-row>
              <el-radio v-model="hour.cronEvery" label="1">每一小时</el-radio>
            </el-row>
            <el-row>
              <el-radio v-model="hour.cronEvery" label="2">每隔
                <el-input-number size="small" v-model="hour.incrementIncrement" :min="0" :max="23"></el-input-number>
                小时执行 从
                <el-input-number size="small" v-model="hour.incrementStart" :min="0" :max="23"></el-input-number>
                小时开始
              </el-radio>
            </el-row>
            <el-row>
              <el-radio class="long" v-model="hour.cronEvery" label="3">具体小时数(可多选)
                <el-select size="small" multiple v-model="hour.specificSpecific">
                  <el-option v-for="(val,i) in 24" :key="i" :value="val-1">{{val-1}}</el-option>
                </el-select>
              </el-radio>
            </el-row>
            <el-row>
              <el-radio v-model="hour.cronEvery" label="4">周期从
                <el-input-number size="small" v-model="hour.rangeStart" :min="0" :max="23"></el-input-number>
                到
                <el-input-number size="small" v-model="hour.rangeEnd" :min="0" :max="23"></el-input-number>
                小时
              </el-radio>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label"><i class="el-icon-date"></i>天</span>
          <div class="tabBody">
            <el-row>
              <el-radio v-model="day.cronEvery" label="1">每一天</el-radio>
            </el-row>
            <el-row>
              <el-radio v-model="day.cronEvery" label="2">每隔
                <el-input-number size="small" v-model="week.incrementIncrement" :min="1" :max="7"></el-input-number>
                周执行 从
                <el-select size="small" v-model="week.incrementStart">
                  <el-option v-for="(val,i) in 7" :key="i" :label="weeks[val-1]" :value="val"></el-option>
                </el-select>
                开始
              </el-radio>
            </el-row>
            <el-row>
              <el-radio v-model="day.cronEvery" label="3">每隔
                <el-input-number size="small" v-model="day.incrementIncrement" :min="1" :max="31"></el-input-number>
                天执行 从
                <el-input-number size="small" v-model="day.incrementStart" :min="1" :max="31"></el-input-number>
                天开始
              </el-radio>
            </el-row>
            <el-row>
              <el-radio class="long" v-model="day.cronEvery" label="4">具体星期几(可多选)
                <el-select size="small" multiple v-model="week.specificSpecific">
                  <el-option v-for="(val,i) in 7"
                             :key="i"
                             :label="weeks[val-1]"
                             :value="['SUN','MON','TUE','WED','THU','FRI','SAT'][val-1]"
                  ></el-option>
                </el-select>
              </el-radio>
            </el-row>
            <el-row>
              <el-radio class="long" v-model="day.cronEvery" label="5">具体天数(可多选)
                <el-select size="small" multiple v-model="day.specificSpecific">
                  <el-option v-for="(val,i) in 31" :key="i" :value="val">{{val}}</el-option>
                </el-select>
              </el-radio>
            </el-row>
            <el-row>
              <el-radio v-model="day.cronEvery" label="6">在这个月的最后一天</el-radio>
            </el-row>
            <el-row>
              <el-radio v-model="day.cronEvery" label="7">在这个月的最后一个工作日</el-radio>
            </el-row>
            <el-row>
              <el-radio v-model="day.cronEvery" label="8">在这个月的最后一个
                <el-select size="small" v-model="day.cronLastSpecificDomDay">
                  <el-option v-for="(val,i) in 7" :key="i" :label="weeks[val-1]" :value="val"></el-option>
                </el-select>
              </el-radio>
            </el-row>
            <el-row>
              <el-radio v-model="day.cronEvery" label="9">
                <el-input-number size="small" v-model="day.cronDaysBeforeEomMinus" :min="1" :max="31"></el-input-number>
                在本月底前
              </el-radio>
            </el-row>
            <el-row>
              <el-radio v-model="day.cronEvery" label="10">最近的工作日(周一至周五) 至本月
                <el-input-number size="small" v-model="day.cronDaysNearestWeekday" :min="1" :max="31"></el-input-number>
                日
              </el-radio>
            </el-row>
            <el-row>
              <el-radio v-model="day.cronEvery" label="11">在这个月的第
                <el-input-number size="small" v-model="week.cronNthDayNth" :min="1" :max="5"></el-input-number>
                个
                <el-select size="small" v-model="week.cronNthDayDay">
                  <el-option v-for="(val,i) in 7" :key="i" :label="weeks[val-1]" :value="val"></el-option>
                </el-select>
              </el-radio>
            </el-row>
          </div>
        </el-tab-pane>
        <el-tab-pane>
          <span slot="label"><i class="el-icon-date"></i> 月</span>
          <div class="tabBody">
            <el-row>
              <el-radio v-model="month.cronEvery" label="1">每个月</el-radio>
            </el-row>
            <el-row>
              <el-radio v-model="month.cronEvery" label="2">每隔
                <el-input-number size="small" v-model="month.incrementIncrement" :min="0" :max="12"></el-input-number>
                月执行 从
                <el-input-number size="small" v-model="month.incrementStart" :min="0" :max="12"></el-input-number>
                月开始
              </el-radio>
            </el-row>
            <el-row>
              <el-radio class="long" v-model="month.cronEvery" label="3">具体月数(可多选)
                <el-select size="small" multiple v-model="month.specificSpecific">
                  <el-option v-for="(val,i) in 12" :key="i" :label="val" :value="val"></el-option>
                </el-select>
              </el-radio>
            </el-row>
            <el-row>
              <el-radio v-model="month.cronEvery" label="4">从
                <el-input-number size="small" v-model="month.rangeStart" :min="1" :max="12"></el-input-number>
                到
                <el-input-number size="small" v-model="month.rangeEnd" :min="1" :max="12"></el-input-number>
              </el-radio>
            </el-row>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div class="bottom">
        <span class="value">{{cron}}</span>
        <el-button type="primary" @click="change">保存</el-button>
        <el-button type="primary" @click="close">取消</el-button>
      </div>
    </div>
  </section>
</template>

<script>
  export default {
    name: "AiCron",
    model: {
      prop: 'value',
      event: "change"
    },
    props: {
      value: String
    },
    data() {
      return {
        weeks: ["星期一", "星期二", "星期三", "星期四", "星期五", "星期六", "星期天"],
        second: {
          cronEvery: '',
          incrementStart: '3',
          incrementIncrement: '5',
          rangeStart: '',
          rangeEnd: '',
          specificSpecific: [],
        },
        minute: {
          cronEvery: '',
          incrementStart: '3',
          incrementIncrement: '5',
          rangeStart: '',
          rangeEnd: '',
          specificSpecific: [],
        },
        hour: {
          cronEvery: '',
          incrementStart: '3',
          incrementIncrement: '5',
          rangeStart: '',
          rangeEnd: '',
          specificSpecific: [],
        },
        day: {
          cronEvery: '',
          incrementStart: '1',
          incrementIncrement: '1',
          rangeStart: '',
          rangeEnd: '',
          specificSpecific: [],
          cronLastSpecificDomDay: 1,
          cronDaysBeforeEomMinus: '',
          cronDaysNearestWeekday: '',
        },
        week: {
          cronEvery: '',
          incrementStart: '1',
          incrementIncrement: '1',
          specificSpecific: [],
          cronNthDayDay: 1,
          cronNthDayNth: '1',
        },
        month: {
          cronEvery: '',
          incrementStart: '3',
          incrementIncrement: '5',
          rangeStart: '',
          rangeEnd: '',
          specificSpecific: [],
        },
        output: {
          second: '',
          minute: '',
          hour: '',
          day: '',
          month: '',
          Week: '',
        },
        visible: false,
        cronArr:['*','*','*','*','*','?']
      }
    },
    watch: {
      cron(val) {
        this.value = val
      }
    },
    computed: {
      secondsText() {
        let seconds = this.cronArr[0];
        let cronEvery = this.second.cronEvery;
        switch (cronEvery.toString()) {
          case '1':
            seconds = '*';
            break;
          case '2':
            seconds = this.second.incrementStart + '/' + this.second.incrementIncrement;
            break;
          case '3':
            this.second.specificSpecific.map(val => {
              seconds += val + ','
            });
            seconds = seconds.slice(0, -1);
            break;
          case '4':
            seconds = this.second.rangeStart + '-' + this.second.rangeEnd;
            break;
        }
        return seconds;
      },
      minutesText() {
        let minutes = this.cronArr[2];;
        let cronEvery = this.minute.cronEvery;
        switch (cronEvery.toString()) {
          case '1':
            minutes = '*';
            break;
          case '2':
            minutes = this.minute.incrementStart + '/' + this.minute.incrementIncrement;
            break;
          case '3':
            this.minute.specificSpecific.map(val => {
              minutes += val + ','
            });
            minutes = minutes.slice(0, -1);
            break;
          case '4':
            minutes = this.minute.rangeStart + '-' + this.minute.rangeEnd;
            break;
        }
        return minutes;
      },
      hoursText() {
        let hours = this.cronArr[2];;
        let cronEvery = this.hour.cronEvery;
        switch (cronEvery.toString()) {
          case '1':
            hours = '*';
            break;
          case '2':
            hours = this.hour.incrementStart + '/' + this.hour.incrementIncrement;
            break;
          case '3':
            this.hour.specificSpecific.map(val => {
              hours += val + ','
            });
            hours = hours.slice(0, -1);
            break;
          case '4':
            hours = this.hour.rangeStart + '-' + this.hour.rangeEnd;
            break;
        }
        return hours;
      },
      daysText() {
        let days = this.cronArr[3];;
        let cronEvery = this.day.cronEvery;
        switch (cronEvery.toString()) {
          case '1':
            break;
          case '2':
          case '4':
          case '11':
            days = '?';
            break;
          case '3':
            days = this.day.incrementStart + '/' + this.day.incrementIncrement;
            break;
          case '5':
            this.day.specificSpecific.map(val => {
              days += val + ','
            });
            days = days.slice(0, -1);
            break;
          case '6':
            days = "L";
            break;
          case '7':
            days = "LW";
            break;
          case '8':
            days = this.day.cronLastSpecificDomDay + 'L';
            break;
          case '9':
            days = 'L-' + this.day.cronDaysBeforeEomMinus;
            break;
          case '10':
            days = this.day.cronDaysNearestWeekday + "W";
            break
        }
        return days;
      },
      weeksText() {
        let weeks = this.cronArr[5];;
        let cronEvery = this.day.cronEvery;
        switch (cronEvery.toString()) {
          case '1':
          case '3':
          case '5':
            weeks = '?';
            break;
          case '2':
            weeks = this.week.incrementStart + '/' + this.week.incrementIncrement;
            break;
          case '4':
            this.week.specificSpecific.map(val => {
              weeks += val + ','
            });
            weeks = weeks.slice(0, -1);
            break;
          case '6':
          case '7':
          case '8':
          case '9':
          case '10':
            weeks = "?";
            break;
          case '11':
            weeks = this.week.cronNthDayDay + "#" + this.week.cronNthDayNth;
            break;
        }
        return weeks;
      },
      monthsText() {
        let months = this.cronArr[4];
        let cronEvery = this.month.cronEvery;
        switch (cronEvery.toString()) {
          case '1':
            months = '*';
            break;
          case '2':
            months = this.month.incrementStart + '/' + this.month.incrementIncrement;
            break;
          case '3':
            this.month.specificSpecific.map(val => {
              months += val + ','
            });
            months = months.slice(0, -1);
            break;
          case '4':
            months = this.month.rangeStart + '-' + this.month.rangeEnd;
            break;
        }
        return months;
      },
      cron() {
        return `${this.secondsText || '*'} ${this.minutesText || '*'} ${this.hoursText || '*'} ${this.daysText || '*'} ${this.monthsText || '*'} ${this.weeksText || '?'} `
      },
    },
    methods: {
      getValue() {
        return this.cron;
      },
      change() {
        this.$emit('change', this.cron);
        this.close();
      },
      close() {
        this.$emit('close')
      },
    },
    mounted() {
      if(this.value) this.cronArr = this.value.trim().split(" ")
    }
  }
</script>

<style lang="scss" scoped>
  .AiCron {

    #changeContab {
      .language {
        position: absolute;
        right: 25px;
        z-index: 1;
      }

      .el-tabs {
        box-shadow: none;
      }

      .tabBody {
        .el-row {
          margin: 10px 0;

          .long {
            .el-select {
              width: 350px;
            }
          }

          .el-input-number {
            width: 110px;
          }
        }
      }

      .bottom {
        width: 100%;
        text-align: center;
        margin-top: 5px;
        position: relative;

        .value {
          font-size: 18px;
          vertical-align: middle;
          margin-right: 10px;
        }
      }
    }

  }
</style>
