<template>
    <div class="detail-popup">
        <popup
            ref="popupRef"
            title="诊单详情"
            width="800px"
            :show-confirm="false"
            :z-index="1500"
        >
            <el-descriptions :column="2" border>
                <el-descriptions-item label="患者ID">
                    {{ detail.patient_id }}
                </el-descriptions-item>
                <el-descriptions-item label="患者姓名">
                    {{ detail.patient_name }}
                </el-descriptions-item>
                <el-descriptions-item label="性别">
                    {{ detail.gender_desc }}
                </el-descriptions-item>
                <el-descriptions-item label="年龄">
                    {{ detail.age }}岁
                </el-descriptions-item>
                <el-descriptions-item label="诊断日期">
                    {{ detail.diagnosis_date_text }}
                </el-descriptions-item>
                <el-descriptions-item label="诊断类型">
                    {{ detail.diagnosis_type }}
                </el-descriptions-item>
                <el-descriptions-item label="证型" :span="2">
                    {{ detail.syndrome_type }}
                </el-descriptions-item>
                <el-descriptions-item label="既往史" :span="2">
                    <el-tag
                        v-for="item in pastHistoryList"
                        :key="item"
                        class="mr-2"
                        type="info"
                    >
                        {{ item }}
                    </el-tag>
                    <span v-if="!pastHistoryList.length">无</span>
                </el-descriptions-item>
                
                <!-- 其他病史 -->
                <el-descriptions-item label="外伤史">
                    {{ detail.trauma_history ? '有' : '无' }}
                </el-descriptions-item>
                <el-descriptions-item label="手术史">
                    {{ detail.surgery_history ? '有' : '无' }}
                </el-descriptions-item>
                <el-descriptions-item label="过敏史">
                    {{ detail.allergy_history ? '有' : '无' }}
                </el-descriptions-item>
                <el-descriptions-item label="家族病史">
                    {{ detail.family_history ? '有' : '无' }}
                </el-descriptions-item>
                <el-descriptions-item label="妊娠哺乳史" :span="2">
                    {{ detail.pregnancy_history ? '有' : '无' }}
                </el-descriptions-item>
                
                <!-- 舌苔照片 -->
                <el-descriptions-item label="舌苔照片" :span="2">
                    <div v-if="detail.tongue_images && detail.tongue_images.length" class="flex gap-2">
                        <el-image
                            v-for="(img, index) in detail.tongue_images"
                            :key="index"
                            :src="img"
                            :preview-src-list="detail.tongue_images"
                            style="width: 100px; height: 100px"
                            fit="cover"
                        />
                    </div>
                    <span v-else>暂无</span>
                </el-descriptions-item>
                
                <!-- 检查报告 -->
                <el-descriptions-item label="检查报告" :span="2">
                    <div v-if="detail.report_files && detail.report_files.length" class="flex flex-wrap gap-2">
                        <el-image
                            v-for="(file, index) in detail.report_files"
                            :key="index"
                            :src="file"
                            :preview-src-list="detail.report_files"
                            style="width: 100px; height: 100px"
                            fit="cover"
                        />
                    </div>
                    <span v-else>暂无</span>
                </el-descriptions-item>
                
                <el-descriptions-item label="症状" :span="2">
                    {{ detail.symptoms || '无' }}
                </el-descriptions-item>
                <el-descriptions-item label="舌苔">
                    {{ detail.tongue_coating || '无' }}
                </el-descriptions-item>
                <el-descriptions-item label="脉象">
                    {{ detail.pulse || '无' }}
                </el-descriptions-item>
                <el-descriptions-item label="治则" :span="2">
                    {{ detail.treatment_principle || '无' }}
                </el-descriptions-item>
                <el-descriptions-item label="处方" :span="2">
                    <div style="white-space: pre-wrap">{{ detail.prescription || '无' }}</div>
                </el-descriptions-item>
                <el-descriptions-item label="医嘱" :span="2">
                    <div style="white-space: pre-wrap">{{ detail.doctor_advice || '无' }}</div>
                </el-descriptions-item>
                <el-descriptions-item label="备注" :span="2">
                    {{ detail.remark || '无' }}
                </el-descriptions-item>
                <el-descriptions-item label="状态">
                    <el-tag v-if="detail.status == 1" type="success">启用</el-tag>
                    <el-tag v-else type="danger">禁用</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="创建时间">
                    {{ detail.create_time }}
                </el-descriptions-item>
            </el-descriptions>
        </popup>
    </div>
</template>

<script setup lang="ts">
import { tcmDiagnosisDetail } from '@/api/tcm'
import { getDictData } from '@/api/app'

const popupRef = ref()
const detail = ref<any>({})

// 获取字典选项
const pastHistoryOptions = ref<any[]>([])

const getDictOptions = async () => {
    try {
        const pastHistory = await getDictData({ type: 'past_history' })
        pastHistoryOptions.value = pastHistory?.past_history || []
    } catch (error) {
        console.error('获取字典数据失败:', error)
    }
}

// 既往史显示列表
const pastHistoryList = computed(() => {
    if (!detail.value.past_history || !detail.value.past_history.length) {
        return []
    }
    return detail.value.past_history.map((value: string) => {
        const option = pastHistoryOptions.value.find((item: any) => item.value === value)
        return option ? option.name : value
    })
})

const open = async (id: number) => {
    popupRef.value.open()
    await getDictOptions()
    detail.value = await tcmDiagnosisDetail({ id })
}

defineExpose({
    open
})
</script>

<style lang="scss" scoped></style>
