<script lang="ts" setup>
import { computed, ref } from 'vue';

import { useVbenDrawer } from '@vben/common-ui';

import { message } from 'ant-design-vue';

import { useVbenForm } from '#/adapter/form';
import { reviewBankCardWithdrawal } from '#/api/agent';

const emit = defineEmits<{
  (e: 'success'): void;
}>();

const formData = ref<any>(null);

const [Form, formApi] = useVbenForm({
  schema: [
    {
      component: 'Input',
      fieldName: 'withdraw_no',
      label: '提现单号',
      componentProps: {
        disabled: true,
      },
    },
    {
      component: 'InputNumber',
      fieldName: 'amount',
      label: '提现金额',
      componentProps: {
        disabled: true,
        min: 0,
        precision: 2,
        style: { width: '100%' },
        addonBefore: '¥',
      },
    },
    {
      component: 'InputNumber',
      fieldName: 'tax_amount',
      label: '扣税金额',
      componentProps: {
        disabled: true,
        min: 0,
        precision: 2,
        style: { width: '100%' },
        addonBefore: '¥',
      },
    },
    {
      component: 'InputNumber',
      fieldName: 'actual_amount',
      label: '实际转账金额',
      componentProps: {
        disabled: true,
        min: 0,
        precision: 2,
        style: { width: '100%' },
        addonBefore: '¥',
      },
    },
    {
      component: 'Input',
      fieldName: 'bank_card_no',
      label: '银行卡号',
      componentProps: {
        disabled: true,
      },
    },
    {
      component: 'Input',
      fieldName: 'bank_name',
      label: '开户支行',
      componentProps: {
        disabled: true,
      },
    },
    {
      component: 'Input',
      fieldName: 'payee_name',
      label: '收款人姓名',
      componentProps: {
        disabled: true,
      },
    },
    {
      component: 'RadioGroup',
      fieldName: 'action',
      label: '审核操作',
      defaultValue: 1,
      componentProps: {
        options: [
          { label: '确认提现', value: 1 },
          { label: '拒绝提现', value: 2 },
        ],
      },
      rules: 'required',
    },
    {
      component: 'Textarea',
      fieldName: 'remark',
      label: '备注',
      componentProps: {
        rows: 4,
        placeholder: '拒绝提现时，请填写拒绝原因',
        maxLength: 200,
        showCount: true,
        style: { width: '100%' },
      },
    },
  ],
  showDefaultActions: false,
});

const [Drawer, drawerApi] = useVbenDrawer({
  async onConfirm() {
    const { valid } = await formApi.validate();
    if (!valid) return;

    if (!formData.value?.id) {
      message.error('提现记录ID不存在');
      return;
    }

    const values = await formApi.getValues<{
      action: 1 | 2;
      remark: string;
    }>();

    // 验证拒绝时必须填写原因
    if (values.action === 2 && !values.remark?.trim()) {
      message.error('拒绝提现必须填写拒绝原因');
      return;
    }

    try {
      await reviewBankCardWithdrawal({
        action: values.action,
        remark: values.remark || '',
        withdrawal_id: formData.value.id,
      });
      message.success(values.action === 1 ? '确认提现成功' : '拒绝提现成功');
      drawerApi.close();
      emit('success');
    } catch (error: any) {
      message.error(error?.message || '操作失败');
    }
  },
  onOpenChange(isOpen) {
    if (isOpen) {
      const data = drawerApi.getData<any>();
      formApi.resetForm();
      if (data) {
        formData.value = data;
        // 设置表单初始值
        formApi.setValues({
          withdraw_no: data.withdraw_no || '',
          amount: data.amount || 0,
          tax_amount: data.tax_amount || 0,
          actual_amount: data.actual_amount || 0,
          bank_card_no: data.bank_card_no || '',
          bank_name: data.bank_name || '',
          payee_name: data.payee_name || '',
          action: 1, // 默认选择确认
          remark: '',
        });
      }
    }
  },
});

const getDrawerTitle = computed(() => {
  return `银行卡提现审核 ${formData.value?.withdraw_no || ''}`;
});
</script>

<template>
  <Drawer :title="getDrawerTitle" width="600">
    <Form />
  </Drawer>
</template>
