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

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

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

import { getPatientCallLogDetail } 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 getPatientCallLogDetail(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="就诊人ID">{{ data.up_id }}</Descriptions.Item>
      <Descriptions.Item label="电话">{{ data.phone }}</Descriptions.Item>
      <Descriptions.Item label="拨打角色">{{ data.caller_role_txt }}</Descriptions.Item>
      <Descriptions.Item label="门店ID">{{ data.store_id }}</Descriptions.Item>
      <Descriptions.Item label="结果">{{ data.result_txt }}</Descriptions.Item>
      <Descriptions.Item label="标签">{{ data.tags || '-' }}</Descriptions.Item>
      <Descriptions.Item label="结论">{{ data.conclusion || '-' }}</Descriptions.Item>
      <Descriptions.Item label="备注">{{ data.remark || '-' }}</Descriptions.Item>
      <Descriptions.Item label="拨号时间">{{ data.call_at }}</Descriptions.Item>
      <Descriptions.Item label="下次回访">{{ data.next_at || '-' }}</Descriptions.Item>
    </Descriptions>
  </Modal>
</template>
