<script setup lang="ts">
/**
 * 文件职责：其他费用设置卡片。
 * 1. 展示餐具费、加急费开关与金额输入。
 * 2. 通过回调上抛字段更新，保存/重置由父级处理。
 */
import { Button, Card, InputNumber, Switch } from 'ant-design-vue';

interface Props {
  canOperate: boolean;
  cutleryAmount: number;
  cutleryEnabled: boolean;
  isSaving: boolean;
  onSetCutleryAmount: (value: number) => void;
  onSetCutleryEnabled: (value: boolean) => void;
  onSetRushAmount: (value: number) => void;
  onSetRushEnabled: (value: boolean) => void;
  rushAmount: number;
  rushEnabled: boolean;
}

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="fees-card">
    <template #title>
      <span class="section-title">其他费用</span>
      <span class="section-sub-title">可选，按需开启</span>
    </template>

    <div class="other-fee-row">
      <Switch
        :checked="props.cutleryEnabled"
        :disabled="!props.canOperate"
        @update:checked="(value) => props.onSetCutleryEnabled(Boolean(value))"
      />
      <div class="other-fee-meta">
        <div class="other-fee-name">餐具费</div>
        <div class="other-fee-hint">
          向顾客收取一次性餐具费用，顾客可选择不需要餐具
        </div>
      </div>
      <div class="other-fee-input-row">
        <span class="fees-unit">¥</span>
        <InputNumber
          :value="props.cutleryAmount"
          :min="0"
          :precision="2"
          :step="0.5"
          :controls="false"
          :disabled="!props.cutleryEnabled || !props.canOperate"
          class="other-fee-input"
          placeholder="如：1.00"
          @update:value="
            (value) =>
              props.onSetCutleryAmount(toNumber(value, props.cutleryAmount))
          "
        />
      </div>
    </div>

    <div class="other-fee-row">
      <Switch
        :checked="props.rushEnabled"
        :disabled="!props.canOperate"
        @update:checked="(value) => props.onSetRushEnabled(Boolean(value))"
      />
      <div class="other-fee-meta">
        <div class="other-fee-name">加急费</div>
        <div class="other-fee-hint">顾客选择加急配送时额外收取的费用</div>
      </div>
      <div class="other-fee-input-row">
        <span class="fees-unit">¥</span>
        <InputNumber
          :value="props.rushAmount"
          :min="0"
          :precision="2"
          :step="0.5"
          :controls="false"
          :disabled="!props.rushEnabled || !props.canOperate"
          class="other-fee-input"
          placeholder="如：3.00"
          @update:value="
            (value) => props.onSetRushAmount(toNumber(value, props.rushAmount))
          "
        />
      </div>
    </div>

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