<script setup lang="ts">
/**
 * 文件职责：半径梯度编辑抽屉。
 * 1. 展示梯度表单字段。
 * 2. 通过回调更新父级状态并提交。
 */
import type { RadiusTierFormState } from '../types';

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

interface Props {
  colorPalette: string[];
  form: RadiusTierFormState;
  onSetColor: (value: string) => void;
  onSetDeliveryFee: (value: number) => void;
  onSetEtaMinutes: (value: number) => void;
  onSetMaxDistance: (value: number) => void;
  onSetMinDistance: (value: number) => void;
  onSetMinOrderAmount: (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="delivery-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="distance-range-row">
        <InputNumber
          :value="props.form.minDistance"
          :min="0"
          :precision="1"
          :step="0.5"
          :controls="false"
          class="drawer-input"
          @update:value="
            (value) =>
              props.onSetMinDistance(toNumber(value, props.form.minDistance))
          "
        />
        <span class="distance-separator">~</span>
        <InputNumber
          :value="props.form.maxDistance"
          :min="0"
          :precision="1"
          :step="0.5"
          :controls="false"
          class="drawer-input"
          @update:value="
            (value) =>
              props.onSetMaxDistance(toNumber(value, props.form.maxDistance))
          "
        />
        <span>km</span>
      </div>
    </div>

    <div class="drawer-form-grid">
      <div class="drawer-form-block">
        <label class="drawer-form-label required">配送费</label>
        <div class="drawer-input-with-unit">
          <InputNumber
            :value="props.form.deliveryFee"
            :min="0"
            :precision="2"
            :step="1"
            :controls="false"
            class="drawer-input"
            @update:value="
              (value) =>
                props.onSetDeliveryFee(toNumber(value, props.form.deliveryFee))
            "
          />
          <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.etaMinutes"
            :min="1"
            :precision="0"
            :step="1"
            :controls="false"
            class="drawer-input"
            @update:value="
              (value) =>
                props.onSetEtaMinutes(toNumber(value, props.form.etaMinutes))
            "
          />
          <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.minOrderAmount"
            :min="0"
            :precision="2"
            :step="1"
            :controls="false"
            class="drawer-input"
            @update:value="
              (value) =>
                props.onSetMinOrderAmount(
                  toNumber(value, props.form.minOrderAmount),
                )
            "
          />
          <span>元</span>
        </div>
      </div>
    </div>

    <div class="drawer-form-block">
      <label class="drawer-form-label">梯度颜色</label>
      <div class="color-palette">
        <button
          v-for="color in props.colorPalette"
          :key="color"
          type="button"
          class="color-dot"
          :class="{ active: props.form.color === color }"
          :style="{ background: color }"
          @click="props.onSetColor(color)"
        ></button>
      </div>
    </div>

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