<template>
  <el-menu
    :default-active="activeMenu"
    mode="horizontal"
    @select="handleSelect1"
    style="padding: 0 1px !important;"
    :text-color="settingsStore.topFontColor"
    :active-text-color="settingsStore.topFontColor"
  >
    <TopNavItem v-for="(route, index) in topMenus" :key="route.path + index" :item="route" :base-path="route.path"  > </TopNavItem>
  </el-menu>
</template>

<script setup>
/*----------------------------------依赖引入-----------------------------------*/
import { useRouter, useRoute } from "vue-router";
/*----------------------------------接口引入-----------------------------------*/
/*----------------------------------组件引入-----------------------------------*/
import TopNavItem from "./topNavItem";
/*----------------------------------store引入-----------------------------------*/
import { useSettingsStore, usePermissionStore } from "@/store/modules/index";
/*----------------------------------公共方法引入-----------------------------------*/
/*----------------------------------变量声明-----------------------------------*/
const route = useRoute();
const router = useRouter();
const settingsStore = useSettingsStore();
const permissionStore = usePermissionStore();
/*----------------------------------公共变量-----------------------------------*/
const menuStype = ref({

})
// 顶部栏初始数
const activeMenu = computed(() => {
  const { meta, path } = route;
  if (meta.activeMenu) {
    return meta.activeMenu;
  }
  return path;
});
// 所有的路由信息
const sidebarRouters = computed(() => permissionStore.sidebarRouters);
const topbarRouters = computed(() => permissionStore.topbarRouters);
// 顶部显示菜单
const topMenus = computed(() => {
  let topMenus = [];
  sidebarRouters.value.map((menu) => {
    if (menu.hidden !== true) {
      topMenus.push(menu);
    }
  });
 if(topMenus.length>5){
        // menuStype.value.height = "90vh"
        // menuStype.value.overflowY = "scroll"
        // menuStype.value.overflowX = "hidden"
 }
  return topMenus;
});

const handleSelect1 = (key, keyPath) => {
  if (key.indexOf("http") > -1) {
    let userNameSaaS = encodeURIComponent(localStorage.getItem("userName"));
    let passWordSaaS = encodeURIComponent(localStorage.getItem("passWord"));
    if (key.indexOf("?") > -1) {
      let url = key.split("?")[0];
      let userNameSaaS = encodeURIComponent(localStorage.getItem("userName"));
      let passWordSaaS = encodeURIComponent(localStorage.getItem("passWord"));
      window.open(`${url}?userNameSaaS=${userNameSaaS}&passWordSaaS=${passWordSaaS}`, "_blank");
    } else {
      window.open(key, "_blank");
    }
  } else {
    router.push({ path: key });
  }
};
//菜单栏超出闪烁修复
function menuFlicker (){
        setTimeout(()=>{
                var arrow = document.getElementsByClassName("el-sub-menu__hide-arrow")
                if(arrow){
                        arrow[0].onmouseover  = function(e) {
                                var ul = document.getElementsByClassName("el-menu--horizontal el-menu--popup-container")[0]
                                var ulHtml= document.getElementsByClassName("el-menu--horizontal el-menu--popup-container")
                                if(ulHtml.length > 16){
                                        ul.style.maxHeight = "80vh"
                                        ul.style.overflowY = "scroll"
                                        ul.style.overflowX = "hidden"
                                }
                                
                        };
                }
        },1000)
}
window.addEventListener('resize', () => {
        menuFlicker()
});
menuFlicker()
</script>

<style lang="scss">
@import "@/assets/styles/handle.scss";

:deep(.el-menu) {
  padding: 0 1px !important;
}
</style>
