<script lang="ts" setup>
import { computed, ref, watch } from 'vue';

import { Page, useVbenDrawer } from '@vben/common-ui';

import dayjs from 'dayjs';
import { ElRadioButton, ElRadioGroup } from 'element-plus';

import CreateTasK from './components/create/index.vue';
import Day from './components/day/index.vue';
import Month from './components/month/index.vue';
import Week from './components/week/index.vue';

// 根据timeType计算默认日期
const getDefaultDate = (type: string) => {
  switch (type) {
    case 'month': {
      return dayjs().format('YYYY-MM');
    }
    case 'week': {
      return dayjs().format('YYYY-MM-DD');
    }
    default: {
      return dayjs().format('YYYY-MM-DD');
    }
  }
};

const searchParams = ref({
  timeType: 'day',
  station: '',
  date: getDefaultDate('day'),
});

// 监听timeType变化，更新默认日期
watch(
  () => searchParams.value.timeType,
  (newType) => {
    searchParams.value.date = getDefaultDate(newType);
  },
);

// 计算年份和周数
const year = computed(() => {
  return dayjs(searchParams.value.date).year();
});

const weekNumber = computed(() => {
  return dayjs(searchParams.value.date).week();
});

const [CreateTaskDrawer, createTaskDrawerApi] = useVbenDrawer({
  // 连接抽离的组件
  connectedComponent: CreateTasK,
  // placement: 'left',
});

const createTaskDrawerEvent = () => {
  createTaskDrawerApi.setData({ isUpdate: false }).open();
};
</script>

<template>
  <Page title="日程视图">
    <template #description>
      <!--筛选区域-->
      <div class="flex items-center justify-between space-x-4">
        <div class="flex items-center space-x-4">
          <ElSelect
            v-model="searchParams.station"
            placeholder="请选择油站"
            class="w-48 min-w-48 max-w-48"
            style="width: 12rem"
          >
            <ElOption label="第一站-龙-龙血站" value="1" />
          </ElSelect>

          <ElRadioGroup v-model="searchParams.timeType">
            <ElRadioButton label="day">日</ElRadioButton>
            <ElRadioButton label="week">周</ElRadioButton>
            <ElRadioButton label="month">月</ElRadioButton>
          </ElRadioGroup>
          <ElDatePicker
            v-model="searchParams.date"
            :type="
              searchParams.timeType === 'month'
                ? 'month'
                : searchParams.timeType === 'week'
                  ? 'week'
                  : 'date'
            "
            :placeholder="
              searchParams.timeType === 'month'
                ? '选择月份'
                : searchParams.timeType === 'week'
                  ? '选择周'
                  : '选择日期'
            "
            :format="
              searchParams.timeType === 'month'
                ? 'YYYY-MM'
                : searchParams.timeType === 'week'
                  ? 'YYYY [年] ww [周]'
                  : 'YYYY-MM-DD'
            "
            :value-format="
              searchParams.timeType === 'month'
                ? 'YYYY-MM'
                : searchParams.timeType === 'week'
                  ? 'YYYY-MM-DD'
                  : 'YYYY-MM-DD'
            "
            class="w-48 min-w-48 max-w-48"
            style="width: 12rem"
          />
        </div>

        <div class="flex items-center space-x-4">
          <ElButton type="primary" @click="createTaskDrawerEvent">
            油站新增任务
          </ElButton>
          <ElButton type="primary"> 访客新增任务 </ElButton>
          <ElButton type="primary"> 任务转接 </ElButton>
        </div>
      </div>
    </template>
    <ElCard class="mb-5 w-full">
      <Day v-if="searchParams.timeType === 'day'" />
      <Week
        v-if="searchParams.timeType === 'week'"
        :year="year"
        :week-number="weekNumber"
      />
      <Month v-if="searchParams.timeType === 'month'" :year="year" />
    </ElCard>
    <CreateTaskDrawer />
  </Page>
</template>
