<script setup lang="ts">
import type { StoredCardPlanEditorForm } from '../types';

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

import { resolveGiftRatioText } from '../composables/stored-card-page/helpers';

defineProps<{
  canManage: boolean;
  form: StoredCardPlanEditorForm;
  loading: boolean;
  open: boolean;
  submitText: string;
  submitting: boolean;
  title: string;
}>();

const emit = defineEmits<{
  (event: 'close'): void;
  (event: 'setGiftAmount', value: null | number): void;
  (event: 'setRechargeAmount', value: null | number): void;
  (event: 'setSortOrder', value: null | number): void;
  (event: 'setStatus', value: 'disabled' | 'enabled'): 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 setStatusByChecked(checked: any) {
  emit('setStatus', checked === true ? 'enabled' : 'disabled');
}
</script>

<template>
  <Drawer
    :open="open"
    :title="title"
    width="480"
    class="msc-plan-drawer"
    @close="emit('close')"
  >
    <Form layout="vertical" class="msc-plan-form">
      <Form.Item label="充值金额" required>
        <InputNumber
          :value="form.rechargeAmount ?? undefined"
          :min="0.01"
          :precision="2"
          :disabled="!canManage || loading"
          style="width: 100%"
          placeholder="如：100"
          @update:value="
            (value) => emit('setRechargeAmount', parseNullableNumber(value))
          "
        />
      </Form.Item>

      <Form.Item label="赠送金额" required>
        <InputNumber
          :value="form.giftAmount ?? undefined"
          :min="0"
          :precision="2"
          :disabled="!canManage || loading"
          style="width: 100%"
          placeholder="如：10"
          @update:value="
            (value) => emit('setGiftAmount', parseNullableNumber(value))
          "
        />
        <div class="msc-ratio-hint">
          {{ resolveGiftRatioText(form.rechargeAmount, form.giftAmount) }}
        </div>
      </Form.Item>

      <Form.Item label="排序">
        <InputNumber
          :value="form.sortOrder ?? undefined"
          :min="0"
          :precision="0"
          :disabled="!canManage || loading"
          style="width: 180px"
          placeholder="数字越小越靠前，如：1"
          @update:value="
            (value) => emit('setSortOrder', parseNullableNumber(value))
          "
        />
        <div class="msc-form-hint">数字越小排序越靠前</div>
      </Form.Item>

      <Form.Item label="启用状态">
        <div class="msc-status-row">
          <Switch
            :checked="form.status === 'enabled'"
            :disabled="!canManage || loading"
            @change="setStatusByChecked"
          />
          <span class="msc-status-text">启用后会员可选择此方案充值</span>
        </div>
      </Form.Item>
    </Form>

    <template #footer>
      <div class="msc-drawer-footer">
        <button type="button" class="g-btn" @click="emit('close')">取消</button>
        <button
          type="button"
          class="g-btn g-btn-primary"
          :disabled="!canManage || loading || submitting"
          @click="emit('submit')"
        >
          {{ submitText }}
        </button>
      </div>
    </template>
  </Drawer>
</template>
