<template>
    <div class="window-height column">
        <div class="user-center-header row items-center">
            <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/pptTD.png"
                style="height: 24px" />
            <div class="q-ml-lg text-weight-bold" style="font-size: 20px">
                工作台
            </div>
            <div class="user-center-menuB column ">
                <el-button class="full-width pingfangr text-weight-bolder" 
                @click="forwardSpace" 
                style="font-size: 14px !important;" icon="arrow-left">返回</el-button>
            </div>
            <div class="col"></div>

            <UserCard :size="33"></UserCard>
        </div>
        <div class="col column q-px-lg">
            <div class="user-center-menu row">
                <el-menu :default-active="`${activeIndex}`" class="el-menu-demo col row q-px-lg"
                 router>
                    <template v-for="(x,i) in menus">
                        <el-menu-item :index="`${i}`" :key="i" :route="x.url" v-if="i==0">
                            <span class="microsoft">{{ x.name }}</span>
                        </el-menu-item>
                    </template>
                    <div class="row items-center q-pr-lg">
                       <div class="q-pl-md q-pr-lg color0 fz12">》</div>
                        <el-divider  class="q-ml-lg" direction="vertical" style="height: 60%;"/> 
                    </div>
                    <template v-for="(x,i) in menus">
                        <el-menu-item :index="`${i}`" :key="i" :route="x.url" v-if="i!=0">
                            <span class="microsoft">{{ x.name }}</span>
                        </el-menu-item>
                    </template>
                    
                </el-menu>
            </div>
            <el-scrollbar class="col full-height user-center-body" wrap-style="overflow-x:unset;">
                <router-view />
            </el-scrollbar>
        </div>
    </div>
    
</template>

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

const router = useRouter()
const useMenu = useMenuStore();
const menus = ref(useMenu.getCreateMenu);
const { model } = storeToRefs(useScreenStore())
const activeIndex = ref(0)

const userStore= useUserStore()
const userInfo = userStore.getUser
if(!userInfo.isTemplate && !userInfo.iv && !userInfo.ic && !userInfo.ia) router.push('/notfound')

const forwardSpace = () => router.push('/space')

watch(() => router.currentRoute.value.path, (toPath) => {
    // if(!userInfo.isTemplate && !userInfo.iv && !userInfo.ic && !userInfo.ia) return router.push('/notfound')

    menus.value = useMenu.getCreateMenu
    if(!menus.value) return
    activeIndex.value = menus.value.findIndex(x=>x.url==router.currentRoute.value.path)
},{immediate: true,deep: true})
</script>

<style lang="scss" scoped>
.user-center-header {
    padding: 0 40px 0 28px;
    border-bottom: 1px solid #efefef;
    height: 56px;
    color: #000;
}
.user-center-menuB {
    width: 90px;
    padding: 20px 0 20px 16px;
    font-family: microsoft yahei;
}
.el-menu--vertical:not(.el-menu--collapse):not(.el-menu--popup-container) .el-menu-item{
    padding-left: 0;
}
.el-menu{
    border: 0;
}
.user-center-menu {
    padding: 0 20px;
    font-family: microsoft yahei;
}
.el-menu-demo .el-menu-item{
    padding: 0;
    position: relative;
}
.el-menu-demo .el-menu-item.is-active::after{
    content: "";
    display: block;
    position: absolute;
    width: 24px;
    height: 4px;
    background: $themeColor;
    border-radius: 2px;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%) translateY(0);

}
.el-menu-demo .el-menu-item:hover{
    background: #fff !important;
}
.el-menu-demo .el-menu-item:hover span{
    color: $themeColor !important;
}

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