<template>
  <el-menu class="el-menu-vertical-demo menu-h" style="position: relative;" :collapse="!$store.getters.sidebarOpened"
           :default-active="activeMenu" :unique-opened="uniqueOpened" background-color="rgba(0, 0, 0, 0)"
           :text-color="$store.getters.cssVar.menuText" :active-text-color="$store.getters.cssVar.menuActiveText" router
           width="30" :default-openeds="pageData.defaultOpeneds" :key="menuIndex">
    <SideBarItem v-for="item in pageData.routes" :key="item.path" :route="item"></SideBarItem>
  </el-menu>

</template>

<script setup>
import { computed, reactive, defineExpose, ref, onMounted } from "vue"
import { useRouter, useRoute } from "vue-router"
import { useStore } from "vuex"
import { filterRoutes, generateMenus } from "@/utils/route"
import * as MOSTY from "@/components/MyComponents/index"
import SideBarItem from "./SideBarItem.vue"
import { postApi } from "@/api/tobAcco_api.js"

const store = useStore()
const router = useRouter()
const activeMenu = ref()
const pageData = reactive({
  routes: computed(() => {
    const fRoutes = filterRoutes(router.getRoutes())
    let data = generateMenus(fRoutes);
    // 临时调整
    [data[0], data[1]] = [data[1], data[0]]
    // return generateMenus(fRoutes)
    return data
  }),
  defaultOpeneds: []//默认需要展开的路由
})
const uniqueOpened = ref(true)//是否只展示一个菜单
const menuIndex = ref(1)
if (router.getRoutes().length <= 7 && store.state.permission.routeReady <= 1) {
  store.commit("user/setIsReady", {})
  setTimeout(() => {
    router.go(0)
  }, 200)
}
onMounted(() => {
})


//根据关键字过滤路由
const kwywordFilterRoute = (key) => {
  //清空关键字
  const fRoutes = filterRoutes(router.getRoutes())
  const list = generateMenus(fRoutes)
  if (!key) {
    pageData.routes = computed(() => {
      return list
    }) || []
    pageData.defaultOpeneds = []
    menuIndex.value++
    uniqueOpened.value = true
  } else {
    //有关键字
    const keywordList = keywordGetRouter(list, key)
    pageData.routes = computed(() => {
      return keywordList
    }) || []
    uniqueOpened.value = false
    menuIndex.value++
  }
}
const keywordGetRouter = (routes, keyword) => {
  const lowerCaseKeyword = keyword.toLowerCase()
  return routes
    .filter(route => {
      // 检查当前路由的路径或名称是否包含关键字
      if (route.meta.title && route.meta.title.toLowerCase().includes(lowerCaseKeyword)) {
        // pageData.defaultOpeneds.push(route.path)
        return true
      }
      // 如果没有在当前路由找到匹配项，则递归检查子路由
      if (route.children) {
        pageData.defaultOpeneds.push(route.path)
        return route.children.some(childRoute => keywordGetRouter([childRoute], keyword).length > 0)
      }
      // 如果没有找到匹配项，则返回 false
      return false
    })
    // 如果需要包含子路由，则递归调用 keywordGetRouter 并合并结果
    .map(route => ({
      ...route,
      children: route.children ? keywordGetRouter(route.children, keyword) : []
    }))
}
defineExpose({
  kwywordFilterRoute
})
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  box-sizing: border-box;
  height: 30px;
  background-color: #fff;
}

.line {
  width: 100%;
  height: 4px;
  background: #EFEFEF;
  transform: translateY(-30px);
  border: none;
}

.app-content {
  // position: absolute;
  left: 0;
  bottom: 0px;
  height: 240px;
  background-color: #fff;
  width: 100%;

  .content {
    margin-top: 12px;
  }
}

.app {
  position: absolute;
  left: 0;
  bottom: 0px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  width: 100%;
  text-align: center;

  &:hover {
    background-color: var(--el-table-cell-bmx-backgroundcolor) !important
  }


  .felxs {
    margin: 0 auto;

    > span {
      color: #000;
      font-size: 12px;
      display: block;
    }
  }
}


.menu-h {
  height: calc(100vh - 114px);
}

::v-deep .el-menu {
  background-color: #fff !important;
}

::v-deep .el-menu-item {
  color: #000;
  // height: 48px;
  background-color: #fff !important;
}

::v-deep .el-sub-menu__title {
  // height: 48px;
  color: #000 !important;
  background-color: #fff !important;
  // justify-content: center !important;
}

::v-deep .el-sub-menu .el-menu-item {
  // height: 48px;
  // line-height: 48px;
}
</style>
<style>
.el-menu-item.is-active {
  background-color: var(--el-table-cell-bmx-backgroundcolor) !important;
}

.el-menu-item:hover,
.el-sub-menu__title:hover {
  background-color: var(--el-table-cell-bmx-backgroundcolor) !important;
}
</style>
