<script lang="ts" setup>
/**
 * 就诊人详情 Modal（患者视角）
 * 与 Drawer 内容一致：资料 + 挂号/处方/订单；会员管理、订单「就诊人」入口使用
 */
import { h, ref } from 'vue';

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

import {
  Avatar,
  Button,
  Descriptions,
  Empty,
  Spin,
  Table,
  Tabs,
  Tag,
  message,
} from 'ant-design-vue';

import SensitiveText from '#/components/sensitive-text/SensitiveText.vue';
import { resolveAvatarUrl } from '#/views/system/store-input/utils/inputUser';
import PrescriptionDetail from '#/views/doctor/doctor-reception/components/PrescriptionDetail.vue';
import OrderDetail from '#/views/business/order/product-order/components/detail.vue';

import {
  getUserPatientOrderListApi,
  getUserPatientPrescriptionListApi,
  getUserPatientProfileDetailApi,
  getUserPatientRegisterListApi,
} from './api';
import VisitTypeTag from './VisitTypeTag.vue';

defineOptions({ name: 'WxUserPatientDetailModal' });

const defaultAvatar = '/img/user-default-avatar.png';

const upId = ref(0);
const loading = ref(false);
const activeTab = ref('info');
const profile = ref<Record<string, any> | null>(null);

const registerList = ref<any[]>([]);
const prescriptionList = ref<any[]>([]);
const orderList = ref<any[]>([]);
const registerLoading = ref(false);
const prescriptionLoading = ref(false);
const orderLoading = ref(false);

const [PrescriptionDetailModal, PrescriptionDetailModalApi] = useVbenModal({
  connectedComponent: PrescriptionDetail,
});

const [OrderDetailModal, OrderDetailModalApi] = useVbenModal({
  connectedComponent: OrderDetail,
});

const [Modal, modalApi] = useVbenModal({
  footer: false,
  class: 'w-[760px]',
  onOpenChange(isOpen: boolean) {
    if (!isOpen) {
      profile.value = null;
      registerList.value = [];
      prescriptionList.value = [];
      orderList.value = [];
      return;
    }
    const data = modalApi.getData<{ upId?: number; patientName?: string }>();
    upId.value = Number(data?.upId || 0);
    activeTab.value = 'info';
    const name = String(data?.patientName || '').trim();
    modalApi.setState({ title: name ? `就诊人：${name}` : '就诊人详情' });
    if (upId.value > 0) {
      void loadDetail();
    }
  },
});

/** 解析头像 URL */
function avatarSrc(raw?: string) {
  const s = String(raw ?? '').trim();
  if (!s) return defaultAvatar;
  return resolveAvatarUrl(s) || defaultAvatar;
}

/** 既往/过敏/家族：0 无，否则展示 history */
function historyText(status?: number, history?: string) {
  if (Number(status) === 0) return '无';
  const t = String(history || '').trim();
  return t || '有';
}

/** 肝/肾功能：0 正常，异常时附带指标文案 */
function functionText(flag?: number, indexText?: string) {
  if (Number(flag) === 0) return '正常';
  const t = String(indexText || '').trim();
  return t ? `异常 · ${t}` : '异常';
}

async function loadDetail() {
  loading.value = true;
  try {
    profile.value = await getUserPatientProfileDetailApi(upId.value);
  } catch (e) {
    console.error(e);
    message.error('获取用户信息失败');
  } finally {
    loading.value = false;
  }
}

async function loadRegisterList() {
  registerLoading.value = true;
  try {
    const res = await getUserPatientRegisterListApi(upId.value);
    registerList.value = res?.items ?? [];
  } catch (e) {
    console.error(e);
    message.error('获取挂号记录失败');
  } finally {
    registerLoading.value = false;
  }
}

async function loadPrescriptionList() {
  prescriptionLoading.value = true;
  try {
    const res = await getUserPatientPrescriptionListApi(upId.value);
    prescriptionList.value = res?.items ?? [];
  } catch (e) {
    console.error(e);
    message.error('获取处方记录失败');
  } finally {
    prescriptionLoading.value = false;
  }
}

async function loadOrderList() {
  orderLoading.value = true;
  try {
    const res = await getUserPatientOrderListApi(upId.value);
    orderList.value = res?.items ?? [];
  } catch (e) {
    console.error(e);
    message.error('获取订单记录失败');
  } finally {
    orderLoading.value = false;
  }
}

/** Tab 切换时懒加载对应列表 */
function onTabChange(key: string | number) {
  const k = String(key);
  activeTab.value = k;
  if (k === 'register' && registerList.value.length === 0) {
    void loadRegisterList();
  } else if (k === 'prescription' && prescriptionList.value.length === 0) {
    void loadPrescriptionList();
  } else if (k === 'order' && orderList.value.length === 0) {
    void loadOrderList();
  }
}

function openPrescription(id: number) {
  PrescriptionDetailModalApi.setData({ values: id });
  PrescriptionDetailModalApi.open();
}

function openOrder(id: number) {
  OrderDetailModalApi.setData({ id });
  OrderDetailModalApi.open();
}

const registerColumns = [
  { title: '订单编号', dataIndex: 'order_no', key: 'order_no' },
  { title: '医生', dataIndex: 'doctor', key: 'doctor' },
  { title: '诊所', dataIndex: 'store', key: 'store' },
  {
    title: '费用',
    dataIndex: 'price',
    key: 'price',
    customRender: ({ text }: { text: number }) =>
      `¥${Number(text || 0).toFixed(2)}`,
  },
  {
    title: '支付',
    dataIndex: 'is_pay',
    key: 'is_pay',
    customRender: ({ text }: { text: number }) =>
      h(Tag, { color: text === 1 ? 'green' : 'red' }, () =>
        text === 1 ? '已支付' : '未支付',
      ),
  },
  { title: '状态', dataIndex: 'status_text', key: 'status_text' },
  { title: '创建时间', dataIndex: 'created_at', key: 'created_at' },
];

const prescriptionColumns = [
  {
    title: '处方编号',
    dataIndex: 'prescription_no',
    key: 'prescription_no',
    customRender: ({ text, record }: { text: string; record: any }) =>
      h(
        Button,
        { type: 'link', onClick: () => openPrescription(record.id) },
        () => text,
      ),
  },
  {
    title: '就诊类型',
    dataIndex: 'is_online',
    key: 'is_online',
    customRender: ({ text }: { text: number }) =>
      h(VisitTypeTag, { isOnline: text }),
  },
  { title: '医生', dataIndex: 'doctor', key: 'doctor' },
  { title: '诊所', dataIndex: 'store', key: 'store' },
  { title: '诊断', dataIndex: 'clinical_diagnose', key: 'clinical_diagnose' },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    customRender: ({ text }: { text: number }) => {
      const map: Record<number, string> = {
        0: '待审核',
        1: '已通过',
        2: '未通过',
        3: '无需审核',
      };
      return map[text] || '未知';
    },
  },
  { title: '创建时间', dataIndex: 'created_at', key: 'created_at' },
];

const orderColumns = [
  {
    title: '订单号',
    dataIndex: 'order_no',
    key: 'order_no',
    customRender: ({ text, record }: { text: string; record: any }) =>
      h(Button, { type: 'link', onClick: () => openOrder(record.id) }, () => text),
  },
  {
    title: '就诊类型',
    dataIndex: 'is_online',
    key: 'is_online',
    customRender: ({ text }: { text: number }) =>
      h(VisitTypeTag, { isOnline: text }),
  },
  { title: '医生', dataIndex: 'doctor', key: 'doctor' },
  { title: '诊所', dataIndex: 'store', key: 'store' },
  {
    title: '实付',
    dataIndex: 'total_pay_price',
    key: 'total_pay_price',
    customRender: ({ text }: { text: number }) =>
      `¥${Number(text || 0).toFixed(2)}`,
  },
  {
    title: '支付',
    dataIndex: 'is_pay',
    key: 'is_pay',
    customRender: ({ text }: { text: number }) =>
      h(Tag, { color: text === 1 ? 'green' : 'red' }, () =>
        text === 1 ? '已支付' : '未支付',
      ),
  },
  { title: '创建时间', dataIndex: 'created_at', key: 'created_at' },
];
</script>

<template>
  <Modal>
    <PrescriptionDetailModal />
    <OrderDetailModal />
    <Spin :spinning="loading">
      <template v-if="profile">
        <div class="mb-4 flex items-center gap-3 rounded-lg bg-gray-50 p-3 dark:bg-slate-800">
          <Avatar :size="48" :src="avatarSrc(profile.user?.avatarurl)" />
          <div class="min-w-0">
            <div class="text-sm font-medium">
              {{ profile.user?.nickname || '—' }}
            </div>
            <div class="text-xs text-gray-500">
              用户 ID：{{ profile.user?.id ?? '—' }}
            </div>
          </div>
        </div>
        <Tabs :active-key="activeTab" @change="onTabChange">
          <Tabs.TabPane key="info" tab="就诊人信息">
            <Descriptions :column="2" bordered size="small">
              <Descriptions.Item label="姓名">
                {{ profile.patient?.name || '—' }}
              </Descriptions.Item>
              <Descriptions.Item label="性别">
                {{
                  profile.patient?.sex === 1
                    ? '男'
                    : profile.patient?.sex === 2
                      ? '女'
                      : '—'
                }}
              </Descriptions.Item>
              <Descriptions.Item label="年龄">
                {{ profile.patient?.age ? `${profile.patient.age}岁` : '—' }}
              </Descriptions.Item>
              <Descriptions.Item label="手机号">
                <SensitiveText
                  v-if="profile.patient"
                  :record="profile.patient"
                  field="mobile"
                />
                <span v-else>—</span>
              </Descriptions.Item>
              <Descriptions.Item
                v-if="profile.patient?.id_card"
                label="身份证"
                :span="2"
              >
                <SensitiveText
                  :record="profile.patient"
                  field="id_card"
                />
              </Descriptions.Item>
            </Descriptions>
            <!-- 健康问诊 / 功能异常（与小程序资料 Tab 一致） -->
            <div class="mt-4">
              <div class="mb-2 text-sm font-medium text-gray-700">健康信息</div>
              <Descriptions
                v-if="profile.health_inquiry"
                :column="2"
                bordered
                size="small"
              >
                <Descriptions.Item label="现病史">
                  {{
                    historyText(
                      profile.health_inquiry.present_status,
                      profile.health_inquiry.present_history,
                    )
                  }}
                </Descriptions.Item>
                <Descriptions.Item label="既往史">
                  {{
                    historyText(
                      profile.health_inquiry.person_status,
                      profile.health_inquiry.person_history,
                    )
                  }}
                </Descriptions.Item>
                <Descriptions.Item label="过敏史">
                  <span
                    :class="
                      Number(profile.health_inquiry.allergic_status) !== 0
                        ? 'text-red-600 font-medium'
                        : ''
                    "
                  >
                    {{
                      historyText(
                        profile.health_inquiry.allergic_status,
                        profile.health_inquiry.allergic_history,
                      )
                    }}
                  </span>
                </Descriptions.Item>
                <Descriptions.Item label="家族遗传史">
                  {{
                    historyText(
                      profile.health_inquiry.family_status,
                      profile.health_inquiry.family_history,
                    )
                  }}
                </Descriptions.Item>
                <Descriptions.Item label="肝功能异常">
                  <span
                    :class="
                      Number(profile.health_inquiry.liver_function) !== 0
                        ? 'text-red-600 font-medium'
                        : ''
                    "
                  >
                    {{
                      functionText(
                        profile.health_inquiry.liver_function,
                        profile.health_inquiry.liver_index,
                      )
                    }}
                  </span>
                </Descriptions.Item>
                <Descriptions.Item label="肾功能异常" :span="2">
                  <span
                    :class="
                      Number(profile.health_inquiry.renal_function) !== 0
                        ? 'text-red-600 font-medium'
                        : ''
                    "
                  >
                    {{
                      functionText(
                        profile.health_inquiry.renal_function,
                        profile.health_inquiry.renal_index,
                      )
                    }}
                  </span>
                </Descriptions.Item>
              </Descriptions>
              <Empty v-else description="暂无健康问诊记录" />
            </div>
          </Tabs.TabPane>
          <Tabs.TabPane key="register" tab="挂号记录">
            <Spin :spinning="registerLoading">
              <Table
                v-if="registerList.length"
                :columns="registerColumns"
                :data-source="registerList"
                :pagination="false"
                row-key="id"
                size="small"
              />
              <Empty v-else description="暂无挂号记录" />
            </Spin>
          </Tabs.TabPane>
          <Tabs.TabPane key="prescription" tab="处方记录">
            <Spin :spinning="prescriptionLoading">
              <Table
                v-if="prescriptionList.length"
                :columns="prescriptionColumns"
                :data-source="prescriptionList"
                :pagination="false"
                row-key="id"
                size="small"
              />
              <Empty v-else description="暂无处方记录" />
            </Spin>
          </Tabs.TabPane>
          <Tabs.TabPane key="order" tab="订单记录">
            <Spin :spinning="orderLoading">
              <Table
                v-if="orderList.length"
                :columns="orderColumns"
                :data-source="orderList"
                :pagination="false"
                row-key="id"
                size="small"
              />
              <Empty v-else description="暂无订单记录" />
            </Spin>
          </Tabs.TabPane>
        </Tabs>
      </template>
      <Empty v-else-if="!loading" description="暂无数据" />
    </Spin>
  </Modal>
</template>
