<script lang="ts" setup>
import {routes} from "../router.ts";
import {useUserStore} from "../service/user-store.ts";
import {computed} from "vue";
import {Dropdown, DropdownItem, DropdownMenu, Icon} from "view-ui-plus";
// 获取用户数据
const store = useUserStore()
// 获取当前用户能够访问的菜单
const currentMenus = computed(() => {
    // 判断是否有登录数据
    if (!store.userInfo) return []
    return routes.filter((s) => {
        return !s.meta || !s.meta['role'] || store.userInfo?.role == s.meta.role;
    })
})
</script>

<template>
    <div class="layout">
        <!-- 左侧菜单 -->
        <div class="menu">
            <div class="app-site-info">营养计算器</div>
            <div class="menu-link" v-for="r in currentMenus">
                <router-link :to="(r.path||'/')">{{ r.meta?.title }}</router-link>
            </div>
        </div>
        <!-- 右侧内容 -->
        <div class="app-main-container">
            <div class="header">
                <h1 class="app-name">营养计算器管理后台</h1>
                <div class="current-userinfo">
                    <Dropdown>
                        <a href="javascript:void(0)">
                            下拉菜单  <Icon type="ios-arrow-down"></Icon>
                        </a>
                        <template #list>
                            <DropdownMenu>
                                <DropdownItem>驴打滚</DropdownItem>
                                <DropdownItem>炸酱面</DropdownItem>
                                <DropdownItem @click="store.logout()">退出登录</DropdownItem>
                            </DropdownMenu>
                        </template>
                    </Dropdown>
                </div>
            </div>
            <div class="app-content">
                <router-view/>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.layout{
    height: 100vh;
    display: flex;
}
.app-site-info{
    color:#fff;
    line-height: 80px;
}
.menu{
    background: #2ec7a5;
    text-align: center;
}
.menu-link{
    a{
        padding: 20px;
        display: block;
        color:#fff;
        &.router-link-exact-active{
            background: #00ab99;
        }
    }
}
.app-main-container{
    padding:20px;
    overflow: auto;
    background: #f0f2f0;
    flex: 1;
    .header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
    }
}
.app-content{
    background: #fff;
    border-radius: 5px;
    padding: 10px;
}
</style>
