<template>
    <div class="user-detail">
        <el-descriptions title="患者信息">
            <el-descriptions-item label="姓名">{{ userInfo.username }}</el-descriptions-item>
            <el-descriptions-item label="性别">{{ userInfo.sex === 1 ? '男' : '女' }}</el-descriptions-item>
            <el-descriptions-item label="年龄">{{ userInfo.age }}</el-descriptions-item>
            <el-descriptions-item label="账号">{{ userInfo.mobile }} </el-descriptions-item>
            <el-descriptions-item label="胆道闭锁手术时间">{{ userInfo.operative_date }} </el-descriptions-item>
            <el-descriptions-item label="术后时长">{{ userInfo.postoperative_duration }} </el-descriptions-item>
            <el-descriptions-item label="当前风险">
                <el-tag v-if="userInfo.risk_type === 1" type="success">低危</el-tag>
                <el-tag v-if="userInfo.risk_type === 2" type="warning">中危</el-tag>
                <el-tag v-if="userInfo.risk_type === 3" type="danger">高危</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="生长曲线">
                <el-tag v-if="userInfo.growth_curve_type === 0" type="">未知</el-tag>
                <el-tag v-if="userInfo.growth_curve_type === 1" type="warning">轻度偏高</el-tag>
                <el-tag v-if="userInfo.growth_curve_type === 2" type="success">正常</el-tag>
                <el-tag v-if="userInfo.growth_curve_type === 3" type="danger">重度偏高</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="下次随访时间">{{ userInfo.next_follow_date }} </el-descriptions-item>
        </el-descriptions>

        <div class="title">
            <h2>随访记录</h2>
        </div>
        <div class="table">
            <el-table :data="tableData" style="width: 100%" v-loading="isLoading">
                <el-table-column prop="follow_name" label="随访周期" />
                <el-table-column prop="follow_date" label="随访日期" />
                <el-table-column prop="follow_hospital" label="随访医院" />
                <el-table-column label="操作" width="100">
                    <template #default="scope">
                        <el-link type="primary" @click="handleCheck(scope.row)" size="small">查看问卷</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="title">
            <h2>身高曲线</h2>
        </div>
        <div class="echats" v-loading="isLoading">
            <myEchartsSh v-if="!isLoading" ref="heightEcharts" id="heightEcharts"
                :legendData="['实际身高', '正常身高范围']"
                :actual-height="chatData.height"
                :normal-height-min="[70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81]"
                :normal-height-max="[80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91]" :label="'身高'" />
        </div>
        <div class="title">
            <h2>体重曲线</h2>
        </div>
        <div class="echats" v-loading="isLoading">
            <myEchartsSh v-if="!isLoading" ref="weightEcharts" id="weightEcharts"
            :legendData="['实际体重', '正常体重范围']"
                :actual-height="chatData.weight"
                :normal-height-min="[70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81]"
                :normal-height-max="[80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91]" :label="'体重'" />
        </div>
        <div class="title">
            <h2>总胆红素趋势</h2>
        </div>
        <div class="echats" v-loading="isLoading">
            <myEcharts v-if="!isLoading" ref="totalBilirubinEcharts" id="totalBilirubinEcharts"
                :dataX="chatData.totalBilirubin" :label="'总胆红素'" />
        </div>
        <div class="title">
            <h2>直接胆红素趋势</h2>
        </div>
        <div class="echats" v-loading="isLoading">
            <myEcharts v-if="!isLoading" ref="directBilirubinEcharts" id="directBilirubinEcharts"
                :dataX="chatData.directBilirubin" :label="'直接胆红素'" />
        </div>
        <el-dialog v-model="dialogVisible" title="" width="850px">
            <div style="padding-left: 20px;">
                <el-descriptions title="随访记录" :column="3">
                    <el-descriptions-item label="随访名称">{{ sfData.follow_name }}</el-descriptions-item>
                    <el-descriptions-item label="随访医院">{{ sfData.follow_hospital }}</el-descriptions-item>
                    <el-descriptions-item label="随访日期">{{ sfData.follow_date }}</el-descriptions-item>

                    <el-descriptions-item label="身高(CM)">{{ sfData.height }}</el-descriptions-item>
                    <el-descriptions-item label="体重(KG)">{{ sfData.weight }}</el-descriptions-item>
                    <el-descriptions-item label="头围(CM)">{{ sfData.head_circumference }}</el-descriptions-item>
                    <el-descriptions-item label="上臀围(CM)">{{ sfData.high_hip }}</el-descriptions-item>

                    <el-descriptions-item label="总胆红素(µmol/L)">{{ sfData.total_bilirubin }}</el-descriptions-item>
                    <el-descriptions-item label="直接胆红素(µmol/L)">{{ sfData.direct_bilirubin }}</el-descriptions-item>
                    <el-descriptions-item label="总胆汁酸(g/L)">{{ sfData.total_bile_acid }}</el-descriptions-item>
                    <el-descriptions-item label="谷丙（U/L）">{{ sfData.gu_bing }}</el-descriptions-item>
                    <el-descriptions-item label="谷草（U/L）">{{ sfData.grain_grass }}</el-descriptions-item>
                    <el-descriptions-item label="GGT（U/L）">{{ sfData.ggt }}</el-descriptions-item>
                    <el-descriptions-item label="ALP（U/L）">{{ sfData.alp }}</el-descriptions-item>
                    <el-descriptions-item label="白蛋白（g/L）">{{ sfData.albumin }}</el-descriptions-item>

                    <el-descriptions-item label="白细胞 (10^9/L)">{{ sfData.white_blood_cells }}</el-descriptions-item>
                    <el-descriptions-item label="血红蛋白 (g/L)">{{ sfData.hemoglobin }}</el-descriptions-item>
                    <el-descriptions-item label="血小板（10^9/L)">{{ sfData.platelets }}</el-descriptions-item>

                    <el-descriptions-item label="凝血酶原时间（s）">{{ sfData.prothrombin_time }}</el-descriptions-item>
                    <el-descriptions-item label="活化的部分凝血酶时间（s）">{{ sfData.activated_partial_thrombin_time
                        }}</el-descriptions-item>
                    <el-descriptions-item label="国际标准化比">{{ sfData.international_normalized_ratio
                        }}</el-descriptions-item>

                    <el-descriptions-item label="肝肋下(mm)">{{ sfData.under_the_liver_rib }}</el-descriptions-item>
                    <el-descriptions-item label="肝剑突下(mm)">{{ sfData.under_the_xiphoid_liver }}</el-descriptions-item>
                    <el-descriptions-item label="脾肋下(mm)">{{ sfData.spleen_rib_area }}</el-descriptions-item>
                    <el-descriptions-item label="门静脉主干(mm)">{{ sfData.main_portal_vein }}</el-descriptions-item>
                    <el-descriptions-item label="门静脉流速">{{ sfData.pvv }}</el-descriptions-item>
                    <el-descriptions-item label="肝弹性值">{{ sfData.liver_elasticity_value }}</el-descriptions-item>
                    <el-descriptions-item label="有无腹水">{{ sfData.is_have_ascites === 1 ? '是' :
                        '否' }}</el-descriptions-item>
                    <el-descriptions-item label="有无肝囊肿">{{ sfData.is_have_cyst === 1 ? '是' : '否'
                        }}</el-descriptions-item>

                    <el-descriptions-item label="维生素A (ng/ml)">{{ sfData.vitamin_a }}</el-descriptions-item>
                    <el-descriptions-item label="维生素E (ng/ml)">{{ sfData.vitamin_e }}</el-descriptions-item>
                    <el-descriptions-item label="维生素K (ng/ml)">{{ sfData.vitamin_k }}</el-descriptions-item>
                    <el-descriptions-item label="25（OH）D3 (ng/ml)">{{ sfData.oh_d3 }}</el-descriptions-item>
                </el-descriptions>

                <el-descriptions title="检查报告" :column="1">
                    <el-descriptions-item label="B超报告">
                        <el-image v-for="(url, index) in sfData.b_mode_image?.split(',')" :key="index" :src="url"
                            :preview-src-list="sfData.b_mode_image?.split(',')"
                            style="width: 100px; height: 100px; margin-right: 10px" />
                    </el-descriptions-item>
                    <el-descriptions-item label="血常规检查报告">
                        <el-image v-for="(url, index) in sfData.blood_routine_image?.split(',')" :key="index" :src="url"
                            :preview-src-list="sfData.blood_routine_image?.split(',')"
                            style="width: 100px; height: 100px; margin-right: 10px" />
                    </el-descriptions-item>
                    <el-descriptions-item label="凝血功能检查报告">
                        <el-image v-for="(url, index) in sfData.coagulation_function_image?.split(',')" :key="index"
                            :src="url" :preview-src-list="sfData.coagulation_function_image?.split(',')"
                            style="width: 100px; height: 100px; margin-right: 10px" />
                    </el-descriptions-item>
                    <el-descriptions-item label="肝功能检查报告">
                        <el-image v-for="(url, index) in sfData.liver_function_image?.split(',')" :key="index"
                            :src="url" :preview-src-list="sfData.liver_function_image?.split(',')"
                            style="width: 100px; height: 100px; margin-right: 10px" />
                    </el-descriptions-item>
                    <el-descriptions-item label="营养指标检查报告">
                        <el-image v-for="(url, index) in sfData.nutritional_indicator_image?.split(',')" :key="index"
                            :src="url" :preview-src-list="sfData.nutritional_indicator_image?.split(',')"
                            style="width: 100px; height: 100px; margin-right: 10px" />
                    </el-descriptions-item>
                    <el-descriptions-item label="MDT电子病历">
                        <el-image v-for="(url, index) in sfData.mdt_image?.split(',')" :key="index" :src="url"
                            :preview-src-list="sfData.mdt_image?.split(',')"
                            style="width: 100px; height: 100px; margin-right: 10px" />
                    </el-descriptions-item>
                </el-descriptions>
            </div>
            <template v-slot:footer>
                <el-button type="primary" @click="dialogVisible = false">确认</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { exportUsersBasic, questionnaires, chat, questionnaire_info } from '@/api/user'
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import myEcharts from '@/components/myEcahts.vue'
import myEchartsSh from '@/components/myEcahtsSh.vue'
const route = useRoute()
const id = ref('')
const tableData = ref([])
const userInfo = ref({})
const isLoading = ref(true)

const chatData = ref({
    height: [],
    weight: [],
    totalBilirubin: [],
    directBilirubin: []
})
const getTableData = async () => {
    try {
        isLoading.value = true
        const [basicRes, questionnairesRes, chatRes] = await Promise.all([
            exportUsersBasic(id.value),
            questionnaires(id.value),
            chat(id.value)
        ])

        userInfo.value = basicRes
        tableData.value = questionnairesRes.list

        chatData.value = {
            height: [],
            weight: [],
            totalBilirubin: [],
            directBilirubin: []
        }

        chatRes.list.forEach(item => {
            chatData.value.height.push(item.height)
            chatData.value.weight.push(item.weight)
            chatData.value.totalBilirubin.push(item.total_bilirubin)
            chatData.value.directBilirubin.push(item.direct_bilirubin)
        })
    } catch (error) {
        console.error('Error fetching data:', error)
    } finally {
        isLoading.value = false
    }
}

const dialogVisible = ref(false)
const sfData = ref({})
const handleCheck = async (row) => {
    const res = await questionnaire_info({ questionnaire_id: row.id, patient_id: Number(id.value) })
    sfData.value = res
    dialogVisible.value = true
}
onMounted(() => {
    id.value = route.query.id
    getTableData()
})
</script>

<style scoped>
.user-detail {
    height: 100%;
    overflow-y: auto;
}

.title {
    color: var(--el-text-color-primary);
    font-size: 16px;
    font-weight: bold;
    margin-top: 30px;
    margin-bottom: 10px;
}

.echats {
    height: 400px;
}

.el-image {
    vertical-align: top;
}
</style>