<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" @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>
                    <el-menu-item :index="i" v-for="(x,i) in menus" :key="i" :route="x.url">
                        <component :is="x.icon" style="font-size: 20px;"></component>
                        <span class="q-ml-lg">{{ x.name }}</span>
                    </el-menu-item>
                </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 v-if="menus[activeIndex].url!='/u/cloudDiskSpace'" class="col full-height user-center-body" wrap-style="overflow-x:unset;" view-style="padding-bottom:30px;">
                <router-view />
            </el-scrollbar>
            <div v-else class="col full-height user-center-body" view-style="padding-bottom:30px;">
                <router-view />
            </div>
        </div>
    </div>
</template>

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

const router = useRouter()
const useMenu = useMenuStore();
const menus = ref([] as any);
const activeIndex = ref(0)

const { userInfo } =storeToRefs(useUserStore())

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


watch(() => router.currentRoute.value.path, (toPath) => {
    if(!userInfo.value.it&&userInfo.value.iv) menus.value = useMenu.getUserMenu
    else menus.value = useMenu.getUserMenu.filter(x=> {return x.url!='/u/w'})
    if(!menus.value) return
    activeIndex.value = menus.value.findIndex(x=>x.url==router.currentRoute.value.path)
},{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;
    font-family: microsoft yahei;
}

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