<script setup lang="ts">
/**
 * 文件职责：大时段模式区块。
 * 1. 展示自提时段表格。
 * 2. 抛出新增、编辑、删除、启用切换事件。
 */
import type { PickupSlotDto } from '#/api/store-pickup';

import { Button, Card, Empty, Popconfirm, Switch } from 'ant-design-vue';

interface Props {
  calcReservedPercent: (slot: PickupSlotDto) => number;
  formatDayOfWeeksText: (dayOfWeeks: PickupSlotDto['dayOfWeeks']) => string;
  isSaving: boolean;
  slots: PickupSlotDto[];
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (event: 'add'): void;
  (event: 'delete', slotId: string): void;
  (event: 'edit', slot: PickupSlotDto): void;
  (event: 'toggleEnabled', payload: { enabled: boolean; slotId: string }): void;
}>();
</script>

<template>
  <Card :bordered="false" class="pickup-card">
    <template #title>
      <span class="section-title">自提时段</span>
    </template>
    <template #extra>
      <Button type="primary" :disabled="props.isSaving" @click="emit('add')">
        添加时段
      </Button>
    </template>

    <div v-if="props.slots.length > 0" class="pickup-slot-table-wrap">
      <table class="pickup-slot-table">
        <thead>
          <tr>
            <th>时段名称</th>
            <th>时间范围</th>
            <th>截止(分钟)</th>
            <th>容量</th>
            <th>已预约</th>
            <th>适用星期</th>
            <th>状态</th>
            <th class="op-column">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="slot in props.slots" :key="slot.id">
            <td class="slot-name-cell">{{ slot.name }}</td>
            <td>{{ slot.startTime }}-{{ slot.endTime }}</td>
            <td>{{ slot.cutoffMinutes }}</td>
            <td>{{ slot.capacity }}</td>
            <td>
              <div class="slot-progress">
                <div class="slot-progress-bar">
                  <div
                    class="slot-progress-fill"
                    :style="{ width: `${props.calcReservedPercent(slot)}%` }"
                  ></div>
                </div>
                <span class="slot-progress-text">
                  {{ Math.max(0, slot.reservedCount) }}/{{ slot.capacity }}
                </span>
              </div>
            </td>
            <td>
              <span class="slot-weekday-tag">
                {{ props.formatDayOfWeeksText(slot.dayOfWeeks) }}
              </span>
            </td>
            <td>
              <Switch
                size="small"
                :checked="slot.enabled"
                @update:checked="
                  (value) =>
                    emit('toggleEnabled', {
                      slotId: slot.id,
                      enabled: Boolean(value),
                    })
                "
              />
            </td>
            <td class="slot-op-cell">
              <div class="slot-op-actions">
                <Button type="link" size="small" @click="emit('edit', slot)">
                  编辑
                </Button>
                <Popconfirm
                  title="确认删除该时段吗？"
                  ok-text="确认"
                  cancel-text="取消"
                  @confirm="emit('delete', slot.id)"
                >
                  <Button type="link" size="small" danger>删除</Button>
                </Popconfirm>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <Empty v-else description="暂无时段配置" />
  </Card>
</template>
