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

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

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

import { getIdcardVerifyLogDetail } from '../api';

const data = ref<Record<string, any>>({});

const [Modal, modalApi] = useVbenModal({
  showConfirmButton: false,
  cancelText: '关闭',
  draggable: true,
  onCancel() {
    modalApi.close();
  },
  async onOpenChange(isOpen) {
    if (!isOpen) {
      data.value = {};
      return;
    }
    const payload = modalApi.getData<{ id?: number; values?: any }>();
    const id = Number(payload?.id || payload?.values?.id || 0);
    if (id <= 0) {
      data.value = payload?.values || {};
      return;
    }
    modalApi.setState({ loading: true });
    try {
      const res = await getIdcardVerifyLogDetail(id);
      data.value = res?.data || res || {};
    } catch {
      data.value = payload?.values || {};
    } finally {
      modalApi.setState({ loading: false });
    }
  },
});
</script>

<template>
  <Modal class="w-[90%] md:w-[640px]" title="身份核验日志详情">
    <Descriptions bordered :column="1" size="small">
      <Descriptions.Item label="ID">{{ data.id }}</Descriptions.Item>
      <Descriptions.Item label="姓名摘要">{{ data.name || '-' }}</Descriptions.Item>
      <Descriptions.Item label="结论">
        <Tag :color="Number(data.is_match) === 1 ? 'success' : 'error'">
          {{ data.is_match_txt }}
        </Tag>
      </Descriptions.Item>
      <Descriptions.Item label="场景">{{ data.scene_txt }}</Descriptions.Item>
      <Descriptions.Item label="来源">{{ data.source_txt }}</Descriptions.Item>
      <Descriptions.Item label="接口码">{{ data.code }}</Descriptions.Item>
      <Descriptions.Item label="消息">{{ data.message }}</Descriptions.Item>
      <Descriptions.Item label="时间">{{ data.created_at }}</Descriptions.Item>
    </Descriptions>
  </Modal>
</template>
