<script setup lang="ts">
/**
 * 文件职责：堂食桌位批量生成弹窗。
 * 1. 展示批量参数并实时预览编号。
 * 2. 通过回调更新父级状态并提交。
 */
import type { DineInSeatsOption } from '#/views/store/dine-in/types';

import { Input, InputNumber, Modal, Select, Tag } from 'ant-design-vue';

interface Props {
  areaOptions: Array<{ label: string; value: string }>;
  form: {
    areaId: string;
    codePrefix: string;
    count: number;
    seats: number;
    startNumber: number;
  };
  isSaving: boolean;
  onSetAreaId: (value: string) => void;
  onSetCodePrefix: (value: string) => void;
  onSetCount: (value: number) => void;
  onSetSeats: (value: number) => void;
  onSetStartNumber: (value: number) => void;
  open: boolean;
  previewCodes: string[];
  seatsOptions: DineInSeatsOption[];
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (event: 'submit'): void;
  (event: 'update:open', value: boolean): void;
}>();

function readInputValue(event: Event) {
  const target = event.target as HTMLInputElement | null;
  return target?.value ?? '';
}

function readString(value: unknown) {
  if (typeof value === 'number' || typeof value === 'string')
    return String(value);
  return '';
}

function readNumber(value: unknown, fallback = 1) {
  const parsed = Number(value);
  return Number.isFinite(parsed) ? parsed : fallback;
}
</script>

<template>
  <Modal
    :open="props.open"
    title="批量生成桌位"
    :width="520"
    :confirm-loading="props.isSaving"
    ok-text="确认生成"
    cancel-text="取消"
    :mask-closable="true"
    wrap-class-name="dinein-batch-modal-wrap"
    @update:open="(value) => emit('update:open', value)"
    @ok="emit('submit')"
    @cancel="emit('update:open', false)"
  >
    <div class="batch-form-grid">
      <div class="batch-form-item full">
        <label>所属区域</label>
        <Select
          :value="props.form.areaId"
          :options="props.areaOptions"
          placeholder="请选择区域"
          @update:value="(value) => props.onSetAreaId(readString(value))"
        />
      </div>

      <div class="batch-form-item">
        <label>编号前缀</label>
        <Input
          :value="props.form.codePrefix"
          :maxlength="6"
          placeholder="如：A"
          @input="(event) => props.onSetCodePrefix(readInputValue(event))"
        />
      </div>

      <div class="batch-form-item">
        <label>起始编号</label>
        <InputNumber
          :value="props.form.startNumber"
          :min="1"
          :precision="0"
          :controls="false"
          class="batch-input-number"
          @update:value="
            (value) => props.onSetStartNumber(readNumber(value, 1))
          "
        />
      </div>

      <div class="batch-form-item">
        <label>生成数量</label>
        <InputNumber
          :value="props.form.count"
          :min="1"
          :max="50"
          :precision="0"
          :controls="false"
          class="batch-input-number"
          @update:value="(value) => props.onSetCount(readNumber(value, 1))"
        />
      </div>

      <div class="batch-form-item">
        <label>座位数</label>
        <Select
          :value="props.form.seats"
          :options="props.seatsOptions"
          @update:value="(value) => props.onSetSeats(readNumber(value, 4))"
        />
      </div>
    </div>

    <div class="batch-preview-wrap">
      <div class="batch-preview-title">预览：将生成以下桌位</div>
      <div class="batch-preview-tags">
        <Tag v-for="code in props.previewCodes" :key="code" color="processing">
          {{ code }}
        </Tag>
      </div>
    </div>
  </Modal>
</template>
