<script setup lang="ts">
/**
 * 文件职责：堂食区域管理区块。
 * 1. 展示区域 pills 与当前区域说明。
 * 2. 抛出区域新增、编辑、删除与切换事件。
 */
import type { DineInAreaDto } from '#/api/store-dinein';

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

interface Props {
  canOperate: boolean;
  getAreaTableCount: (areaId: string) => number;
  isSaving: boolean;
  selectedArea?: DineInAreaDto;
  selectedAreaId: string;
  areas: DineInAreaDto[];
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (event: 'add'): void;
  (event: 'delete', area: DineInAreaDto): void;
  (event: 'edit', area: DineInAreaDto): void;
  (event: 'selectArea', areaId: string): void;
}>();
</script>

<template>
  <Card :bordered="false" class="dinein-card">
    <template #title>
      <span class="section-title">区域管理</span>
    </template>
    <template #extra>
      <Button
        type="primary"
        size="small"
        :disabled="!props.canOperate"
        @click="emit('add')"
      >
        添加区域
      </Button>
    </template>

    <template v-if="props.areas.length > 0">
      <div class="dinein-area-pills">
        <button
          v-for="area in props.areas"
          :key="area.id"
          type="button"
          class="dinein-area-pill"
          :class="{ active: props.selectedAreaId === area.id }"
          :disabled="!props.canOperate"
          @click="emit('selectArea', area.id)"
        >
          {{ area.name }} ({{ props.getAreaTableCount(area.id) }}桌)
        </button>
      </div>

      <div v-if="props.selectedArea" class="dinein-area-info">
        <span class="dinein-area-description">
          {{ props.selectedArea.name }} -
          {{ props.selectedArea.description || '暂无描述' }}
        </span>
        <div class="dinein-area-actions">
          <Button
            type="link"
            size="small"
            :disabled="!props.canOperate"
            @click="emit('edit', props.selectedArea)"
          >
            编辑
          </Button>
          <Popconfirm
            title="确认删除该区域吗？"
            ok-text="确认"
            cancel-text="取消"
            :disabled="!props.canOperate"
            @confirm="emit('delete', props.selectedArea)"
          >
            <Button
              type="link"
              danger
              size="small"
              :disabled="!props.canOperate"
              :loading="props.isSaving"
            >
              删除
            </Button>
          </Popconfirm>
        </div>
      </div>
    </template>

    <Empty v-else description="暂无区域，请先添加" />
  </Card>
</template>
