<script setup lang="ts">
/**
 * 文件职责：全员周排班抽屉。
 * 1. 以矩阵方式展示全员排班。
 * 2. 点击单元格循环切换班次。
 */
import type { ShiftType, StaffDayShiftDto } from '#/api/store-staff';
import type {
  DayOption,
  ShiftLegendItem,
  WeekEditorRow,
} from '#/views/store/staff/types';

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

interface Props {
  dayOptions: DayOption[];
  getShiftClass: (shiftType: ShiftType) => string;
  getShiftLabel: (shiftType: ShiftType) => string;
  getShiftTimeText: (shift: StaffDayShiftDto) => string;
  isTemplateConfigured: boolean;
  isSaving: boolean;
  legendItems: ShiftLegendItem[];
  open: boolean;
  roleLabelResolver: (roleType: WeekEditorRow['roleType']) => string;
  rows: WeekEditorRow[];
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (event: 'cycleShift', payload: { dayOfWeek: number; staffId: string }): void;
  (event: 'submit'): void;
  (event: 'update:open', value: boolean): void;
}>();

/** 获取某行某天班次，缺失时返回未配置。 */
function resolveDayShift(
  row: WeekEditorRow,
  dayOfWeek: number,
): StaffDayShiftDto | undefined {
  return row.shifts.find((item) => item.dayOfWeek === dayOfWeek);
}

/** 获取单元格样式。 */
function resolveCellClass(shift: StaffDayShiftDto | undefined) {
  if (!shift) return 'shift-unconfigured';
  return props.getShiftClass(shift.shiftType);
}

/** 获取单元格班次文案。 */
function resolveCellLabel(shift: StaffDayShiftDto | undefined) {
  if (!shift) return '未配置';
  return props.getShiftLabel(shift.shiftType);
}

/** 获取单元格时间文案。 */
function resolveCellTimeText(shift: StaffDayShiftDto | undefined) {
  if (!shift) return '未配置';
  return props.getShiftTimeText(shift);
}
</script>

<template>
  <Drawer
    :open="props.open"
    title="编辑本周排班表"
    :width="760"
    :mask-closable="true"
    :destroy-on-close="false"
    class="staff-week-drawer"
    @update:open="(value) => emit('update:open', value)"
  >
    <div class="staff-week-legend">
      <span
        v-for="item in props.legendItems"
        :key="item.type"
        class="staff-week-legend-item"
      >
        <i class="staff-week-legend-dot" :class="item.className"></i>
        {{ item.label }} {{ item.timeText }}
      </span>
      <span class="staff-week-legend-item">
        <i class="staff-week-legend-dot shift-off"></i>
        休息
      </span>
    </div>

    <div v-if="!props.isTemplateConfigured" class="staff-week-empty">
      <Empty description="未配置班次模板，请先配置模板后再编辑周排班" />
    </div>

    <div v-else-if="props.rows.length === 0" class="staff-week-empty">
      <Empty description="暂无可编辑排班" />
    </div>

    <div v-else class="staff-week-table-wrap">
      <table class="staff-week-table">
        <thead>
          <tr>
            <th>员工</th>
            <th v-for="day in props.dayOptions" :key="day.dayOfWeek">
              {{ day.label }}
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="row in props.rows" :key="row.staffId">
            <td class="staff-week-name-cell">
              <div class="staff-week-name">{{ row.staffName }}</div>
              <div class="staff-week-role">
                {{ props.roleLabelResolver(row.roleType) }}
              </div>
            </td>

            <td
              v-for="day in props.dayOptions"
              :key="`${row.staffId}-${day.dayOfWeek}`"
              class="staff-week-cell-wrap"
            >
              <button
                type="button"
                class="staff-week-cell"
                :class="resolveCellClass(resolveDayShift(row, day.dayOfWeek))"
                @click="
                  emit('cycleShift', {
                    staffId: row.staffId,
                    dayOfWeek: day.dayOfWeek,
                  })
                "
              >
                <span class="staff-week-cell-label">
                  {{ resolveCellLabel(resolveDayShift(row, day.dayOfWeek)) }}
                </span>
                <span class="staff-week-cell-time">
                  {{ resolveCellTimeText(resolveDayShift(row, day.dayOfWeek)) }}
                </span>
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

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