<template>
  <cacp-group-container title="节假日详情" v-loading="loading" class="cacp-group__box cacp-pd-md cacp-margin-lg">
    <template #content>
      <el-calendar v-model="theDate">
        <template #date-cell="{ data }">
          <span>{{ data.day }}</span>
          <br />
          <el-tag
            v-if="holidayList.some((h) => h.holidayDate === data.day && h.holidayFlag === 'FESTIVAL')"
            type="success"
            >{{ holidayList.find((h) => h.holidayDate === data.day)?.holidayName }}</el-tag
          >
          <el-tag
            v-else-if="holidayList.some((h) => h.holidayDate === data.day && h.holidayFlag === 'WEEKEND')"
            type="danger"
            >{{ holidayList.find((h) => h.holidayDate === data.day)?.holidayName }}</el-tag
          >
        </template>
      </el-calendar>
    </template>
    <template #toolbar>
      <el-button @click="onBack">返回列表</el-button>
    </template>
  </cacp-group-container>
</template>

<script setup lang="ts">
import type { CacpHoliday } from '@/types/holiday'
import { SuccessResultCode, useLoading } from '@cacp/ui'
import { ref, onMounted, watchEffect } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import * as apis from '@/apis/holiday'
import config from '@/config'

const router = useRouter()
const route = useRoute()
const holidayList = ref<Array<CacpHoliday>>([])
const year = ref<number>(0)
const theDate = ref<Date>(new Date())
const { loading, setLoading } = useLoading()

onMounted(async () => {
  const pyear = route.query.year as string
  year.value = Number(pyear)
  theDate.value = new Date(year.value, 0, 1)
  await getHolidayList()
})

watchEffect(async () => {
  if (theDate.value.getFullYear() !== year.value && year.value !== 0) {
    year.value = theDate.value.getFullYear()
    await getHolidayList()
  }
})

function onBack() {
  router.back()
}

async function getHolidayList() {
  setLoading(true)
  const res = await apis.getList(config.CUSTOMS_CODE, year.value)
  if (res.code === SuccessResultCode && res.data) {
    holidayList.value = res.data
  }
  setLoading(false)
}
</script>
<style scoped lang="less">
  .cacp-group__box {
    :deep(.cacp-group__header) {
      justify-content: space-between;
    }
    :deep(.el-calendar__header) {
      padding: 12px 0;
    }
    :deep(.el-calendar__body) {
      padding: 12px 0 0 0;
    }
  }
</style>
