<script setup lang="ts">
/**
 * 文件职责：员工个人排班抽屉。
 * 1. 按周编辑单个员工的每日班次。
 * 2. 支持班次切换与时间微调。
 */
import type { Dayjs } from 'dayjs';

import type { ShiftType } from '#/api/store-staff';
import type {
  DayOption,
  ShiftOption,
  StaffPersonalScheduleFormState,
} from '#/views/store/staff/types';

import { Button, Drawer, TimePicker } from 'ant-design-vue';
import dayjs from 'dayjs';

interface Props {
  dayOptions: DayOption[];
  form: StaffPersonalScheduleFormState;
  isSaving: boolean;
  onSetShiftEnd: (dayOfWeek: number, endTime: string) => void;
  onSetShiftStart: (dayOfWeek: number, startTime: string) => void;
  onSetShiftType: (dayOfWeek: number, shiftType: ShiftType) => void;
  open: boolean;
  shiftOptions: ShiftOption[];
  title: string;
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (event: 'submit'): void;
  (event: 'update:open', value: boolean): void;
}>();

/** 获取某日排班。 */
function getDayShift(dayOfWeek: number) {
  return props.form.shifts.find((item) => item.dayOfWeek === dayOfWeek);
}

/** 判断某日是否展示时间编辑。 */
function isTimeHidden(dayOfWeek: number) {
  const shift = getDayShift(dayOfWeek);
  return !shift || shift.shiftType === 'off';
}

/** 转换时间组件值。 */
function toPickerValue(time: string) {
  if (!time) return undefined;
  return dayjs(`2000-01-01 ${time}`);
}

/** 时间组件值转字符串。 */
function toTimeText(value: Dayjs | null | string | undefined) {
  if (!value) return '';
  if (typeof value === 'string') return value;
  return value.format('HH:mm');
}
</script>

<template>
  <Drawer
    :open="props.open"
    :title="props.title"
    :width="620"
    :mask-closable="true"
    :destroy-on-close="false"
    class="staff-schedule-drawer"
    @update:open="(value) => emit('update:open', value)"
  >
    <div class="staff-schedule-hint">
      点击班次胶囊可自动填充时间；显示“未配置”表示该日尚未设置排班。
    </div>

    <div class="staff-schedule-list">
      <div
        v-for="day in props.dayOptions"
        :key="day.dayOfWeek"
        class="staff-schedule-row"
      >
        <span class="staff-schedule-day">{{ day.label }}</span>

        <div class="staff-schedule-shifts">
          <button
            v-for="shift in props.shiftOptions"
            :key="shift.value"
            type="button"
            class="staff-shift-pill"
            :class="[
              shift.className,
              {
                active: getDayShift(day.dayOfWeek)?.shiftType === shift.value,
              },
            ]"
            @click="props.onSetShiftType(day.dayOfWeek, shift.value)"
          >
            {{ shift.label }}
          </button>
        </div>

        <span v-if="!getDayShift(day.dayOfWeek)" class="staff-schedule-empty">
          未配置
        </span>

        <div
          class="staff-schedule-time"
          :class="{ hidden: isTimeHidden(day.dayOfWeek) }"
        >
          <TimePicker
            :value="toPickerValue(getDayShift(day.dayOfWeek)?.startTime || '')"
            format="HH:mm"
            :allow-clear="false"
            :disabled="isTimeHidden(day.dayOfWeek)"
            @update:value="
              (value) => props.onSetShiftStart(day.dayOfWeek, toTimeText(value))
            "
          />
          <span class="staff-schedule-separator">~</span>
          <TimePicker
            :value="toPickerValue(getDayShift(day.dayOfWeek)?.endTime || '')"
            format="HH:mm"
            :allow-clear="false"
            :disabled="isTimeHidden(day.dayOfWeek)"
            @update:value="
              (value) => props.onSetShiftEnd(day.dayOfWeek, toTimeText(value))
            "
          />
        </div>
      </div>
    </div>

    <template #footer>
      <div class="staff-drawer-footer">
        <Button @click="emit('update:open', false)">取消</Button>
        <Button
          type="primary"
          :loading="props.isSaving"
          @click="emit('submit')"
        >
          保存排班
        </Button>
      </div>
    </template>
  </Drawer>
</template>
