<!--
 * @Description:: 请补充填写
 * @Version: 请配置版本号
 * @Author: 舟舟
 * @Date: 2022-06-25 23:01:29
 * @LastEditors: 舟舟
 * @LastEditTime: 2022-07-15 22:30:12
 * @FilePath: /ouicai_web_framework_vite_ep/src/layouts/backend/components/menuVertical.vue
-->
<template>
    <el-scrollbar ref="verticalMenusRef" class="vertical-menus-scrollbar">
        <el-menu
            class="layouts-menu-vertical"
            :collapse-transition="false"
            :unique-opened="config.layout.menuUniqueOpened"
            :default-active="state.defaultActive"
            :collapse="config.layout.menuCollapse"
            :background-color="config.layout.menuBackground"
            :text-color="config.layout.menuColor"
            :active-text-color="config.layout.menuActiveColor"
        >
            <MenuTree :menus="navTabs.state.tabsViewRoutes" />
        </el-menu>
    </el-scrollbar>
     <!-- <div style="background-color: #191A23; color:white;z-index:9;bottom:0;height:105px;width:inherit;cursor: pointer;">
            <div style="display: flex; align-items: center; justify-content:center;">  <Icon  class="nav-menu-icon" name="local-service" color="#ffffff"
        size="32" /><div style="margin-left:10px;border-left: 1px solid #fff;padding-left: 10px;" v-if="!config.layout.menuCollapse">有问题，晓晓来帮您啊！</div></div></div> -->

</template>

<script setup lang="ts">
import { computed, nextTick, onMounted, reactive, ref } from 'vue'
import MenuTree from './menuTree.vue'
import { useRoute, onBeforeRouteUpdate, RouteLocationNormalizedLoaded } from 'vue-router'
import type { ElScrollbar } from 'element-plus'
import { useConfig } from '/@/stores/config'
import { useNavTabs } from '/@/stores/navTabs'

const config = useConfig()
const navTabs = useNavTabs()
const route = useRoute()

const verticalMenusRef = ref<InstanceType<typeof ElScrollbar>>()

const state = reactive({
    defaultActive: '',
})

const verticalMenusScrollbarHeight = computed(() => {
    let menuTopBarHeight = 0
    if (config.layout.menuShowTopBar) {
        menuTopBarHeight = 50
    }
    if (config.layout.layoutMode == 'Default') {
        return 'calc(100vh - ' + (32 + menuTopBarHeight) + 'px)'
    } else {
        return 'calc(100vh - ' + (menuTopBarHeight) + 'px)'
    }
})

const scrollBackgroundColor=computed(()=>{
    return config.layout.menuBackground;
})

// 激活当前路由的菜单
const currentRouteActive = (currentRoute: RouteLocationNormalizedLoaded) => {
    state.defaultActive = currentRoute.path
}

// 滚动条滚动到激活菜单所在位置
const verticalMenusScroll = () => {
    nextTick(() => {
        let activeMenu: HTMLElement | null = document.querySelector('.el-menu.layouts-menu-vertical li.is-active')
        if (!activeMenu) return false
        verticalMenusRef.value?.setScrollTop(activeMenu.offsetTop)
    })
}

onMounted(() => {
    currentRouteActive(route)
    verticalMenusScroll()
})

onBeforeRouteUpdate((to) => {
    currentRouteActive(to)
})
</script>
<style>
.vertical-menus-scrollbar {
    height: v-bind(verticalMenusScrollbarHeight);
    background-color: v-bind(scrollBackgroundColor);
}
.layouts-menu-vertical {
    border: 0;
}
</style>
