<template>
  <a-row :gutter="[16,16]">
    <a-col :span="24">
      <a-radio-group v-model:value="type">
        <a-radio-button :value="1">每{{unitName}}</a-radio-button>
        <a-radio-button :value="2">周期</a-radio-button>
        <a-radio-button :value="3">循环</a-radio-button>
        <template v-if="unit!=='y'">
          <a-radio-button :value="4">指定</a-radio-button>
        </template>
        <template v-if="unit==='d'||unit==='w'">
          <a-radio-button :value="5">最后</a-radio-button>
          <a-radio-button :value="6">未知</a-radio-button>
        </template>
      </a-radio-group>
    </a-col>
    <a-col :span="24">
      <!--      周期-->
      <template v-if="type===2">
        从
        <a-input-number size="small" v-model:value="cycle[unit].start" :min="min" :max="max"/>
        {{unitName}}开始，到
        <a-input-number size="small" v-model:value="cycle[unit].end" :min="min" :max="max"/>
        {{unitName}},每{{unitName}}执行
      </template>
      <!--      循环-->
      <template v-else-if="type===3">
        从
        <a-input-number size="small" v-model:value="loop[unit].start" :min="min" :max="max"/>
        {{unitName}}开始，每
        <a-input-number size="small" v-model:value="loop[unit].end" :min="min" :max="max"/>
        {{unitName}}执行一次
      </template>
      <!--      指定-->
      <template v-else-if="type===4">
        <a-checkbox-group v-model:value="appoint[unit]" style="width:100%">
          <a-row>
            <template v-for="i in (max+1)" :key="i">
              <a-col :span="2" v-if="i-1>=min">
                <a-checkbox :value="i-1">{{i-1}}</a-checkbox>
              </a-col>
            </template>
          </a-row>
        </a-checkbox-group>
      </template>
      <!--      最后-->
      <template v-else-if="type===5">
        <template v-if="unit==='w'">
          本月最后一个星期
          <a-input-number size="small" v-model:value="last" :min="min" :max="max"/>
        </template>
      </template>
    </a-col>
  </a-row>

</template>
<script>
  import {computed, defineComponent, reactive, toRefs, watch} from "vue";

  export default defineComponent({
    name: "second",
    props: {
      //单位（页签）
      unit: String,
      //表达式
      cron: Object
    },
    emits: ["onChange"],
    setup(props, context) {

      //标识转中文
      const unitName = computed(() => {
        switch (props.unit) {
          case 's':
            return "秒";
          case 'm':
            return "分";
          case 'h':
            return "时";
          case 'd':
            return "日";
          case 'M':
            return "月";
          case 'w':
            return "周";
          case 'y':
            return "年";
          default:
            return "秒";
        }
      });

      const state = reactive({
        type: 1,
        //周期值
        cycle: {
          s: {start: 0, end: 1},
          m: {start: 0, end: 1},
          h: {start: 0, end: 1},
          d: {start: 1, end: 1},
          M: {start: 1, end: 2},
          w: {start: 1, end: 2},
          y: {start: new Date().getFullYear(), end: new Date().getFullYear() + 1}
        },
        //循环值
        loop: {
          s: {start: 0, end: 1},
          m: {start: 0, end: 1},
          h: {start: 0, end: 1},
          d: {start: 1, end: 1},
          M: {start: 1, end: 1},
          w: {start: 1, end: 1},
          y: {start: new Date().getFullYear(), end: 1}
        },
        //指定值
        appoint: {
          s: [0],
          m: [0],
          h: [0],
          d: [1],
          M: [1],
          w: [1],
          y: [new Date().getFullYear()]
        },
        last: 1
      });

      //可指定的最小值
      const min = computed(() => {
        switch (props.unit) {
          case 's':
            return 0;
          case 'm':
            return 0;
          case 'h':
            return 0;
          case 'd':
            return 1;
          case 'M':
            return 1;
          case 'w':
            return 1;
          case 'y':
            if (state.type === 3) {
              return 1;
            } else {
              return 1970;
            }
          default:
            return 0;
        }
      });

      //可指定的最大值
      const max = computed(() => {
        switch (props.unit) {
          case 's':
            return 59;
          case 'm':
            return 59;
          case 'h':
            return 23;
          case 'd':
            return 31;
          case 'M':
            return 12;
          case 'w':
            return 7;
          case 'y':
            return 2099;
          default:
            return 0;
        }
      });

      //切标签页的时候重新渲染页面
      watch(() => props.unit, (unit) => {
        let ch = props.cron[unit];
        if (ch === "*") {
          state.type = 1;
        } else if (ch.indexOf("-") !== -1) {
          state.type = 2;
        } else if (ch.indexOf("/") !== -1) {
          state.type = 3;
        } else if (ch.indexOf(",") !== -1 || ch.match("^\\d+$")) {
          state.type = 4;
        } else if (ch.indexOf("L") !== -1) {
          state.type = 5;
        } else if (ch.indexOf("?") !== -1) {
          state.type = 6;
        }
      }, {deep: true});

      //切换页签时触发表达式改变
      watch(() => state.type, (type) => {
        switch (type) {
          case 1:
            context.emit('onChange', "*");
            break;
          case 2:
            context.emit('onChange', state.cycle[props.unit].start + "-" + state.cycle[props.unit].end);
            break;
          case 3:
            context.emit('onChange', state.loop[props.unit].start + "/" + state.loop[props.unit].end);
            break;
          case 4:
            context.emit('onChange', state.appoint[props.unit].join(','));
            break;
          case 5:
            context.emit('onChange', "L");
            break;
          case 6:
            context.emit('onChange', "?");
            break;
        }
      });

      //改变周期时同步表达式
      watch(() => state.cycle, (cycle) => {
        context.emit('onChange', cycle[props.unit].start + '-' + cycle[props.unit].end)
      }, {deep: true});

      //改变循环时同步表达式
      watch(() => state.loop, (loop) => {
        context.emit('onChange', loop[props.unit].start + '/' + loop[props.unit].end)
      }, {deep: true});

      //改变指定值时同步表达式
      watch(() => state.appoint, (appoint) => {
        context.emit('onChange', appoint[props.unit].join(','))
      }, {deep: true});

      //侦听每月最后一个周几
      watch(() => state.last, (last) => {
        context.emit('onChange', last + "L");
      });
      return {unitName, ...toRefs(state), min, max}
    }
  })
</script>
