<script lang="ts" setup>
/**
 * 提现审核通过/拒绝弹窗
 * 打开时拉取申请详情预览金额与手续费，再填备注提交
 */
import { ref } from 'vue';

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

import { message, Spin, Tag } from 'ant-design-vue';

import { useVbenForm } from '#/adapter/form';
import {
  passApplicationApi,
  refuseApplicationApi,
} from '#/views/finance/withdrawal-audit/api';
import { getWithdrawalApplicationInfo } from '#/views/finance/withdrawal/api';

import { withdrawalAudit } from '../config/form';

const gridApi = ref();
/** 0=通过 1=拒绝（与页面传入 modalType 一致） */
const type = ref(0);
const loading = ref(false);
const preview = ref<Record<string, any> | null>(null);

const [WithdrawalAuditForm, WithdrawalAuditFormApi] =
  useVbenForm(withdrawalAudit);

const [Modal, modalApi] = useVbenModal({
  fullscreenButton: false,
  draggable: true,
  onCancel() {
    modalApi.close();
  },
  onConfirm: async () => {
    const formApi = WithdrawalAuditFormApi;
    const e = await formApi.validate();
    if (!e.valid) return;
    const values = await formApi.getValues();
    modalApi.lock();
    const submitApi =
      type.value === 1 ? refuseApplicationApi : passApplicationApi;
    try {
      await submitApi(values);
      message.success('保存成功');
      gridApi.value?.reload();
      modalApi.close();
    } finally {
      modalApi.unlock();
    }
  },
  async onOpenChange(isOpen: boolean) {
    gridApi.value = isOpen ? modalApi.getData()?.gridApi : null;
    if (!isOpen) {
      preview.value = null;
      return;
    }
    const { id, modalType } = modalApi.getData<Record<string, any>>();
    type.value = modalType;
    WithdrawalAuditFormApi.setValues({ id, reason: '' });
    loading.value = true;
    try {
      // 审核前预览真实手续费（来自代付关联 display_charge_cash）
      preview.value = await getWithdrawalApplicationInfo(id);
    } finally {
      loading.value = false;
    }
  },
});

function formatMoney(val: any) {
  const n = Number(val || 0);
  return Number.isFinite(n) ? n.toFixed(2) : '0.00';
}
</script>

<template>
  <Modal
    :title="`提现审核【${type === 1 ? '拒绝' : '通过'}】`"
    class="w-[80%] md:w-[50%] lg:w-[36%]"
  >
    <Spin :spinning="loading">
      <div v-if="preview" class="audit-preview">
        <div class="preview-row">
          <span class="label">申请主体</span>
          <span class="value">
            <Tag color="green">{{ preview.user_type_txt || '-' }}</Tag>
            {{
              preview.store?.name ||
              preview.supplier?.name ||
              preview.delivery_warehouse?.name ||
              preview.deliveryWarehouse?.name ||
              (Number(preview.user_type) === 2 ? '萧康云医' : '-')
            }}
          </span>
        </div>
        <div class="preview-row">
          <span class="label">订单号</span>
          <span class="value mono">{{ preview.order_no || '-' }}</span>
        </div>
        <div class="preview-row">
          <span class="label">申请金额</span>
          <span class="value">¥{{ formatMoney(preview.apply_cash) }}</span>
        </div>
        <div class="preview-row">
          <span class="label">打款金额</span>
          <span class="value">¥{{ formatMoney(preview.true_cash) }}</span>
        </div>
        <div class="preview-row">
          <span class="label">代付手续费</span>
          <span class="value fee">
            ¥{{ formatMoney(preview.display_charge_cash) }}
            <Tag v-if="preview.charge_status_txt" class="ml-2" color="processing">
              {{ preview.charge_status_txt }}
            </Tag>
          </span>
        </div>
      </div>
      <WithdrawalAuditForm />
    </Spin>
  </Modal>
</template>

<style scoped lang="scss">
.audit-preview {
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid hsl(var(--border));
  border-radius: 10px;
  background: hsl(var(--muted) / 0.25);
}

.preview-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  font-size: 13px;

  &:last-child {
    margin-bottom: 0;
  }
}

.label {
  flex-shrink: 0;
  color: hsl(var(--muted-foreground));
}

.value {
  text-align: right;
  color: hsl(var(--foreground));
  word-break: break-all;
}

.value.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.value.fee {
  font-weight: 600;
  color: hsl(var(--primary));
}

.ml-2 {
  margin-left: 8px;
}
</style>
