<script setup lang="ts">
/**
 * 文件职责：精细模式时段预览区块。
 * 1. 展示按日切换与时段状态网格。
 * 2. 仅承载展示逻辑，不处理数据持久化。
 */
import type {
  PickupPreviewDayDto,
  PickupPreviewSlotDto,
} from '#/api/store-pickup';

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

interface Props {
  days: PickupPreviewDayDto[];
  selectedDate: string;
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (event: 'selectDate', date: string): void;
}>();

const previewSubtitle = '来自后端规则计算（未扣减实际预约）';

function getPreviewStatusText(slot: PickupPreviewSlotDto) {
  if (slot.status === 'expired') return '已过期';
  if (slot.status === 'full') return '已满';
  return `剩余 ${slot.remainingCount}`;
}
</script>

<template>
  <Card :bordered="false" class="pickup-card">
    <template #title>
      <span class="section-title">时段预览</span>
    </template>
    <template #extra>
      <span class="pickup-preview-subtitle">{{ previewSubtitle }}</span>
    </template>

    <template v-if="props.days.length > 0">
      <div class="pickup-preview-day-tabs">
        <button
          v-for="day in props.days"
          :key="day.date"
          type="button"
          class="pickup-preview-day-tab"
          :class="{ active: props.selectedDate === day.date }"
          @click="emit('selectDate', day.date)"
        >
          <span class="tab-date">{{ day.label }}</span>
          <span class="tab-sub">{{ day.subLabel }}</span>
        </button>
      </div>

      <div
        v-for="day in props.days"
        v-show="props.selectedDate === day.date"
        :key="`grid-${day.date}`"
        class="pickup-preview-slot-grid"
      >
        <div
          v-for="slot in day.slots"
          :key="`${day.date}-${slot.time}`"
          class="pickup-preview-slot-cell"
          :class="slot.status"
        >
          <div class="slot-time">{{ slot.time }}</div>
          <div class="slot-status">{{ getPreviewStatusText(slot) }}</div>
        </div>
      </div>

      <div class="pickup-preview-legend">
        <span>
          <i class="legend-dot expired"></i>
          已过期
        </span>
        <span>
          <i class="legend-dot available"></i>
          可预约
        </span>
        <span>
          <i class="legend-dot almost"></i>
          即将满
        </span>
        <span>
          <i class="legend-dot full"></i>
          已满
        </span>
      </div>
    </template>
    <Empty v-else description="暂无预览数据，请先完善生成规则" />
  </Card>
</template>
