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

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

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

import { useVbenForm } from '#/adapter/form';

import {
  getDeliveryWarehouseBankCardDetail,
  reportDeliveryWarehouseBankCard,
  syncDeliveryWarehouseBankCardStatus,
} from './api';
import { reportFormProps } from './config/form';

const loading = ref(false);
const syncing = ref(false);
const detail = ref<Record<string, any>>({});

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: '存折',
};

const [Form, formApi] = useVbenForm(reportFormProps);

async function loadDetail() {
  loading.value = true;
  try {
    const res = await getDeliveryWarehouseBankCardDetail();
    detail.value = res || {};
    if (res) {
      formApi.setValues({
        id: res.id,
        warehouse_id: res.warehouse_id,
        bank_user_name: res.bank_user_name,
        bank_card: res.bank_card,
        bank_name: res.bank_name,
        bank_account_type: res.bank_account_type,
        bank_no: res.bank_no,
        cert_no: res.cert_no,
        attachment: res.attachment,
      });
    }
  } finally {
    loading.value = false;
  }
}

async function handleSubmit() {
  const result = await formApi.validate();
  if (!result.valid) {
    return;
  }
  const values = await formApi.getValues();
  loading.value = true;
  try {
    await reportDeliveryWarehouseBankCard(values);
    message.success('报备提交成功');
    await loadDetail();
  } finally {
    loading.value = false;
  }
}

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

onMounted(() => {
  loadDetail();
});
</script>

<template>
  <Page auto-content-height title="银行卡报备">
    <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
      <Card :loading="loading" title="当前报备状态">
        <Descriptions :column="1" bordered size="small">
          <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 || '-' }}
          </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>
      </Card>
      <Card :loading="loading" title="提交报备">
        <Form />
        <div class="mt-4">
          <Button :loading="loading" type="primary" @click="handleSubmit">
            提交报备
          </Button>
        </div>
      </Card>
    </div>
  </Page>
</template>
