<template>
  <view :class="['detail-page', elderClass]">
    <Loading v-if="loading" text="加载中..." />
    <view v-else-if="!report" class="empty-wrap"><text class="empty-text">报告不存在</text></view>
    <template v-else>
      <view class="detail-card">
        <text class="detail-title">{{ report.report_type }}</text>
        <view class="detail-row">
          <text class="detail-label">报告日期</text>
          <text class="detail-value">{{ report.report_date }}</text>
        </view>
        <view v-if="report.doctor_interpretation" class="detail-row">
          <text class="detail-label">医生解读</text>
          <text class="detail-value">{{ report.doctor_interpretation }}</text>
        </view>
      </view>
      <view class="indicators-card">
        <text class="section-title">检查指标</text>
        <view v-for="item in indicators" :key="item.name" class="indicator-item">
          <view class="indicator-left">
            <text class="indicator-name">{{ item.name }}</text>
            <text class="indicator-value">{{ item.value }}{{ item.unit ? ` ${item.unit}` : '' }}</text>
          </view>
          <view class="indicator-right">
            <text v-if="item.reference_min != null && item.reference_max != null" class="indicator-ref">
              {{ item.reference_min }}~{{ item.reference_max }}
            </text>
            <text :class="['indicator-status', getStatusInfo(item.status).className]">
              {{ getStatusInfo(item.status).text }}
            </text>
          </view>
        </view>
      </view>
    </template>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getReportDetail, type LabReport } from '@/services/report'
import { useElderClass } from '@/composables/useElderClass'
import Loading from '@/components/Loading.vue'

interface IndicatorItem { name: string; value: number; unit?: string; reference_min?: number; reference_max?: number; status?: string }

const { elderClass } = useElderClass()
const report = ref<LabReport | null>(null)
const loading = ref(true)

const indicators = computed<IndicatorItem[]>(() => {
  if (!report.value?.indicators || typeof report.value.indicators !== 'object') return []
  return Object.entries(report.value.indicators).map(([name, val]) => ({ name, value: val.value, unit: val.unit, reference_min: val.reference_min, reference_max: val.reference_max, status: val.status }))
})

const getStatusInfo = (status?: string) => {
  if (status === 'high') return { text: '偏高', className: 'high' }
  if (status === 'low') return { text: '偏低', className: 'low' }
  return { text: '正常', className: 'normal' }
}

onLoad((query) => {
  const id = query?.id || ''
  const patientId = uni.getStorageSync('current_patient_id') || ''
  if (!id || !patientId) { loading.value = false; return }
  getReportDetail(patientId, id).then(data => { report.value = data }).catch(() => uni.showToast({ title: '加载失败', icon: 'none' })).finally(() => { loading.value = false })
})
</script>

<style lang="scss" scoped>
.detail-page { min-height: 100vh; background: $bg; padding: 24px; }
.empty-wrap { @include flex-center; padding: 120px 0; }
.empty-text { font-size: var(--tk-font-body); color: $tx3; }
.detail-card { @include card; margin-bottom: 16px; }
.detail-title { font-size: var(--tk-font-title); font-weight: 600; color: $tx; display: block; margin-bottom: 12px; }
.detail-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(0,0,0,0.04); }
.detail-row:last-child { border-bottom: none; }
.detail-label { font-size: var(--tk-font-cap); color: $tx3; }
.detail-value { font-size: var(--tk-font-body); color: $tx; flex: 1; text-align: right; }
.indicators-card { @include card; }
.section-title { font-size: var(--tk-font-body); font-weight: 500; color: $tx; margin-bottom: 12px; display: block; }
.indicator-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(0,0,0,0.04); }
.indicator-item:last-child { border-bottom: none; }
.indicator-left { flex: 1; }
.indicator-name { font-size: var(--tk-font-cap); color: $tx2; display: block; }
.indicator-value { font-size: var(--tk-font-body); color: $tx; display: block; margin-top: 2px; }
.indicator-right { text-align: right; flex-shrink: 0; }
.indicator-ref { font-size: var(--tk-font-micro); color: $tx3; display: block; }
.indicator-status { font-size: var(--tk-font-cap); display: block; margin-top: 2px; }
.indicator-status.high { color: $wrn; }
.indicator-status.low { color: $info; }
.indicator-status.normal { color: $acc; }
</style>
