<template>
  <a-modal
    v-model:visible="visible"
    title="修正金额"
    @before-ok="handleOk"
    @cancel="formData.actualAmount = 0"
  >
    <a-form ref="formRef" :model="formData">
      <a-form-item label="订单号">
        {{ props.record?.orderNo }}
      </a-form-item>
      <a-form-item label="卡片金额" disabled>
        {{ props.record?.cardAmount }}
      </a-form-item>
      <a-form-item field="actualAmount" label="实际金额">
        <a-input-number
          v-model="formData.actualAmount"
          :precision="2"
          placeholder="请输入实际金额"
        />
      </a-form-item>
      <a-form-item field="totpCode" label="二次验证">
        <a-verification-code v-model="formData.totpCode" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import {
  AppleCardRechargeOrderRecord,
  modityActualAmountAPI
} from '@/api/apple-card-recharge-history';
import type { FormInstance } from '@arco-design/web-vue';
import { reactive, ref } from 'vue';

const props = defineProps<{
  orderNo: string;
  record?: AppleCardRechargeOrderRecord;
}>();
const formData = reactive({
  actualAmount: 0,
  totpCode: ''
});
const formRef = ref<FormInstance>();
const visible = defineModel<boolean>('visible', {
  type: Boolean,
  default: false
});

const handleOk = async (): Promise<boolean> => {
  try {
    const res = await formRef.value?.validate();
    if (res) return false;
    await modityActualAmountAPI({
      orderNo: props.orderNo,
      actualAmount: formData.actualAmount,
      totpCode: formData.totpCode
    });
    visible.value = false;
    return true;
  } catch (error) {
    return false;
  }
};
</script>
