<script setup lang="ts">
/**
 * 文件职责：自提基本设置区块。
 * 1. 展示基础配置字段。
 * 2. 将字段更新与保存/重置事件抛给父级。
 */
import type { PickupBasicSettingsDto } from '#/api/store-pickup';

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

interface Props {
  isSaving: boolean;
  onSetAllowSameDayPickup: (value: boolean) => void;
  onSetBookingDays: (value: number) => void;
  onSetMaxItemsPerOrder: (value: null | number) => void;
  settings: PickupBasicSettingsDto;
}

const props = defineProps<Props>();

const emit = defineEmits<{
  (event: 'reset'): void;
  (event: 'save'): void;
}>();

function toNumber(value: null | number | string, fallback = 0) {
  const parsed = Number(value);
  return Number.isFinite(parsed) ? parsed : fallback;
}
</script>

<template>
  <Card :bordered="false" class="pickup-card">
    <template #title>
      <span class="section-title">基本设置</span>
    </template>

    <div class="pickup-form-row">
      <div class="pickup-label">允许当天自提</div>
      <div class="pickup-control">
        <Switch
          :checked="props.settings.allowSameDayPickup"
          @update:checked="
            (value) => props.onSetAllowSameDayPickup(Boolean(value))
          "
        />
        <span class="pickup-hint">开启后顾客可选择当天自提</span>
      </div>
    </div>

    <div class="pickup-form-row">
      <div class="pickup-label">可预约天数</div>
      <div class="pickup-control">
        <InputNumber
          :value="props.settings.bookingDays"
          :min="1"
          :precision="0"
          :controls="false"
          class="pickup-number-input"
          @update:value="(value) => props.onSetBookingDays(toNumber(value, 1))"
        />
        <span class="pickup-unit">天</span>
        <span class="pickup-hint">顾客可提前预约的天数</span>
      </div>
    </div>

    <div class="pickup-form-row">
      <div class="pickup-label">单笔最大数量</div>
      <div class="pickup-control">
        <InputNumber
          :value="props.settings.maxItemsPerOrder ?? undefined"
          :min="0"
          :precision="0"
          :controls="false"
          class="pickup-number-input"
          placeholder="留空不限制"
          @update:value="
            (value) =>
              props.onSetMaxItemsPerOrder(
                value === null || value === undefined
                  ? null
                  : toNumber(value, 0),
              )
          "
        />
        <span class="pickup-unit">件</span>
        <span class="pickup-hint">留空则不限制</span>
      </div>
    </div>

    <div class="pickup-form-actions">
      <Button :disabled="props.isSaving" @click="emit('reset')">重置</Button>
      <Button type="primary" :loading="props.isSaving" @click="emit('save')">
        保存设置
      </Button>
    </div>
  </Card>
</template>
