<script lang="ts" setup>
import type { MesCalTeamApi } from '#/api/mes/cal/team';

import { onMounted, ref } from 'vue';

import { getTeamList } from '#/api/mes/cal/team';

import { CalendarPanel, useCalendar } from '../components';

const {
  calendarDayMap,
  currentDate,
  fetchCalendar,
  holidaySet,
  loadHolidays,
  loading,
  watchMonth,
} = useCalendar();

const teamList = ref<MesCalTeamApi.Team[]>([]);
const selectedTeamId = ref<number>();

/** 查询当前月份的排班日历，按选中班组过滤 */
function doFetch() {
  if (!selectedTeamId.value) {
    return;
  }
  fetchCalendar({ queryType: 'TEAM', teamId: selectedTeamId.value });
}

/** 点击左侧班组后切换并刷新日历 */
function onSelectTeam(id: number) {
  selectedTeamId.value = id;
  doFetch();
}

/** 监听月份切换，重新加载当月排班 */
watchMonth(() => {
  if (selectedTeamId.value) {
    doFetch();
  }
});

onMounted(async () => {
  // 假期列表与班组列表并行加载，避免假期接口无权限或异常时阻断班组排班查询
  void loadHolidays();
  teamList.value = await getTeamList();
  if (teamList.value.length > 0 && teamList.value[0]?.id) {
    onSelectTeam(teamList.value[0].id);
  }
});
</script>

<template>
  <div class="flex">
    <!-- 左侧：班组列表选择 -->
    <div
      class="border-border mr-3 w-[150px] shrink-0 overflow-hidden rounded border"
    >
      <div
        v-for="team in teamList"
        :key="team.id"
        class="text-foreground border-border hover:bg-muted/50 cursor-pointer border-b px-4 py-2.5 text-sm transition-colors last:border-b-0"
        :class="
          selectedTeamId === team.id
            ? 'bg-primary/10 text-primary font-medium'
            : ''
        "
        @click="onSelectTeam(team.id!)"
      >
        {{ team.name }}
      </div>
    </div>

    <!-- 右侧：日历 -->
    <div class="flex-1">
      <CalendarPanel
        v-model:current-date="currentDate"
        :calendar-day-map="calendarDayMap"
        :holiday-set="holidaySet"
        :loading="loading"
      />
    </div>
  </div>
</template>
