<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'
import Strings from '@/common/utils/strings.ts'
import TaskApi from '@/pages/sys/task/task-api.ts'
import type { R } from '@/common/utils/http-util.ts'
import { ref } from 'vue'
import type { TabsPaneContext } from 'element-plus'

const {
  secondVal,
  minuteVal,
  hourVal,
  dayVal,
  monthVal,
  weekVal,
  yearVal,
  cronVal,
} = toRefs(useCronStore())

const nexts = ref<string[]>([])

function checkExpression(pane: TabsPaneContext) {
  if (pane.paneName !== 'next-list') {
    return
  }
  TaskApi.checkExpression(cronVal.value)
    .then(res => {
      ElMessage.success('获取成功')
      nexts.value = res.data
    })
    .catch((res: R<string[]>) => {
      ElMessage.success(res.msg ?? (res.message ?? '获取失败'))
      console.log(res)
    })
}
</script>

<template>
  <div class="cron-panel">
    <ElTabs type="border-card" @tab-click="checkExpression">
      <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="`年${Strings.isBlank(yearVal)?'':'（'+yearVal+'）'}`">
        <YearPanel/>
      </ElTabPane>
      <ElTabPane label="最近几次执行时间" name="next-list">
        <div class="next-list">
          <div v-for="next in nexts" :key="next">{{ next }}</div>
        </div>
      </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%;
  }
}

.next-list {
  position relative
}
</style>
