<script setup lang="ts">
/**
 * 文件职责：堂食桌位列表区块。
 * 1. 展示当前区域桌位卡片。
 * 2. 抛出二维码、编辑、删除、批量生成、新增事件。
 */
import type { DineInTableDto } from '#/api/store-dinein';
import type { DineInStatusOption } from '#/views/store/dine-in/types';

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

interface Props {
  canOperate: boolean;
  hasSelectedArea: boolean;
  isSaving: boolean;
  resolveStatusClassName: (status: DineInTableDto['status']) => string;
  statusMap: Record<DineInTableDto['status'], DineInStatusOption>;
  tables: DineInTableDto[];
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (event: 'add'): void;
  (event: 'batch'): void;
  (event: 'delete', tableId: string): void;
  (event: 'edit', table: DineInTableDto): void;
  (event: 'qrcode', table: DineInTableDto): void;
}>();
</script>

<template>
  <Card :bordered="false" class="dinein-card">
    <template #title>
      <span class="section-title">桌位列表</span>
    </template>
    <template #extra>
      <div class="dinein-table-header-actions">
        <Button
          size="small"
          :disabled="!props.canOperate || !props.hasSelectedArea"
          @click="emit('batch')"
        >
          批量生成
        </Button>
        <Button
          type="primary"
          size="small"
          :disabled="!props.canOperate || !props.hasSelectedArea"
          @click="emit('add')"
        >
          添加桌位
        </Button>
      </div>
    </template>

    <template v-if="props.tables.length > 0">
      <div class="dinein-table-grid">
        <div
          v-for="table in props.tables"
          :key="table.id"
          class="dinein-table-card"
          :class="{
            disabled: table.status === 'disabled',
          }"
        >
          <div class="dinein-table-code">{{ table.code }}</div>
          <div class="dinein-table-seat">{{ table.seats }}人桌</div>
          <div
            class="dinein-table-status"
            :class="props.resolveStatusClassName(table.status)"
          >
            <span class="status-dot"></span>
            {{ props.statusMap[table.status]?.label ?? '--' }}
          </div>

          <div class="dinein-table-tags">
            <Tag v-for="tag in table.tags" :key="`${table.id}-${tag}`">
              {{ tag }}
            </Tag>
          </div>

          <div class="dinein-table-footer">
            <Button
              size="small"
              type="text"
              :disabled="!props.canOperate"
              @click="emit('qrcode', table)"
            >
              二维码
            </Button>
            <Button
              size="small"
              type="text"
              :disabled="!props.canOperate"
              @click="emit('edit', table)"
            >
              编辑
            </Button>
            <Popconfirm
              title="确认删除该桌位吗？"
              ok-text="确认"
              cancel-text="取消"
              :disabled="!props.canOperate"
              @confirm="emit('delete', table.id)"
            >
              <Button
                size="small"
                type="text"
                danger
                :disabled="!props.canOperate"
                :loading="props.isSaving"
              >
                删除
              </Button>
            </Popconfirm>
          </div>
        </div>
      </div>
    </template>

    <Empty
      v-else
      :description="
        props.hasSelectedArea ? '当前区域暂无桌位' : '请先添加并选择区域'
      "
    />
  </Card>
</template>
