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

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

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

import { getHyTransitRecordDetail } from '../api';
import { hasErrorTextClass } from '../utils';

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

const payloadText = computed(() => {
  const raw = data.value.payload_json;
  if (!raw) return '';
  try {
    return JSON.stringify(JSON.parse(raw), null, 2);
  } catch {
    return String(raw);
  }
});

const responseText = computed(() => {
  const raw = data.value.response_body;
  if (!raw) return '';
  try {
    return JSON.stringify(JSON.parse(raw), null, 2);
  } catch {
    return String(raw);
  }
});

const [Modal, modalApi] = useVbenModal({
  fullscreenButton: true,
  draggable: true,
  onCancel() {
    modalApi.close();
  },
  onConfirm() {
    modalApi.close();
  },
  onOpenChange: async (isOpen: boolean) => {
    if (!isOpen) return;
    const id = modalApi.getData()?.id;
    if (!id) return;
    loading.value = true;
    try {
      data.value = (await getHyTransitRecordDetail({ id })) ?? {};
    } finally {
      loading.value = false;
    }
  },
});
</script>

<template>
  <Modal class="w-[80%] h-[80%]" title="监管回调详情">
    <Spin :spinning="loading">
      <Descriptions bordered :column="2" class="mb-4">
        <Descriptions.Item label="记录ID">{{ data.id }}</Descriptions.Item>
        <Descriptions.Item label="批次ID">{{ data.batch_id }}</Descriptions.Item>
        <Descriptions.Item label="监管类型">{{ data.step_txt || data.step_label || data.step }}</Descriptions.Item>
        <Descriptions.Item label="业务ID">{{ data.buss_id }}</Descriptions.Item>
        <Descriptions.Item label="挂号ID">{{ data.register_id || '-' }}</Descriptions.Item>
        <Descriptions.Item label="处方ID">{{ data.prescription_id || '-' }}</Descriptions.Item>
        <Descriptions.Item label="订单ID">{{ data.order_id || '-' }}</Descriptions.Item>
        <Descriptions.Item label="处方编号">{{ data.prescription_no || '-' }}</Descriptions.Item>
        <Descriptions.Item label="患者">{{ data.patient_name || '-' }}</Descriptions.Item>
        <Descriptions.Item label="文件ID">{{ data.recipe_file_id || '-' }}</Descriptions.Item>
        <Descriptions.Item label="接口">{{ data.service_method }}</Descriptions.Item>
        <Descriptions.Item label="上报状态">{{ data.push_status_txt || data.push_status_label || data.push_status }}</Descriptions.Item>
        <Descriptions.Item label="回调状态">{{ data.callback_status_txt || data.callback_status_label || data.callback_status }}</Descriptions.Item>
        <Descriptions.Item label="HTTP">{{ data.http_code }}</Descriptions.Item>
        <Descriptions.Item label="msgCode">{{ data.msg_code }}</Descriptions.Item>
        <Descriptions.Item label="trace_id" :span="2">{{ data.trace_id }}</Descriptions.Item>
        <Descriptions.Item label="校验错误" :span="2">
          <span
            :class="
              hasErrorTextClass(
                (data.validation_errors_label || data.validation_errors || []).join('、'),
              )
            "
          >
            {{ (data.validation_errors_label || data.validation_errors || []).join('、') || '-' }}
          </span>
        </Descriptions.Item>
        <Descriptions.Item label="错误摘要" :span="2">
          <span :class="hasErrorTextClass(data.error_summary || data.error_message)">
            {{ data.error_summary || data.error_message || '-' }}
          </span>
        </Descriptions.Item>
      </Descriptions>
      <div class="mb-2 font-medium">组包数据 payload_json</div>
      <pre
        class=" rounded border bg-muted p-3 text-xs dark:bg-[#020817] dark:text-gray-200"
      >{{ payloadText }}</pre>
      <div class="mb-2 mt-4 font-medium">监管响应 response_body</div>
      <pre
        class=" rounded border bg-muted p-3 text-xs dark:bg-[#020817] dark:text-gray-200"
      >{{ responseText }}</pre>
    </Spin>
  </Modal>
</template>
