<script lang="ts" setup>
/**
 * 接诊台顶部患者简要信息条
 * 上方居中展示诊所名 + 处方类型；下方展示门诊号/日期/费别/姓名等
 * 诊断只在处方/病历编辑区一处维护
 */
import { computed } from 'vue';

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

import SensitiveText from '#/components/sensitive-text/SensitiveText.vue';
import { formatStoreNameWithHu } from '#/utils/formatStoreNameWithHu';

defineOptions({ name: 'PatientBriefBar' });

const props = withDefaults(
  defineProps<{
    /** 挂号订单（含 order_no、created_at） */
    register?: Record<string, any> | null;
    /** 就诊人 */
    patient?: Record<string, any> | null;
    /** 当前费别：1 自费 2 医保 */
    category?: number;
    /** 诊所名称（优先；也可从 register.store.name 兜底） */
    storeName?: string;
    /**
     * 是否在线复诊开方
     * false/0：门诊普通处方笺；true/1/2/3：在线处方
     */
    isOnline?: boolean | number;
  }>(),
  {
    register: null,
    patient: null,
    category: 1,
    storeName: '',
    isOnline: false,
  },
);

const onlineFlag = computed(() => {
  if (props.isOnline === true) return 1;
  if (props.isOnline === false) return 0;
  const fromProp = Number(props.isOnline);
  if (fromProp > 0) return fromProp;
  // 挂号单上可能带 is_online
  return Number(props.register?.is_online || 0);
});

/** 居中诊所名：在线渠道按既有规则追加（互） */
const displayStoreName = computed(() => {
  const raw =
    String(props.storeName || '').trim() ||
    String(props.register?.store?.name || props.register?.store_name || '').trim();
  return formatStoreNameWithHu(raw, onlineFlag.value) || '诊所';
});

/** 处方类型标题：线下普通 / 线上复诊 */
const prescriptionTypeTitle = computed(() => {
  const online = onlineFlag.value;
  if (online === 1 || online === 2 || online === 3) {
    return '在线处方';
  }
  return '门诊普通处方笺';
});

const sexText = computed(() => {
  const sex = Number(props.patient?.sex || 0);
  if (sex === 1) return '男';
  if (sex === 2) return '女';
  return '未填';
});

const categoryText = computed(() => {
  return Number(props.category) === 2 ? '医保' : '自费';
});

const visitDate = computed(() => {
  const raw = props.register?.created_at;
  if (!raw) return '—';
  // 后端查询器已格式化为字符串时直接展示
  if (typeof raw === 'string') return raw;
  if (typeof raw === 'number' && raw > 0) {
    const d = new Date(raw * 1000);
    const pad = (n: number) => String(n).padStart(2, '0');
    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
  }
  return '—';
});
</script>

<template>
  <div class="patient-brief-bar">
    <!-- 居中抬头：诊所名 + 处方类型 -->
    <div class="brief-header">
      <div class="brief-clinic">{{ displayStoreName }}</div>
      <div class="brief-rx-type">{{ prescriptionTypeTitle }}</div>
    </div>
    <div class="brief-meta">
      <div class="brief-item">
        <span class="brief-label">门诊号</span>
        <span class="brief-value">{{ register?.order_no || '—' }}</span>
      </div>
      <div class="brief-item">
        <span class="brief-label">日期</span>
        <span class="brief-value">{{ visitDate }}</span>
      </div>
      <div class="brief-item">
        <span class="brief-label">费别</span>
        <Tag :color="Number(category) === 2 ? 'blue' : 'default'" class="m-0">
          {{ categoryText }}
        </Tag>
      </div>
      <div class="brief-item">
        <span class="brief-label">姓名</span>
        <span class="brief-value brief-name">{{ patient?.name || '—' }}</span>
      </div>
      <div class="brief-item">
        <span class="brief-label">性别</span>
        <span class="brief-value">{{ sexText }}</span>
      </div>
      <div class="brief-item">
        <span class="brief-label">年龄</span>
        <span class="brief-value">{{ patient?.age ?? '—' }}</span>
      </div>
      <div class="brief-item">
        <span class="brief-label">手机</span>
        <span class="brief-value">
          <SensitiveText
            :record="patient"
            field="mobile"
            :show-eye="false"
          />
        </span>
      </div>
    </div>
  </div>
</template>

<style scoped>
.patient-brief-bar {
  padding: 10px 14px 12px;
  margin-bottom: 12px;
  background: hsl(var(--muted) / 0.35);
  border: 1px solid hsl(var(--border));
  border-radius: 8px;
}
.brief-header {
  text-align: center;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid hsl(var(--border) / 0.7);
}
.brief-clinic {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: hsl(var(--foreground));
  letter-spacing: 0.02em;
}
.brief-rx-type {
  margin-top: 2px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: hsl(var(--foreground));
  letter-spacing: 0.06em;
}
.brief-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
}
.brief-item {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-width: 0;
  font-size: 13px;
  line-height: 1.4;
}
.brief-label {
  flex-shrink: 0;
  color: hsl(var(--muted-foreground));
}
.brief-value {
  color: hsl(var(--foreground));
  word-break: break-all;
}
.brief-name {
  font-weight: 600;
}
</style>
