<template>
    <div class="patient-info">
        <span>营养病例</span>
    </div>
    <div class="custom-tab-bar">
        <el-menu :default-active="activeMenu" class="medical-menu" @select="handleSelect" mode="horizontal">
            <el-menu-item index="medicalRecord">
                <span>病史记录</span>
            </el-menu-item>
            <el-menu-item index="visitRecord">
                <span>检查指标</span>
            </el-menu-item>
            <el-menu-item index="nutritionScreening">
                <span>营养筛查</span>
            </el-menu-item>
            <el-menu-item index="nutritionEvaluation">
                <span>营养评估</span>
            </el-menu-item>
            <el-menu-item index="nutritionDiagnosis">
                <span>营养诊断</span>
            </el-menu-item>
            <el-menu-item index="nutritionPlan">
                <span>营养干预</span>
            </el-menu-item>
            <el-menu-item index="nutritionMonitor">
                <span>营养膳食</span>
            </el-menu-item>
            <el-menu-item index="checkRoom" v-show="props.patientInfo.type=='1'">
                <span>查房记录</span>
            </el-menu-item>
        </el-menu>
    </div>

    <div>
        <!-- <keep-alive>
        </keep-alive> -->
        <component :is="currentComponent" v-if="currentComponent" :patient-info="props.patientInfo" />

    </div>


</template>

<script setup lang="ts">
    import { ref } from 'vue';

    const MedicalRecord = defineAsyncComponent(() => import('@/views/patients/medicalRecord/levelMenu/medicalRecord/index.vue'));
    const VisitRecord = defineAsyncComponent(() => import('@/views/patients/medicalRecord/levelMenu/visitRecord/index.vue'));

    const NutriDiagnosis = defineAsyncComponent(() => import('@/views/patients/medicalRecord/levelMenu/nutriDiagnosis/index.vue'));
    const NutritionScreening = defineAsyncComponent(() => import('@/views/patients/medicalRecord/levelMenu/nutritionScreening/index.vue'));
    const NutritionEvaluation = defineAsyncComponent(() => import('@/views/patients/medicalRecord/levelMenu/nutritionEvaluation/index.vue'));
    const activeMenu = ref('medicalRecord');

    const componentMap = {
        medicalRecord: MedicalRecord,
        visitRecord: VisitRecord,
        nutritionDiagnosis: NutriDiagnosis,
        nutritionScreening: NutritionScreening,
        nutritionEvaluation: NutritionEvaluation,
        // ... 其它映射
    };

    const currentComponent = ref(componentMap['medicalRecord']); // 默认显示

    // 声明接收的 props
    const props = defineProps({
        patientInfo: {
            type: Object,
            required: true,
            default: () => ({
                id: '',
                name: '',
                age: '',
                gender: ''
            })
        }
    });

    const handleSelect = (key: string) => {
        activeMenu.value = key;
        currentComponent.value = componentMap[key] || null;
    };
</script>

<style lang="scss" scoped>
    .custom-tab-bar {
        display: flex;
        background: #76b4f4;
        height: 56px;
        line-height: 55px;
        align-items: stretch;
        border-bottom: 1px solid #e0e0e0;
        margin-bottom: 24px;
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 2px;

        // 让el-menu横向铺满
        :deep(.el-menu--horizontal) {
            border-bottom: none;
            background: transparent;
        }

        :deep(.el-menu--horizontal > .el-menu-item) {
            height: 56px;
            line-height: 56px;
            font-size: 16px;
            color: #fff;
            background: transparent;
        }

        :deep(.el-menu-item.is-active) {
            background: #3f6cb5;
            color: #fff;
        }
    }

    .medical-menu {
        display: inline-flex;
        min-width: max-content;
        width: 90%;
    }

    .patient-info {
        background-color: #fff;
        padding: 20px;
        border-radius: 4px;
        margin-bottom: 20px;
        font-size: 24px;

        :deep(.el-descriptions__label) {
            width: 80px;
            justify-content: flex-end;
        }
    }

    .content-area {
        background-color: #fff;
        margin-top: -20px;
        padding: 10px;
        border-radius: 4px;
        min-height: calc(100vh - 200px);
    }

    .custom-tab.first.active,
    .custom-tab.active {
        background: #4a7ebc;
    }

    .custom-tab:not(.active):hover {
        background: #6bb0e6;
    }

    .custom-tab+.custom-tab {
        border-left: 1px solid rgba(255, 255, 255, 0.1);
    }

    .medical-content {
        background: #fff;
        border-radius: 4px;
        padding: 50px 60px 40px 60px;
        min-height: 80vh;
        font-size: 15px;
        color: #222;
    }

    .row {
        display: flex;
        align-items: flex-start;
        margin-bottom: 16px;
        flex-wrap: wrap;
    }

    .label {
        min-width: 110px;
        color: #222;
        font-weight: 500;
        margin-right: 8px;
        line-height: 28px;
        text-align: right;
    }

    .edit-link {
        color: #409eff;
        margin-right: 24px;
        cursor: pointer;
        font-size: 14px;
        line-height: 28px;
    }

    .content-text {
        flex: 1;
        color: #333;
        line-height: 28px;
        margin-right: 16px;
        word-break: break-all;
    }

    .multi-line {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 20px;
    }

    .add-btn {
        margin-left: 12px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #f5f7fa;
        border: 1px dashed #dcdfe6;
        color: #999;
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>