<el-container style="display: flex; flex-direction: column;height:162px;">
    
        <h2> New Message </h2>
    
        <h1> New Message </h1>                            

</el-container>

<template>
    <el-container style="display: flex; flex-direction: column;">

        <el-header style="color: white;">
            <h1> New Message </h1>
        </el-header>       

        <div class="container" v-if="active === 0">
            <New_Msg_Type :active="active" @update-active="updateActive" />
        </div>

        <div class="container" v-if="active === 1">
            <New_Msg_BatchSelect active="active" @update-active="updateActive" />
        </div>

    </el-container>
</template>

<script setup>
    import { ref } from 'vue'; // 引入 ref 函數
    //import MyComponent from './MyComponent.vue'; // 引入组件
    import New_Msg_Type from './new_msg_type.vue'; // 引入组件
    import New_Msg_BatchSelect from './new_msg_BatchSelect.vue'; // 引入组件
    import { ChatDotSquare } from '@element-plus/icons-vue'

    // 定义 active 变量并设定初始值
    const active = ref(0);

    // 更新 active 的方法
    const updateActive = (newActive) => {
        active.value = newActive;
    };

</script>

<style scoped>
.container {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}
</style>