<script setup lang="ts">
import { useVbenModal } from '@vben/common-ui';
import { message } from 'ant-design-vue';

import { useVbenForm } from '#/adapter/form';
import { addOrderReissueApi } from '#/api/core/log';

interface ModalData {
  Uid: number;
  AppId: number;
  ServerId: number;
  OrderId: string;
  PayChannelOrderId?: string;
}

const [Form, FormApi] = useVbenForm({
  commonConfig: {
    componentProps: {
      class: 'w-full',
    },
  },
  layout: 'horizontal',
  schema: [
    {
      component: 'Input',
      componentProps: {
        placeholder: '请输入第三方订单号',
      },
      fieldName: 'ThirdPartyOrderId',
      formItemClass: 'col-span-2',
      label: '第三方订单号',
      rules: 'required',
    },
    {
      component: 'Textarea',
      componentProps: {
        placeholder: '请填写补单原因',
        rows: 4,
      },
      fieldName: 'Reason',
      formItemClass: 'col-span-2',
      label: '补单理由',
      rules: 'required',
    },
  ],
  showDefaultActions: false,
  wrapperClass: 'grid-cols-2',
});

const [Modal, modalApi] = useVbenModal({
  confirmText: '提交审核',
  onOpened: async () => {
    const modalData = modalApi.getData<ModalData>();
    await FormApi.resetForm();
    await FormApi.setValues({
      Reason: '',
      ThirdPartyOrderId: modalData?.PayChannelOrderId || '',
    });
  },
  onConfirm: async () => {
    const values = await FormApi.getValues();
    const modalData = modalApi.getData<ModalData>();
    await addOrderReissueApi({
      AppId: modalData.AppId,
      OrderId: modalData.OrderId,
      Reason: values.Reason,
      ServerId: modalData.ServerId,
      ThirdPartyOrderId: values.ThirdPartyOrderId,
      Uid: modalData.Uid,
    });
    message.success('补单申请已提交审核');
    modalApi.close();
  },
});

defineOptions({
  name: 'OrderReissueModal',
});
</script>

<template>
  <Modal title="申请补单" :width="640">
    <Form />
  </Modal>
</template>