<!-- layout 首页 -->
<template>
    <div
        v-if="appStore.isInit"
        class="layout-index"
        :class="['theme-def', 'theme-' + themeStore.theme, (appStore.isOpen ? '' : 'app-fold')]">

        <transition name="opacity">
            <!-- 经典布局 -->
            <layout-classic v-if=" themeStore.layoutMode === 'classic' "></layout-classic>
            <!-- 分栏布局 -->
            <layout-column v-else-if=" themeStore.layoutMode === 'column' "></layout-column>
        </transition>

        <!-- 全局设置 -->
        <com-setting></com-setting>

        <!-- 全局 Dialog 弹窗 -->
        <os-model></os-model>

        <!-- 全局 loading 加载图标 -->
        <os-loading></os-loading>
        
    </div>
</template>

<script setup name="layout-index">
import LayoutClassic from './main/layout-classic'
import LayoutColumn from './main/layout-column'
import ComSetting from './nav/com-setting';      // 全局设置组件
import {useAppStore} from "../store/app";
import {useThemeStore} from "../store/theme";
import OsModel from "./view/os-model";
import OsLoading from "./view/os-loading";
import {onMounted} from "vue";
import {getRouteByPath} from "../router/router-util";
import router from "../router";

//
const appStore = useAppStore();
const themeStore = useThemeStore();

onMounted(() => {
    // 根据路由高亮菜单
    const route = router.currentRoute.value;
    let routeObj = getRouteByPath(route.path);
    if (routeObj?.meta?.menu) {
        useAppStore().showMenuById(routeObj.meta.menu.id);
    }
})

</script>

<style scoped lang="scss">

/* 变量 */
.layout-index{
    --nav-left-width: 200px;
    --nav-left-width-fold: 64px;
    --nav-right-1-height: 50px;
    --nav-right-2-height: 35px;
}

/* 布局样式 */
.layout-index :deep(div) {

    .nav-left, .nav-right {
        position: fixed;
        top: 0;
        height: 100%;
    }

    /* 左边 */
    .nav-left {
        width: var(--nav-left-width);
        left: 0px;
        z-index: 200;
        overflow: hidden;
    }

    .nav-left-top {
        width: 100%;
        box-sizing: border-box;
        height: 60px;
        line-height: 60px; /* z-index: 100; */
        overflow: hidden;
    }

    .nav-left-bottom {
        width: 100%;
        box-sizing: border-box;
        height: calc(100% - 60px);
        overflow: hidden;
    }

    /* 右边 */
    .nav-right {
        width: calc(100% - var(--nav-left-width));
        right: 0px;
        z-index: 100;
    }

    .nav-right-1 {
        height: var(--nav-right-1-height);
        line-height: var(--nav-right-1-height);
        z-index: 201;
        position: relative;
        /*border-bottom: 1px #F1F1F1 solid;*/
        box-sizing: border-box;
        overflow: hidden;
        box-shadow: 0 1px 4px rgba(0,21,41,.08);
    }

    .nav-right-2 {
        height: var(--nav-right-2-height);
        //line-height: var(--nav-right-2-height);
        z-index: 200;
        position: relative;
        /*box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);*/
        /*border-bottom: 1px solid #d8dce5;*/
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
    }

    .nav-right-3 {
        height: calc(100vh - var(--nav-right-1-height) - var(--nav-right-2-height));
        z-index: 199;
        position: relative;
        overflow: hidden;
    }

    /* 所有带动画的元素 */
    .nav-left, .nav-left-top, .nav-right {transition: all 0.3s;}
    .nav-left-bottom{transition: all 0.4s;}

}

/* 折叠时的样式 */
.app-fold {
    --nav-left-width: 64px;
}

</style>
