<!--
 * @Company: 沈阳信诚科技
 * @Email: html_venustar@163.com
 * @Author: Liuqiming
 * @Description: 最左侧模块菜单
 * @LastEditors: Liuqiming
 * @LastEditTime: 2024-03-15 09:14:06
 * @Date: 2024-02-21 18:02:18
-->
<template>
  <div class="classify-menu-container" :style="{borderRight: is_hid ? '0.5px solid #dfe1e4' : 'none'}">
    <el-menu
      :default-active="activeMenu"
      @select="handleSelect"
      class="classify-menu-box"
    >
      <template v-for="(item, index) in topMenus">
        <el-menu-item :style="{'--theme': theme}" :index="item.path" :key="index" v-if="true">
          <svg-icon
          v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"
          :icon-class="item.meta.icon"/>
          <span style="margin-top: -8px;display: block;">{{ item.meta.title }}</span>
        </el-menu-item>
      </template>
    </el-menu>
    <div class="expend-menu">
      <el-button style="padding: 10px;" @click="handlerExpandClick">
        <svg-icon icon-class="menu-expend"/>
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { constantRoutes } from "@/router"
import usePermissionStore from '@/store/modules/permission'
import useAppStore from '@/store/modules/app'
import { isHttp } from '@/utils/validate'
import useSettingsStore from '@/store/modules/settings'
import { useWindowSize } from '@vueuse/core'
const { proxy } = getCurrentInstance();

const permissionStore = usePermissionStore()
const settingsStore = useSettingsStore()
const appStore = useAppStore()
const route = useRoute()
const router = useRouter()

const theme = computed(() => settingsStore.theme);
// 所有的路由信息
const routers = computed(() => permissionStore.topbarRouters);
const hideList = ['/index', '/user/profile'];
// 最左侧菜单底部展开关闭按钮控制
const is_hid = ref(false)
const is_key = ref(null)
// 顶部显示菜单
const topMenus = computed(() => {
  let topMenus = [];
  routers.value.map((menu) => {
    if ((!menu.hidden || menu.hidden !== true) && menu.path !== '/dataDisplay') {
      // 兼容顶部栏一级菜单内部跳转
      if (menu.path === "/" || menu.path === "") {
        topMenus.push(menu.children[0]);
      } else {
        topMenus.push(menu);
      }
    }
  })
  return topMenus;
})
// 根据屏幕自适应菜单展示隐藏
const { width } = useWindowSize();
const WIDTH = 992
watchEffect(() => {
  if (width.value - 1 < WIDTH) {
    is_hid.value = true
    appStore.toggleSideBarHide(true);
  } else {
    if (hideList.indexOf(is_key.value) === -1) {
      is_hid.value = false
      appStore.toggleSideBarHide(false);
    }
  }
})

// 默认激活的菜单
const activeMenu = computed(() => {
  const path = route.path;
  let activePath = path;
  const menusCur = topMenus.value.find(item => item.path === `/${path.split('/')[1]}`)
  if (menusCur) {
    appStore.toggleCurrentModule(menusCur)
  }
  if (path !== undefined && path.lastIndexOf("/") > 0 && hideList.indexOf(path) === -1) {
    const tmpPath = path.substring(1, path.length);
    activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/"));
    is_key.value = path
    if (!route.meta.link) {
      is_hid.value = false
      appStore.toggleSideBarHide(false);
    }
  } else if(!route.children) {
    activePath = path;
    is_hid.value = true
    is_key.value = path
    appStore.toggleSideBarHide(true);
  }
  activeRoutes(activePath);
  return activePath;
})
// 设置子路由
const childrenMenus = computed(() => {
  let childrenMenus = [];
  routers.value.map((router) => {
    for (let item in router.children) {
      if (router.children[item].parentPath === undefined) {
        if(router.path === "/") {
          router.children[item].path = "/" + router.children[item].path;
        } else {
          if(!isHttp(router.children[item].path)) {
            router.children[item].path = router.path + "/" + router.children[item].path;
          }
        }
        router.children[item].parentPath = router.path;
      }
      childrenMenus.push(router.children[item]);
    }
  })
  return constantRoutes.concat(childrenMenus);
})
// 点击菜单
function handleSelect(key, keyPath) {
  is_key.value = key
  const route = routers.value.find(item => item.path === key)
  const menusCur = topMenus.value.find(item => item.path === `/${key.split('/')[1]}`)
  if (menusCur) {
    appStore.toggleCurrentModule(menusCur)
  }
  if (isHttp(key)) {
    // http(s):// 路径新窗口打开
    window.open(key, "_blank");
  } else if (!route || !route.children) {
    // 没有子路由路径内部打开
    const routeMenu = childrenMenus.value.find(item => item.path === key);
    if (routeMenu && routeMenu.query) {
      let query = JSON.parse(routeMenu.query);
      router.push({ path: key, query: query });
    } else {
      router.push({ path: key });
    }
    is_hid.value = true
    appStore.toggleSideBarHide(true);
  } else {
    // 显示左侧联动菜单
    activeRoutes(key);
    is_hid.value = false
    appStore.toggleSideBarHide(false);
  }
}
function activeRoutes(key) {
  let routes = [];
  if (childrenMenus.value && childrenMenus.value.length > 0) {
    childrenMenus.value.map((item) => {
      if (key == item.parentPath || (key == "index" && "" == item.path)) {
        routes.push(item);
      }
    });
  }
  if(routes.length > 0) {
    permissionStore.setSidebarRouters(routes);
  } else {
    is_hid.value = true
    appStore.toggleSideBarHide(true);
  }
  return routes;
}
// 菜单列展示隐藏
const handlerExpandClick = () => {
  if (hideList.indexOf(is_key.value) === -1) {
    is_hid.value = !is_hid.value
    appStore.toggleSideBarHide(is_hid.value)
  } else {
    proxy.$modal.msgWarning('当前模块没有子集菜单')
  }
}
</script>
<style lang="scss" scoped>
.classify-menu-container{
  width: 100%;
  height: 100%;
  background: #ECEFF3;
  .classify-menu-box{
    background: #ECEFF3;
    height: calc(100% - 70px) !important;
    .el-menu-item{
      display: block;
      padding: 16px 0;
      padding-left: 0 !important;
      // margin:0 0 10px 0;
      height: 82px;
      text-align: center;
      font-weight: 400;
      .svg-icon{
        display: block;
        width: 24px;
        height: 24px;
        margin: 0 auto;
      }
    }
    .el-menu-item:hover{
      background: var(--el-color-primary-light-8) !important;
    }
    .is-active{
      >span{
        font-weight: 500;
      }
    }
  }
  .expend-menu{
    width: 100%;
    height: 70px;
    text-align: center;
  }
}
</style>