<!-- 秒,分钟 -->
<script lang="ts" setup name="Minute">
import { ref, computed } from 'vue'

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

const emits = defineEmits(["input"])

const type = ref(props.label ==='秒' ? '4' : '1')
// 周期
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(() => {
  const 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;
    default:
      // 不指定
      result.push('?');
      break;
  }
  emits('input', result.join(''))
  return result.join('');
})

computed(() => {
  type.value = props.label === '秒' ? '4' : '1'
})

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.split(',');
  }
}

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>每{{ props.label }}</el-radio>
    </div>
    <div class="pd1" v-if="props.label === '秒'">
      <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="59" 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="59" size="small" style="width: 100px"
        @change="type = '2'" />
      {{ props.label }}
    </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="0" :max="59" size="small" style="width: 100px"
        @change="type = '3'" />
      <span style="margin-left: 5px; margin-right: 5px">{{ props.label }}开始，每</span>
      <el-input-number v-model.trim="loop.end" :min="1" :max="59" size="small" style="width: 100px"
        @change="type = '3'" />
      {{ props.label }}执行一次
    </div>
    <div class="pd1">
      <el-radio v-model="type" label="4" size="small" border>指定</el-radio>
      <el-select size="small" v-if="type === '4'" v-model="appoint" placeholder="请选择" collapse-tags clearable multiple :teleported="false"
        filterable>
        <el-option v-for="i in 60" :key="i" :label="i < 11 ? '0' + (i - 1) : i - 1"
          :value="i < 11 ? '0' + (i - 1) : i - 1" />
      </el-select>
    </div>
  </div>
</template>

<style scoped>
.pd1 {
  padding: 6px 0 6px 0;
}</style>