<script setup lang="ts">
/**
 * 文件职责：阶梯包装费编辑抽屉。
 * 1. 展示阶梯区间与费用输入项。
 * 2. 通过回调更新父级表单并触发提交。
 */
import type { PackagingFeeTierFormState } from '#/views/store/fees/types';

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

interface Props {
  canOperate: boolean;
  form: PackagingFeeTierFormState;
  isSaving: boolean;
  onSetFee: (value: number) => void;
  onSetMaxAmount: (value: null | number) => void;
  onSetMinAmount: (value: number) => void;
  open: boolean;
  title: string;
}

const props = defineProps<Props>();

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

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

<template>
  <Drawer
    class="fees-tier-drawer-wrap"
    :open="props.open"
    :title="props.title"
    :width="460"
    :mask-closable="true"
    @update:open="(value) => emit('update:open', value)"
  >
    <div class="drawer-form-block">
      <label class="drawer-form-label required">订单金额区间</label>
      <div class="drawer-range-row">
        <InputNumber
          :value="props.form.minAmount"
          :min="0"
          :precision="2"
          :step="1"
          :controls="false"
          :disabled="!props.canOperate"
          class="drawer-input"
          placeholder="起始金额"
          @update:value="
            (value) =>
              props.onSetMinAmount(toNumber(value, props.form.minAmount))
          "
        />
        <span class="drawer-range-separator">~</span>
        <InputNumber
          :value="props.form.maxAmount ?? undefined"
          :min="0"
          :precision="2"
          :step="1"
          :controls="false"
          :disabled="!props.canOperate"
          class="drawer-input"
          placeholder="结束金额（留空表示无上限）"
          @update:value="
            (value) =>
              props.onSetMaxAmount(
                value === null || value === undefined
                  ? null
                  : toNumber(
                      value,
                      props.form.maxAmount ?? props.form.minAmount,
                    ),
              )
          "
        />
        <span>元</span>
      </div>
    </div>

    <div class="drawer-form-block">
      <label class="drawer-form-label required">包装费</label>
      <div class="drawer-input-with-unit">
        <InputNumber
          :value="props.form.fee"
          :min="0"
          :precision="2"
          :step="0.5"
          :controls="false"
          :disabled="!props.canOperate"
          class="drawer-input"
          placeholder="如：2.00"
          @update:value="
            (value) => props.onSetFee(toNumber(value, props.form.fee))
          "
        />
        <span>元</span>
      </div>
    </div>

    <template #footer>
      <div class="drawer-footer">
        <Button
          :disabled="props.isSaving || !props.canOperate"
          @click="emit('update:open', false)"
        >
          取消
        </Button>
        <Button
          type="primary"
          :loading="props.isSaving"
          :disabled="!props.canOperate"
          @click="emit('submit')"
        >
          {{ props.form.id ? '保存修改' : '新增并保存' }}
        </Button>
      </div>
    </template>
  </Drawer>
</template>
