<template>
    <div class="window-height column">
        <div class="user-center-header row items-center">
            <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713237911000_1.png"
                style="height: 24px" @click="forwardSpace" class="cusor-pointer" />
            <div class="q-ml-lg text-weight-bold" style="font-size: 20px">
                团队/企业管理
            </div>
            <div class="col"></div>
            
            <UserCard :size="33"></UserCard>
        </div>
        <div class="col row">
            <div class="user-center-menu column ">
                
                <el-menu :default-active="activeIndex" class="no-border md-menu col" router>
                    <template v-for="(x,i) in menus" :key="i">
                        <el-sub-menu :index="i" v-if="x.children && x.children.length>0">
                            <template #title>
                                <component :is="x.icon" style="font-size: 20px;"></component>
                                <span class="q-ml-lg">{{ x.name }}</span>
                            </template>
                            <el-menu-item v-for="(sub,y) in x.children" :key="y" :index="`${i}_${y}`" :route="sub.url">{{ sub.name }}</el-menu-item>
                        </el-sub-menu>
                        <el-menu-item :index="`${i}`" :route="x.url" v-else>
                            <component :is="x.icon" style="font-size: 20px;"></component>
                            <span class="q-ml-lg">{{ x.name }}</span>
                        </el-menu-item>
                    </template>
                </el-menu>
                <el-button class="full-width pingfangr text-weight-bolder" @click="forwardSpace" style="font-size: 14px !important;" icon="arrow-left">返回工作台</el-button>
            </div>
            <el-scrollbar class="col full-height user-center-body full-scroll" wrap-style="overflow-x:unset;" view-style="padding-bottom:30px;">
                <router-view />
            </el-scrollbar>
        </div>
    </div>
</template>

<script lang="ts" setup>
import UserCard from "@/components/User/UserCard.vue";
import { useMenuStore } from "@/store";
import { ref, watch } from "vue";
import { useRouter } from "vue-router";

const router = useRouter()
const useMenu = useMenuStore();
const menus = ref(useMenu.getTeamMenu);
const activeIndex = ref('0')

const forwardSpace = () => router.push('/space')
if(menus.value.length==0){
    router.push({
        path:'/notfound'
    })
}

watch(() => router.currentRoute.value.path, (toPath) => {
    menus.value = useMenu.getTeamMenu
    if(!menus.value) return
    menus.value.forEach((x,i)=>{
        if(x.url==router.currentRoute.value.path){
            activeIndex.value=i.toString()
        } else if(x.children&&x.children.length>0){
            x.children.forEach((y,yi)=>{
                if(y.url==router.currentRoute.value.path){
                    activeIndex.value=`${i}_${yi}`
                }
            })
        }
    })
},{immediate: true,deep: true})
</script>

<style scoped>
.user-center-header {
    padding: 0 40px 0 28px;
    border-bottom: 1px solid #efefef;
    height: 56px;
    color: #000;
}

.user-center-menu {
    width: 232px;
    padding: 20px 0 20px 16px;
}

.user-center-body {
    padding: 20px 40px 0px 40px;
}
</style>
