<script lang="ts" setup>
/**
 * 处方溯源展示内容（对齐小程序药师溯源：就诊→开具→审核）
 * 由审方/业务处方两个 Modal 共用，避免双份漂移
 */
import { computed } from 'vue';

import { Timeline, TimelineItem } from 'ant-design-vue';

import {
  FileTextOutlined,
  MedicineBoxOutlined,
  ShopOutlined,
  UserOutlined,
} from '@ant-design/icons-vue';

const props = defineProps<{
  data: Record<string, any> | null;
}>();

const formatTime = (timestamp: unknown) => {
  if (!timestamp) return '--';
  if (typeof timestamp === 'string' && timestamp.includes('-')) return timestamp;
  const n = Number(timestamp);
  if (!n) return '--';
  return new Date(n * 1000).toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
  });
};

const prescriptionTypeMap: Record<number, string> = {
  1: '中药处方',
  2: '西药处方',
  3: '保健食品',
  5: '产品服务包',
  6: '非药品',
  7: '医疗器械',
};

const statusMap: Record<number, string> = {
  0: '待审核',
  1: '已通过',
  2: '已拒绝',
  3: '已过期',
};

const prescriptionTypeText = computed(() => {
  if (!props.data) return '--';
  return prescriptionTypeMap[props.data.prescription_type] || '未知';
});

const statusText = computed(() => {
  if (!props.data) return '--';
  return statusMap[props.data.status] || '未知';
});

const statusColor = computed(() => {
  if (!props.data) return 'gray';
  const map: Record<number, string> = {
    0: 'orange',
    1: 'green',
    2: 'red',
    3: 'gray',
  };
  return map[props.data.status] || 'gray';
});

const expireTime = computed(() =>
  props.data ? formatTime(props.data.auto_expire_time) : '--',
);

const patientSexText = computed(() => {
  const sex = props.data?.user_patient?.sex;
  if (sex === 1) return '男';
  if (sex === 2) return '女';
  return '--';
});

const doctorInfo = computed(
  () => props.data?.doctor_info || props.data?.doctorInfo || null,
);
const pharmacistInfo = computed(
  () => props.data?.pharmacist_info || props.data?.pharmacistInfo || null,
);
const userPatient = computed(
  () => props.data?.user_patient || props.data?.userPatient || null,
);
const registerInfo = computed(
  () => props.data?.register || null,
);
</script>

<template>
  <div v-if="data" class="prescription-source-container">
    <div class="mb-6 rounded-lg p-6 shadow-md">
      <div class="mb-4 flex items-center">
        <ShopOutlined class="mr-2 text-xl text-purple-500" />
        <h2 class="text-xl font-bold">开具机构</h2>
      </div>
      <div v-if="data.store" class="grid grid-cols-1 gap-4">
        <div class="info-item">
          <span class="label">机构名称:</span>
          <span class="value">{{ data.store.name }}</span>
        </div>
      </div>
      <div v-else class="italic text-gray-500">暂无机构信息</div>
    </div>

    <div class="mb-6 rounded-lg p-6 shadow-md">
      <div class="mb-4 flex items-center">
        <FileTextOutlined class="mr-2 text-xl text-blue-500" />
        <h2 class="text-xl font-bold">时间线</h2>
      </div>
      <Timeline>
        <TimelineItem>
          <div class="font-medium">就诊</div>
          <div class="text-sm text-gray-500">
            {{ formatTime(registerInfo?.created_at) }}
            · {{ userPatient?.name || '--' }}
          </div>
          <div class="mt-1 text-sm">
            性别：{{ patientSexText }} · 年龄：{{ userPatient?.age ?? '--' }}
          </div>
          <div v-if="data.clinical_diagnose" class="mt-1 text-sm">
            诊断：{{ data.clinical_diagnose }}
          </div>
        </TimelineItem>
        <TimelineItem>
          <div class="font-medium">开具</div>
          <div class="text-sm text-gray-500">{{ data.created_at || '--' }}</div>
          <div class="mt-1 text-sm">
            医生：{{ doctorInfo?.name || '--' }} · 科室：{{
              doctorInfo?.depart?.name || '--'
            }}
          </div>
          <div class="mt-1 text-sm">
            处方编号：{{ data.prescription_no }} · 类型：{{ prescriptionTypeText }}
          </div>
        </TimelineItem>
        <TimelineItem>
          <div class="font-medium">审核</div>
          <div class="text-sm text-gray-500">
            {{ data.pharmacist_view_time || '--' }}
          </div>
          <div class="mt-1 text-sm">
            状态：
            <span :class="`text-${statusColor}-500`">{{ statusText }}</span>
            · 药师：{{ pharmacistInfo?.name || '--' }}
          </div>
          <div v-if="data.reject_reason" class="mt-1 text-sm text-red-500">
            驳回原因：{{ data.reject_reason }}
          </div>
          <div
            v-else-if="data.cancel_remark && Number(data.status) === 2"
            class="mt-1 text-sm text-red-500"
          >
            驳回原因：{{ data.cancel_remark }}
          </div>
        </TimelineItem>
      </Timeline>
    </div>

    <div class="mb-6 rounded-lg p-6 shadow-md">
      <div class="mb-4 flex items-center">
        <FileTextOutlined class="mr-2 text-xl text-blue-500" />
        <h2 class="text-xl font-bold">处方基本信息</h2>
      </div>
      <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
        <div class="info-item">
          <span class="label">处方编号:</span>
          <span class="value">{{ data.prescription_no }}</span>
        </div>
        <div class="info-item">
          <span class="label">处方类型:</span>
          <span class="value">{{ prescriptionTypeText }}</span>
        </div>
        <div class="info-item">
          <span class="label">处方状态:</span>
          <span :class="`text-${statusColor}-500`" class="value">{{
            statusText
          }}</span>
        </div>
        <div class="info-item">
          <span class="label">总金额:</span>
          <span class="value font-bold text-red-500"
            >¥{{ data.total_pay_price }}</span
          >
        </div>
        <div class="info-item">
          <span class="label">过期时间:</span>
          <span class="value">{{ expireTime }}</span>
        </div>
        <div v-if="data.reject_reason" class="info-item">
          <span class="label">驳回原因:</span>
          <span class="value text-red-500">{{ data.reject_reason }}</span>
        </div>
      </div>
    </div>

    <div class="mb-6 rounded-lg p-6 shadow-md">
      <div class="mb-4 flex items-center">
        <MedicineBoxOutlined class="mr-2 text-xl text-green-500" />
        <h2 class="text-xl font-bold">医生信息</h2>
      </div>
      <div v-if="doctorInfo" class="grid grid-cols-1 gap-4 md:grid-cols-2">
        <div class="info-item">
          <span class="label">开具医生:</span>
          <span class="value">{{ doctorInfo.name }}</span>
        </div>
        <div class="info-item">
          <span class="label">开具科室:</span>
          <span class="value">{{ doctorInfo.depart?.name || '--' }}</span>
        </div>
        <div class="info-item">
          <span class="label">开具机构:</span>
          <span class="value">{{ data.store?.name || '--' }}</span>
        </div>
        <div class="info-item">
          <span class="label">开具时间:</span>
          <span class="value">{{ data.created_at || '--' }}</span>
        </div>
      </div>
      <div v-else class="italic text-gray-500">暂无医生信息</div>
    </div>

    <div class="rounded-lg p-6 shadow-md">
      <div class="mb-4 flex items-center">
        <UserOutlined class="mr-2 text-xl text-amber-500" />
        <h2 class="text-xl font-bold">患者信息</h2>
      </div>
      <div
        v-if="userPatient"
        class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3"
      >
        <div class="info-item">
          <span class="label">患者姓名:</span>
          <span class="value">{{ userPatient.name }}</span>
        </div>
        <div class="info-item">
          <span class="label">年龄:</span>
          <span class="value">{{ userPatient.age }}岁</span>
        </div>
        <div class="info-item">
          <span class="label">性别:</span>
          <span class="value">{{ patientSexText }}</span>
        </div>
      </div>
      <div v-else class="italic text-gray-500">暂无患者信息</div>
    </div>
  </div>
  <div v-else class="flex h-64 items-center justify-center">
    <div
      class="h-12 w-12 animate-spin rounded-full border-b-2 border-t-2 border-blue-500"
    ></div>
  </div>
</template>

<style lang="scss" scoped>
.prescription-source-container {
  @apply max-h-[70vh] overflow-auto p-4;
}
.info-item {
  @apply flex flex-col rounded-md p-3;
}
.label {
  @apply mb-1 text-sm text-gray-500;
}
.value {
  @apply font-medium;
}
</style>
