<script lang="ts" setup>
/**
 * 审方卡片信息主体
 * 顶栏单号/标签；人物区医生/微信/就诊人同一行三列；底部时间区
 */
import { Avatar, Button } from 'ant-design-vue';

import {
  PrescriptionExpireTime,
  VisitTypeTag,
} from '#/components/wx-user-patient';
import { resolveAvatarUrl } from '#/views/system/store-input/utils/inputUser';

import DoctorAvatarCell from './DoctorAvatarCell.vue';
import MedicineTypeTag from './MedicineTypeTag.vue';

const props = defineProps<{
  row: Record<string, any>;
  /** 是否紧急（失效 ≤2h） */
  urgent?: boolean;
}>();

const emit = defineEmits<{
  openDoctor: [row: Record<string, any>];
  openPatient: [payload: { upId: number; patientName: string }];
}>();

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

function userAvatarSrc() {
  const raw = String(props.row?.user?.avatarurl ?? '').trim();
  if (!raw) return defaultAvatar;
  return resolveAvatarUrl(raw) || defaultAvatar;
}

function patientName() {
  return (
    props.row?.user_patient?.name ||
    props.row?.userPatient?.name ||
    '—'
  );
}

function patientUpId() {
  return Number(
    props.row?.user_patient?.id ??
      props.row?.userPatient?.id ??
      props.row?.up_id ??
      0,
  );
}

function openPatient() {
  const upId = patientUpId();
  if (!upId) return;
  emit('openPatient', { upId, patientName: patientName() });
}
</script>

<template>
  <div class="audit-card-body">
    <div class="mb-3 flex flex-wrap items-start justify-between gap-2">
      <div class="min-w-0">
        <div
          class="truncate text-sm font-semibold text-gray-900 dark:text-slate-100"
        >
          {{ row.prescription_no || '—' }}
        </div>
        <div class="mt-1 text-xs text-gray-500">
          {{ row.store?.name || '—' }}
        </div>
      </div>
      <div class="flex flex-shrink-0 flex-wrap gap-1">
        <VisitTypeTag :is-online="row.is_online" />
        <MedicineTypeTag :prescription-type="row.prescription_type" />
      </div>
    </div>
    <!-- 医生 / 微信用户 / 就诊人：同一行三列 -->
    <div
      class="mb-3 grid grid-cols-1 gap-3 sm:grid-cols-3 sm:divide-x sm:divide-gray-100 dark:sm:divide-slate-700"
    >
      <div class="min-w-0 sm:pr-3">
        <div class="mb-1 text-[11px] text-gray-400">医生</div>
        <DoctorAvatarCell :row="row" @open="emit('openDoctor', $event)" />
      </div>
      <div class="min-w-0 sm:px-3">
        <div class="mb-1 text-[11px] text-gray-400">微信用户</div>
        <div class="flex items-center gap-2 min-w-0">
          <Avatar :size="28" :src="userAvatarSrc()" class="shrink-0" />
          <div class="min-w-0 truncate text-xs">
            {{ row.user?.nickname || '—' }}
          </div>
        </div>
      </div>
      <div class="min-w-0 sm:pl-3">
        <div class="mb-1 text-[11px] text-gray-400">就诊人</div>
        <div class="flex items-center gap-2 min-w-0">
          <Avatar :size="28" :src="defaultAvatar" class="shrink-0" />
          <Button
            v-if="patientUpId()"
            class="!h-auto !px-0 !py-0 truncate"
            type="link"
            @click.stop="openPatient"
          >
            {{ patientName() }}
          </Button>
          <span v-else class="text-xs text-gray-400">—</span>
        </div>
      </div>
    </div>
    <div
      class="rounded-md px-2.5 py-2 text-xs"
      :class="
        urgent
          ? 'bg-red-50 text-red-700 dark:bg-red-950/40 dark:text-red-300'
          : 'bg-gray-50 text-gray-600 dark:bg-slate-800/80 dark:text-slate-300'
      "
    >
      <div class="flex justify-between gap-2">
        <span class="text-gray-400 dark:text-slate-500">创建</span>
        <span>{{ row.created_at || '—' }}</span>
      </div>
      <div class="mt-1 flex justify-between gap-2">
        <span class="text-gray-400 dark:text-slate-500">失效</span>
        <PrescriptionExpireTime :auto-expire-time="row.auto_expire_time" />
      </div>
    </div>
  </div>
</template>
