<script lang="ts" setup>
/**
 * 平台仓库列表：银行卡报备状态查询弹窗
 * 展示最新报备信息，支持同步易票联状态
 */
import { ref } from 'vue';

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

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

import {
  getDeliveryWarehouseBankCardDetail,
  syncDeliveryWarehouseBankCardStatus,
} from '#/views/system/delivery-warehouse-bank-card/api';

const warehouseId = ref(0);
const warehouseName = ref('');
const detail = ref<Record<string, any>>({});
const loading = ref(false);
const syncing = ref(false);
const gridApi = ref();

const reportStatusMap: Record<number, { text: string; color: string }> = {
  1: { text: '待审核', color: 'orange' },
  2: { text: '有效', color: 'green' },
  3: { text: '审核不通过', color: 'red' },
  4: { text: '无效', color: 'default' },
};

const bankAccountTypeMap: Record<number, string> = {
  1: '对公',
  2: '对私',
  5: '存折',
};

async function loadDetail() {
  if (!warehouseId.value) {
    return;
  }
  loading.value = true;
  try {
    detail.value =
      (await getDeliveryWarehouseBankCardDetail({
        warehouse_id: warehouseId.value,
      })) || {};
  } finally {
    loading.value = false;
  }
}

async function handleSyncStatus() {
  syncing.value = true;
  try {
    await syncDeliveryWarehouseBankCardStatus({
      warehouse_id: warehouseId.value,
    });
    message.success('状态已同步');
    await loadDetail();
    gridApi.value?.query?.() ?? gridApi.value?.reload?.();
  } finally {
    syncing.value = false;
  }
}

const [Modal, modalApi] = useVbenModal({
  fullscreenButton: false,
  draggable: true,
  showConfirmButton: false,
  onCancel() {
    modalApi.close();
  },
  onOpenChange(isOpen: boolean) {
    if (!isOpen) {
      return;
    }
    const data = modalApi.getData<Record<string, any>>() || {};
    warehouseId.value = Number(data.warehouse_id || data.values?.id || 0);
    warehouseName.value = data.warehouse_name || data.values?.name || '';
    gridApi.value = data.gridApi;
    loadDetail();
  },
});
</script>
<template>
  <Modal
    :title="`报备状态${warehouseName ? ` - ${warehouseName}` : ''}`"
    class="w-[480px]"
  >
    <Descriptions :column="1" bordered size="small" :loading="loading">
      <Descriptions.Item label="报备状态">
        <Tag
          v-if="detail.report_status"
          :color="reportStatusMap[detail.report_status]?.color"
        >
          {{
            detail.report_status_text ||
            reportStatusMap[detail.report_status]?.text ||
            '-'
          }}
        </Tag>
        <span v-else>未报备</span>
      </Descriptions.Item>
      <Descriptions.Item label="审核意见">
        {{ detail.audit_remarks || detail.report_status_msg || '-' }}
      </Descriptions.Item>
      <Descriptions.Item label="开户人">
        {{ detail.bank_user_name || '-' }}
      </Descriptions.Item>
      <Descriptions.Item label="银行卡号">
        {{ detail.bank_card_masked || detail.bank_card || '-' }}
      </Descriptions.Item>
      <Descriptions.Item label="开户行">
        {{ detail.bank_name || '-' }}
      </Descriptions.Item>
      <Descriptions.Item label="账户类型">
        {{ bankAccountTypeMap[detail.bank_account_type] || '-' }}
      </Descriptions.Item>
    </Descriptions>
    <div class="mt-4">
      <Button :loading="syncing" type="primary" @click="handleSyncStatus">
        查询/同步状态
      </Button>
    </div>
  </Modal>
</template>
