<script setup lang="ts">
/**
 * 文件职责：新客有礼券添加抽屉。
 * 1. 提供券类型、门槛、有效期编辑能力。
 */
import type { NewCustomerCouponDrawerForm } from '../types';

import type {
  MarketingNewCustomerCouponScene,
  MarketingNewCustomerCouponType,
} from '#/api/marketing';

import { IconifyIcon } from '@vben/icons';

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

import {
  NEW_CUSTOMER_COUPON_SCENE_TITLE_MAP,
  NEW_CUSTOMER_COUPON_TYPE_OPTIONS,
} from '../composables/new-customer-page/constants';

defineProps<{
  form: NewCustomerCouponDrawerForm;
  open: boolean;
  scene: MarketingNewCustomerCouponScene;
}>();

const emit = defineEmits<{
  (event: 'close'): void;
  (event: 'setCouponType', value: MarketingNewCustomerCouponType): void;
  (event: 'setMinimumSpend', value: null | number): void;
  (event: 'setValidDays', value: null | number): void;
  (event: 'setValue', value: null | number): void;
  (event: 'submit'): void;
}>();

function parseNullableNumber(value: null | number | string) {
  if (value === null || value === undefined || value === '') {
    return null;
  }
  const parsed = Number(value);
  return Number.isNaN(parsed) ? null : parsed;
}

function onCouponTypeChange(value: unknown) {
  if (
    value === 'amount_off' ||
    value === 'discount' ||
    value === 'free_shipping'
  ) {
    emit('setCouponType', value);
  }
}
</script>

<template>
  <Drawer
    :open="open"
    :title="`添加优惠券 · ${NEW_CUSTOMER_COUPON_SCENE_TITLE_MAP[scene]}`"
    width="480"
    class="mnc-coupon-drawer"
    @close="emit('close')"
  >
    <Form layout="vertical" class="mnc-coupon-drawer-form">
      <Form.Item label="券类型" required>
        <Radio.Group
          :value="form.couponType"
          button-style="solid"
          @update:value="onCouponTypeChange"
        >
          <Radio.Button
            v-for="item in NEW_CUSTOMER_COUPON_TYPE_OPTIONS"
            :key="item.value"
            :value="item.value"
          >
            {{ item.label }}
          </Radio.Button>
        </Radio.Group>
      </Form.Item>

      <Form.Item
        v-if="form.couponType === 'amount_off'"
        label="减免金额"
        required
      >
        <div class="mnc-inline-fields">
          <span>¥</span>
          <InputNumber
            :value="form.value ?? undefined"
            :min="0.01"
            :precision="2"
            placeholder="如：5"
            @update:value="
              (value) => emit('setValue', parseNullableNumber(value))
            "
          />
        </div>
      </Form.Item>

      <Form.Item v-if="form.couponType === 'discount'" label="折扣" required>
        <div class="mnc-inline-fields">
          <InputNumber
            :value="form.value ?? undefined"
            :min="0.1"
            :max="9.99"
            :precision="2"
            placeholder="如：8"
            @update:value="
              (value) => emit('setValue', parseNullableNumber(value))
            "
          />
          <span>折</span>
        </div>
      </Form.Item>

      <Form.Item v-if="form.couponType === 'free_shipping'" label="券说明">
        <div class="mnc-shipping-tip">
          <IconifyIcon icon="lucide:truck" />
          免配送费券无需设置面额
        </div>
      </Form.Item>

      <Form.Item label="使用门槛">
        <div class="mnc-inline-fields">
          <span>订单满</span>
          <InputNumber
            :value="form.minimumSpend ?? undefined"
            :min="0"
            :precision="2"
            placeholder="如：30"
            @update:value="
              (value) => emit('setMinimumSpend', parseNullableNumber(value))
            "
          />
          <span>元可用</span>
        </div>
        <div class="mnc-field-hint">留空或填 0 表示无门槛</div>
      </Form.Item>

      <Form.Item label="有效期" required>
        <div class="mnc-inline-fields">
          <span>领取后</span>
          <InputNumber
            :value="form.validDays"
            :min="1"
            :max="365"
            :precision="0"
            placeholder="如：7"
            @update:value="
              (value) => emit('setValidDays', parseNullableNumber(value))
            "
          />
          <span>天</span>
        </div>
      </Form.Item>
    </Form>

    <template #footer>
      <div class="mnc-coupon-drawer-footer">
        <Button @click="emit('close')">取消</Button>
        <Button type="primary" @click="emit('submit')">添加</Button>
      </div>
    </template>
  </Drawer>
</template>
