<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="col"></div>
            <UserCard :size="33"></UserCard>
        </div>
        <el-scrollbar class="col full-height" wrap-style="overflow-x:unset;">
            <router-view />
        </el-scrollbar>
    </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.getTemplateMenu);
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.getTemplateMenu
    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 40px 40px;
}
</style>
