<script lang="ts" setup>
import { useCronStore } from '@/pages/sys/task/cron/cron-store.ts'

const {weekState} = toRefs(useCronStore())
const weeks = [ '星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天' ]
</script>

<template>
  <ElRadioGroup v-model="weekState.mode" class="select-panel">
    <ElRadio value="none">不指定</ElRadio>
    <ElRadio value="every">每周</ElRadio>
    <ElRadio value="last">
      <span>每月最后一个</span>
      <ElSelect v-model="weekState.last" size="small">
        <ElOption v-for="(week,i) in weeks" :key="'weekState.last' + i" :label="week" :value="i"/>
      </ElSelect>
    </ElRadio>
    <ElRadio value="period1">
      <span>周期，从</span>
      <ElSelect v-model="weekState.period1.start" size="small">
        <ElOption v-for="(week,i) in weeks" :key="'weekState.period1.start' + i" :disabled="i === 7" :label="week" :value="i"/>
      </ElSelect>
      <span>到</span>
      <ElSelect v-model="weekState.period1.end" size="small">
        <ElOption v-for="(week,i) in weeks" :key="'weekState.period1.end' + i" :disabled="i <= weekState.period1.start" :label="week" :value="i"/>
      </ElSelect>
    </ElRadio>
    <ElRadio value="period2">
      <span>每月第</span>
      <ElInputNumber v-model="weekState.period2.start" :controls="false" :max="5" :min="1" size="small"/>
      <span>个星期的星期</span>
      <ElSelect v-model="weekState.period2.end" size="small">
        <ElOption v-for="(week,i) in weeks" :key="'weekState.period2.end' + i" :label="week" :value="i"/>
      </ElSelect>
    </ElRadio>
    <ElRadio value="specify">
      <div>指定</div>
      <ElCheckboxGroup v-model="weekState.specify">
        <ElCheckbox v-for="(week,i) in weeks" :key="'weekState.specify' + i" :label="week" :value="i"/>
      </ElCheckboxGroup>
    </ElRadio>
  </ElRadioGroup>
</template>

<style lang="stylus" scoped>
.select-panel {
  flex-direction column
  align-items start
  gap 10px
  width 100%;

  flex-wrap nowrap

  :deep(.el-input-number) {
    margin 0 10px
    width: 80px
  }

  :deep(.el-select) {
    margin 0 10px
    width: 80px
  }

  :deep(.el-checkbox-group) {
    position absolute
    top 0
    left 60px
    display flex
    flex-wrap wrap
    gap 10px
    width 500px

    .el-checkbox {
      width 90px;
      margin 0
    }
  }
}
</style>
