<template>
    <div class="container">
        <!-- 首页的tab列表区域 -->
        <div v-show="type === PageType.LIST">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="院内膳食" name="hospital">
                    <HospitalIndex ref="hospitalIndexRef" :activeName="activeName" @addHospital="handleHospital" :patientInfo="props.patientInfo" />
                </el-tab-pane>
                <!-- <el-tab-pane label="平衡膳食" name="balance">
                    <div class="btn_content" @click="handleBalance()">
                        <el-button type="primary">新增{{ tabLabelMap[activeName] }}</el-button>
                    </div>
                </el-tab-pane> -->
                <el-tab-pane label="日常膳食" name="daily">
                    <DailyIndex ref="dailyIndexRef" :activeName="activeName" @addDaily="handleDaily" :patientInfo="props.patientInfo" />
                </el-tab-pane>
                <el-tab-pane label="智能推荐" name="smart">
                    <!-- <div class="btn_content" @click="handleSmartRecommend()">
                        <el-button type="primary">新增{{ tabLabelMap[activeName] }}</el-button>
                    </div> -->
                </el-tab-pane>
            </el-tabs>
        </div>

        <!-- 院内膳食 -->
        <div v-show="type === PageType.HOSPITAL">
            <AddHospital v-if="type === PageType.HOSPITAL" @goBack="isType" @submitHospital="handleHospitalSubmit" :patientInfo="props.patientInfo"/>
        </div>

        <!-- 平衡膳食 -->
        <div v-show="type === PageType.BALANCE">
            <AddBalance @goBack="isType" />
        </div>

        <!-- 日常膳食 -->
        <div v-show="type === PageType.DAILY">
            <AddDaily v-if="type === PageType.DAILY" @goBack="isType" @submitDaily="handleDailySubmit" :patientInfo="props.patientInfo"/>
        </div>

        <!-- 智能推荐 -->
        <div v-show="type === PageType.SMART">
            <AddSmartRec @goBack="isType" />
        </div>
    </div>
</template>
<script lang="ts" setup>
    import { ref } from 'vue';
    import type { TabsPaneContext } from 'element-plus';
    import AddHospital from './addHospital.vue';
    import AddBalance from './addBalance.vue';
    import AddDaily from './addDaily.vue';
    import AddSmartRec from './addSmartRec.vue';
    import HospitalIndex from './hospitalIndex.vue';
    import DailyIndex from './dailyIndex.vue';
    const emit = defineEmits(['change'])
    const hospitalIndexRef = ref();
    const dailyIndexRef = ref();


    // 声明接收的 props
    const props = defineProps({
        patientInfo: {
            type: Object,
            required: true,
            default: () => ({
                id: '',
                name: '',
                age: '',
                gender: ''
            })
        }
    });
    // 使用枚举定义页面类型
    enum PageType {
        LIST = 'list',
            HOSPITAL = 'addForm',
            BALANCE = 'addBalance',
            DAILY = 'addDaily',
            SMART = 'addSmart'
    }

    // 当前页面类型
    const type = ref < PageType > (PageType.LIST);
    const activeName = ref('hospital');

    // tab标签映射
    const tabLabelMap: Record < string, string > = {
        hospital: '院内膳食',
        balance: '平衡膳食',
        daily: '日常膳食',
        smart: '智能推荐'
    };
    const handleHospitalSubmit = (mealPlanForm) => {
        hospitalIndexRef.value ?.submitForm(mealPlanForm);
    };
    const handleDailySubmit = (mealPlanForm) => {
        console.log(12);
        
        dailyIndexRef.value ?.submitForm(mealPlanForm);
    };

    // 点击标签
    const handleClick = (tab: TabsPaneContext) => {
        console.log(tab.paneName);
    };

    // 页面跳转处理
    const handlePageChange = (pageType: PageType) => {
        type.value = pageType;
    };

    // 各个按钮的点击处理
    const handleHospital = () => {
        handlePageChange(PageType.HOSPITAL);
    };
    // 平衡膳食
    const handleBalance = () => {
        handlePageChange(PageType.BALANCE);
    };

    // 日常膳食
    const handleDaily = () => {
        handlePageChange(PageType.DAILY);
    };

    // 智能推荐
    const handleSmartRecommend = () => {
        handlePageChange(PageType.SMART);
    };

    // 返回列表页
    const isType = () => {
        handlePageChange(PageType.LIST);
    };
</script>
<style scoped>
    .demo-tabs {
        width: 90vw;
        background: #f7f9fb;
        border-radius: 12px 12px 0 0;
        padding: 16px 0 0 16px;
        min-height: 800px;
    }

    .btn_content {
        margin-top: 20px;
    }

    :deep(.el-tabs__header) {
        border-bottom: none !important;
        margin-bottom: 0 !important;
        background: transparent;
    }

    :deep(.el-tabs__nav) {
        background: transparent;
        border: none;
        align-items: center;
        height: 72px;
        display: flex;
    }

    :deep(.el-tabs__content) {
        background: #fff !important;
        height: 600px;
    }

    :deep(.el-tabs__item) {
        background: transparent !important;
        position: relative;
        z-index: 1;
        font-size: 16px;
        color: #333;
        padding: 0 48px !important;
        height: 64px;
        line-height: 64px;
        display: flex;
        align-items: center;
        transition: color 0.2s;
        border: none !important;
    }

    :deep(.el-tabs__item.is-active) {
        color: #409eff !important;
        z-index: 2;
    }

    :deep(.el-tabs__item.is-active)::before {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: #fff;
        border-radius: 12px 12px 0 0;
        box-shadow: 0 2px 8px rgba(64, 158, 255, 0.08);
        z-index: -1;
    }

    .diet-content-area {
        background: #fff;
        border-radius: 0 0 16px 16px;
        min-height: 300px;
        /* 让内容区和Tabs无缝衔接 */
        margin-top: -24px;
        padding: 32px 40px;
        box-shadow: 0 2px 8px rgba(64, 158, 255, 0.04);
        position: relative;
        z-index: 1;
    }
</style>