<script lang="ts" setup>
import SecondPanel from '@/pages/sys/task/cron/cron-panel/SecondPanel.vue'
import MinutePanel from '@/pages/sys/task/cron/cron-panel/MinutePanel.vue'
import HourPanel from '@/pages/sys/task/cron/cron-panel/HourPanel.vue'
import DayPanel from '@/pages/sys/task/cron/cron-panel/DayPanel.vue'
import MonthPanel from '@/pages/sys/task/cron/cron-panel/MonthPanel.vue'
import WeekPanel from '@/pages/sys/task/cron/cron-panel/WeekPanel.vue'
import YearPanel from '@/pages/sys/task/cron/cron-panel/YearPanel.vue'
import { useCronStore } from '@/pages/sys/task/cron/cron-store.ts'

const {
  secondVal,
  minuteVal,
  hourVal,
  dayVal,
  monthVal,
  weekVal,
  yearVal,
} = toRefs(useCronStore())
</script>

<template>
  <div class="cron-panel">
    <ElTabs type="border-card">
      <ElTabPane :label="`秒（${secondVal}）`">
        <SecondPanel/>
      </ElTabPane>
      <ElTabPane :label="`分（${minuteVal}）`">
        <MinutePanel/>
      </ElTabPane>
      <ElTabPane :label="`时（${hourVal}）`">
        <HourPanel/>
      </ElTabPane>
      <ElTabPane :label="`日（${dayVal}）`">
        <DayPanel/>
      </ElTabPane>
      <ElTabPane :label="`月（${monthVal}）`">
        <MonthPanel/>
      </ElTabPane>
      <ElTabPane :label="`周（${weekVal}）`">
        <WeekPanel/>
      </ElTabPane>
      <ElTabPane :label="`年（${yearVal}）`">
        <YearPanel/>
      </ElTabPane>
    </ElTabs>
  </div>
</template>

<style lang="stylus" scoped>
.cron-panel {
  box-sizing border-box
  width 100%
  height 475px
  padding 20px

  & > div {
    width: 100%;
    height: 100%;
  }
}
</style>
