<!-- 个人中心主页 -->

<template>
    <div class="personal-center-box">

        <!-- 左侧导航栏 -->
        <div class="box_left">
            <el-tabs tab-position="left" v-model="get_activeTabName" class="demo-tabs" @tab-click="act_handleClick">
                <el-tab-pane label="个人资料" name="personalData"></el-tab-pane>
                <el-tab-pane label="我的展厅" name="myShowroom"></el-tab-pane>
                <el-tab-pane label="我的场景" name="myScene"></el-tab-pane>
                <el-tab-pane label="我的模板" name="myTemplate"></el-tab-pane>
                <el-tab-pane label="我的收藏" name="myFavorite"></el-tab-pane>
                <el-tab-pane label="我的购物车" name="myShoppingCart"></el-tab-pane>
                <el-tab-pane label="我的订单" name="myOrder"></el-tab-pane>
                <el-tab-pane label="通知中心" name="notificationCenter"></el-tab-pane>
            </el-tabs>
        </div>

        <!-- 右侧内容 -->
        <div class="box_right">
            <component :is="get_component()"></component>
        </div>

    </div>
</template>

<script setup>
/************************************************
 *                   引入文件                   *
 ************************************************/
import { ref, onMounted } from 'vue'
import { useRoute, useRouter, RouterView } from 'vue-router'
import personalData from './UserComponents/personalData.vue' // 个人资料页面
import myShowroom from './UserComponents/myShowroom.vue' // 我的展厅
import myScene from './UserComponents/myScene.vue' // 我的场景
import myTemplate from './UserComponents/myTemplate.vue' // 我的模板
import myFavorite from './UserComponents/myFavorite.vue' // 我的收藏
import myOrder from './UserComponents/myOrder.vue' // 我的订单
import myShoppingCart from '@/pages/User/UserComponents/myShoppingCart.vue' // 我的购物车
import notificationCenter from './UserComponents/notificationCenter.vue' // 通知中心
import { usePersonalCenterStore } from "@/store/index";


/************************************************
 * 全局变量
 *
 * 格式: g_ + 事件名     例如: getAppDataList
 ************************************************/

const g_route = useRoute()
// 组件对象映射
const g_componentMap = { personalData, myShowroom, myScene, myTemplate, myFavorite, myOrder, notificationCenter, myShoppingCart }
const g_personalCenterStore = usePersonalCenterStore();


/************************************************
 * 生命周期函数
 ************************************************/

// 挂载完成
onMounted(() => {
    if (g_route.query.tab) {
        g_personalCenterStore.setActiveTabName(g_route.query.tab);
    } else {
        g_personalCenterStore.setActiveTabName('personalData');
    }
})





/************************************************
* 事件处理
*
* 格式: act_ + 事件名     例如: getAppDataList
************************************************/

// 切换组件
const act_handleClick = (tab, event) => {
    g_personalCenterStore.setActiveTabName(tab.props.name);
}




/************************************************
 * 获取数据
 *
 * 格式: get_ + 事件名     例如: get_AppDataList
 ************************************************/


const get_activeTabName = () => {
    const tabName = g_personalCenterStore.getActiveTabName();
    return g_personalCenterStore.getActiveTabName();
}


const get_component = () => {
    return g_componentMap[get_activeTabName()];
}


</script>

<style scoped>
.personal-center-box {
    height: calc(100% - 90px);
    display: flex;
    padding: 12px 12px;
}

.box_right {
    flex: 1;
    display: flex;
}

.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
    height: 100%;
}
</style>