<script lang="ts" setup name="Week">
import { ref, computed } from 'vue'

const props = defineProps({
  value: {
    type: String,
    default: '?'
  }
})

const emits = defineEmits(["input"])

const type = ref('5')
// 周期
const cycle = ref({ start: 0, end: 0 })
// 循环
const loop = ref({ start: 0, end: 0 })
// 指定周
const week = ref({ start: 0, end: 0 })
const work = ref(0)
const last = ref(0)
const appoint = ref([])

const value_ =  computed(() => {
  let result: any = []
  switch (type.value) {
    case '1': // 每秒
      result.push('*');
      break;
    case '2': // 年期
      result.push(`${cycle.value.start}-${cycle.value.end}`);
      break;
    case '3': // 循环
      result.push(`${loop.value.start}/${loop.value.end}`);
      break;
    case '4': // 指定
      result.push(appoint.value.join(','));
      break;
    case '6': // 最后
      result.push(`${last.value === 0 ? '' : last.value}L`);
      break;
    case '7': // 指定周
      result.push(`${week.value.start}#${week.value.end}`);
      break;
    default:
      // 不指定
      result.push('?');
      break;
  }
  emits('input', result.join(''))
  return result.join('');
});

const updateVal = (val) => {
  if (!val) {
    return;
  }
  if (val === '?') {
    type.value = '5';
    appoint.value = [];
  } else if (val.indexOf('-') !== -1) {
    // 2周期
    if (val.split('-').length === 2) {
      type.value = '2';
      cycle.value.start = val.split('-')[0];
      cycle.value.end = val.split('-')[1];
      appoint.value = [];
    }
  } else if (val.indexOf('/') !== -1) {
    // 3循环
    if (val.split('/').length === 2) {
      type.value = '3';
      loop.value.start = val.split('/')[0];
      loop.value.end = val.split('/')[1];
      appoint.value = [];
    }
  } else if (val.indexOf('*') !== -1) {
    // 1每
    type.value = '1';
    appoint.value = [];
  } else if (val.indexOf('L') !== -1) {
    // 6最后
    type.value = '6';
    last.value = val.replace('L', '');
    appoint.value = [];
  } else if (val.indexOf('#') !== -1) {
    // 7指定周
    if (val.split('#').length === 2) {
      type.value = '7';
      week.value.start = val.split('#')[0];
      week.value.end = val.split('#')[1];
      appoint.value = [];
    }
  } else if (val.indexOf('W') !== -1) {
    // 8工作日
    type.value = '8';
    work.value = val.replace('W', '');
    appoint.value = [];
  } else {
    // *
    type.value = '4';
    appoint.value = val ? val.split(',') : []
  }
}

const getOptions = (step = 60, type = 'num') => {
  let opts: any = []
  for (var i = 0; i < step; i++) {
    switch (i) {
      case 0:
        opts.push({ label: '星期一', value: i })
        break;
      case 1:
        opts.push({ label: '星期二', value: i })
        break;
      case 2:
        opts.push({ label: '星期三', value: i })
        break;
      case 3:
        opts.push({ label: '星期四', value: i })
        break;
      case 4:
        opts.push({ label: '星期五', value: i })
        break;
      case 5:
        opts.push({ label: '星期六', value: i })
        break;
      case 6:
        opts.push({ label: '星期日', value: i })
        break;
      default:
        opts.push({ label: '星期一', value: i })
        break;
    }
  }
  return opts
}

watch(() => props.value, (newVal, oldVal) => {
  updateVal(newVal)
}, {
  immediate: true
})

</script>

<template>
  <div :val="value_">
    <div class="pd1">
      <el-radio v-model="type" label="1" size="small" border>每周</el-radio>
    </div>
    <div class="pd1">
      <el-radio v-model="type" label="5" size="small" border>不指定</el-radio>
    </div>
    <div class="pd1">
      <el-radio v-model="type" label="2" size="small" border>周期</el-radio>
      <span style="margin-left: 10px; margin-right: 5px">从星期</span>
      <el-input-number v-model.trim="cycle.start" :min="1" :max="7" size="small" style="width: 100px" @change="type = '2'" />
      <span style="margin-left: 5px; margin-right: 5px">至星期</span>
      <el-input-number v-model.trim="cycle.end" :min="2" :max="7" size="small" style="width: 100px" @change="type = '2'" />
    </div>
    <div class="pd1">
      <el-radio v-model="type" label="3" size="small" border>循环</el-radio>
      <span style="margin-left: 10px; margin-right: 5px">从星期</span>
      <el-input-number v-model.trim="loop.start" :min="1" :max="7" size="small" style="width: 100px" @change="type = '3'" />
      <span style="margin-left: 5px; margin-right: 5px">开始，每</span>
      <el-input-number v-model.trim="loop.end" :min="1" :max="7" size="small" style="width: 100px" @change="type = '3'" />
      天执行一次
    </div>
    <div class="pd1">
      <el-radio v-model="type" label="7" size="small" border>指定周</el-radio>
      <span style="margin-left: 10px; margin-right: 5px">本月第</span>
      <el-input-number v-model.trim="week.start" :min="1" :max="4" size="small" style="width: 100px" @change="type = '7'" />
      <span style="margin-left: 5px; margin-right: 5px">周，星期</span>
      <el-input-number v-model.trim="week.end" :min="1" :max="7" size="small" style="width: 100px" @change="type = '7'" />
    </div>
    <div class="pd1">
      <el-radio v-model="type" label="6" size="small" border>本月最后一个</el-radio>
      <span style="margin-left: 10px; margin-right: 5px">星期</span>
      <el-input-number v-model.trim="last" :min="1" :max="7" size="small" style="width: 100px" @change="type = '6'" />
    </div>
    <div class="pd1">
      <el-radio v-model="type" label="4" size="small" border>指定</el-radio>
      <el-select v-if="type === '4'" v-model="appoint" placeholder="请选择" size="small" collapse-tags clearable multiple :teleported="false"
        filterable @change.stop="val => appoint = val">
        <el-option v-for="i in 7" :key="i + ''" :label="i + ''" :value="i + ''" />
      </el-select>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.pd1 {
  padding: 6px 0 6px 0;
}
</style>