<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" />
            <div class="q-ml-lg text-weight-bold" style="font-size: 20px">
                管理与设置
            </div>
            <div class="col"></div>
            <img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1713433759000_282.png"
                style="height: 33px" />
            <div class="primary-link-button q-ml-lg">创建设计</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 class="col full-height user-center-body" wrap-style="overflow-x:unset;">
                <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.getUserMenu);
const activeIndex = ref(0)

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

watch(() => router.currentRoute.value.path, (toPath) => {
    menus.value = useMenu.getUserMenu
    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;
}

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