<template>
    <div class="p-2">
        <el-button type="primary" plain size="large" @click="goBack">返回</el-button>
        <el-card shadow="never" class="mt-4">
            <el-form label-width="100px" class="mb-4">
                <el-row :gutter="20">
                    <el-col :span="16">
                        <el-form-item label="模板名称：">
                            <div class="form-text">{{ templateDetail.templateName }}</div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="16">
                        <el-form-item label="模板描述：">
                            <div class="form-text">{{ templateDetail.description }}</div>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="类型：">
                            <div class="form-text">{{ getTemplateTypeName(templateDetail.templateTypeId) }}</div>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <div class="content-section">
                <div class="section-title">正文：</div>
                <div class="template-content" v-html="templateDetail.content"></div>
            </div>
<!-- 
            <div class="content-section">
                <div class="section-title">变量说明</div>
                <el-table :data="variableList" border stripe>
                    <el-table-column prop="name" label="变量名" min-width="200"/>
                    <el-table-column prop="description" label="说明" min-width="150"/>
                    <el-table-column prop="example" label="示例值" min-width="150"/>
                </el-table>
            </div> -->
        </el-card>
    </div>
</template>

<script setup lang="ts">
    import { ref, onMounted } from 'vue';
    import { useRouter, useRoute } from 'vue-router';
    import { getResultTemplate } from '@/api/parameter/basicPublicTemplate/consultantResultTemplate';
    import { ResultTemplateVO } from '@/api/parameter/basicPublicTemplate/consultantResultTemplate/types';
    import { listResultTemplateType } from '@/api/parameter/basicPublicTemplate/consultantResultTemplateType';
    import type { ResultTemplateTypeQuery } from '@/api/parameter/basicPublicTemplate/consultantResultTemplateType/types';

    const router = useRouter();
    const route = useRoute();
    const { proxy } = getCurrentInstance() as ComponentInternalInstance;

    const templateDetail = ref<ResultTemplateVO>({
        id: '',
        templateName: '',
        description: '',
        templateTypeId: '',
        content: '',
        createTime: '',
        createBy: '',
        createDept: '',
        updateTime: '',
        updateBy: '',
        updateDept: '',
        createDeptName: '',
        updateDeptName: ''
    });

    interface TemplateTypeOption {
        value: string | number;
        label: string;
    }
    const templateTypeList = ref<TemplateTypeOption[]>([]);

    // 变量说明列表
    const variableList = ref([
        { name: '${purpose}', description: '会诊目的', example: '营养评估' },
        { name: '${height}', description: '身高', example: '170' },
        { name: '${weight}', description: '体重', example: '65' },
        { name: '${bmi}', description: 'BMI指数', example: '22.5' },
        { name: '${lossWeight}', description: '近6个月体重变化', example: '-2' },
        { name: '${lossWeightRate}', description: '体重下降率', example: '3' },
        { name: '${totalFood24retrospectCalories}', description: '24h膳食回顾能量', example: '2000' },
        { name: '${totalFood24retrospectProtein}', description: '24h膳食回顾蛋白质', example: '60' },
        { name: '${alb}', description: '白蛋白', example: '35' },
        { name: '${beforeAlb}', description: '前白蛋白', example: '180' },
        { name: '${hgb}', description: '血红蛋白', example: '120' },
        { name: '${nrs2002Score}', description: 'NRS2002评分', example: '3' },
        { name: '${nrs2002Conclusion}', description: 'NRS2002结论', example: '存在营养风险' },
        { name: '${glimResult}', description: 'GLIM营养不良评估', example: '重度营养不良' },
        { name: '${way}', description: '营养治疗途径', example: '经口肠内营养+补充性肠外营养' },
        { name: '${totalCalories}', description: '总能量', example: '2000' },
        { name: '${totalProtein}', description: '总蛋白质', example: '80' }
    ]);

    /** 获取类型名称 */
    const getTemplateTypeName = (typeId: string | number) => {
        const type = templateTypeList.value.find(t => t.value === typeId);
        return type ? type.label : '';
    };

    /** 获取模板类型列表 */
    const getTemplateTypeList = async () => {
        try {
            const params: ResultTemplateTypeQuery = {
                pageNum: 1,
                pageSize: 100,
                templateType: undefined,
                params: {}
            };
            const res = await listResultTemplateType(params);
            templateTypeList.value = res.rows.map(item => ({
                value: item.id,
                label: item.templateType
            }));
        } catch (error) {
            proxy?.$modal.msgError("获取类型列表失败");
            console.error("获取类型列表失败:", error);
        }
    };

    /** 获取模板详情 */
    const getDetail = async (id: string | number) => {
        try {
            const res = await getResultTemplate(id);
            templateDetail.value = res.data;
        } catch (error) {
            console.error('获取详情失败', error);
            proxy?.$modal.msgError("获取详情失败");
        }
    };

    // 返回按钮
    const goBack = () => {
        router.back();
    };

    onMounted(async () => {
        const id = route.query.id;
        if (id) {
            await Promise.all([
                getTemplateTypeList(),
                getDetail(id as string)
            ]);
        } else {
            proxy?.$modal.msgError("未找到模板ID");
            router.back();
        }
    });
</script>

<style scoped>
.form-text {
    line-height: 32px;
    color: #606266;
}

.content-section {
    margin-top: 20px;
}

.section-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 16px;
    color: #303133;
    position: relative;
    padding-left: 10px;
}

.section-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 16px;
    background-color: #409EFF;
    border-radius: 2px;
}

.template-content {
    padding: 16px;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    min-height: 500px;
    width: 60%;
    line-height: 50px;
    background-color: #fff;
    margin-bottom: 20px;
}

.template-content :deep(p) {
    margin: 8px 0;
    line-height: 1.6;
}

:deep(.el-form-item__label) {
    font-weight: bold;
}
</style>