<template>
  <div class="menu__containt">
    <!--          @select="handleSelect"-->
    <div class="el-menu-vertical">
      <el-scrollbar wrap-class="scrollbar-wrapper" height="100%">
        <el-menu
          router
          :collapse="isCollapse"
          :unique-opened="false"
          :default-active="activeMenu"
          @select="handleSelect"
        >
          <!--递归路由对象-->
          <sidebar-item
            v-for="route in routerList"
            :key="route"
            :item="route"
          />
        </el-menu>
      </el-scrollbar>
    </div>
    <div class="menu-footer p-r-23">
      <i
        class="cimfont c-p"
        @click="handleOpenOrClose"
        :class="[isCollapse ? 'cim-zhankai' : 'cim-shouqi']"
      ></i>
    </div>
  </div>
</template>
<script lang="ts">
import { computed, defineComponent, onMounted, ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
/* import { isExternal } from '@/utils'*/
import sidebarItem from './sidebarItem.vue'
import { useStore } from 'vuex'
import defaultData from '@/defaultData'
import _ from 'lodash'
export default defineComponent({
  components: {
    sidebarItem
  },
  emits: ['onOpenOrClose'],
  setup(props, { emit }) {
    const router = useRouter()
    const route = useRoute()
    const routerList: any = ref([])
    const store = useStore()
    let routes = ref(store.getters['userModule/menus'])
    const isCollapse = ref(false)
    const loopMenuIcon = (list: any, current: string): any => {
      for (const i in list) {
        if (list[i].path === current) {
          return [list[i]].filter(v => v.path === current)
          /*  if (list[i].children && list[i].children.length === 0) {
            return [list[i]].filter(v => v.path === current)
          } else {
            return [list[i]].filter(v => v.path !== current)
          } */
        }
        if (list[i].children?.length > 0) {
          const node = loopMenuIcon(list[i].children, current)
          if (node)
            return node.concat(list[i]).filter((v: any) => v.path !== current)
        }
      }
    }
    /* const routerList = computed(() => {
      const menuList = _.cloneDeep(store.getters['userModule/menus'])
      const { meta, path } = route
      const currentPath: any = meta.activeMenu ? meta.activeMenu : path
      const parentsList = loopMenuIcon(menuList, currentPath)
      if (parentsList) {
        parentsList[parentsList.length - 1].activeIcon = true
      }
      return filterArray(menuList)
    }) */
    const filterArray = (array: any) => {
      return array.filter((item: any) => {
        // 如果meta属性不存在或者hidden为true，则过滤该项
        if (!item.meta || item.meta.hidden === true) {
          return false
        }

        // 如果存在children属性，并且children数组不为空
        if (
          item.children &&
          Array.isArray(item.children) &&
          item.children.length > 0
        ) {
          item.children = filterArray(item.children) // 递归过滤children属性
          return item.children.length > 0 // 只保留有子项的元素
        }

        return true
      })
    }
    const activeMenu = computed(() => {
      const { meta, path } = route
      // if set path, the sidebar will highlight the path you set
      if (meta.activeMenu) {
        return meta.activeMenu
      }
      return path
    })

    // mothods
    const handleOpen = (key: any, keyPath: any) => {
      // eslint-disable-next-line no-console
      console.log('key is ', key)
      console.log('keyPath is ', keyPath)
    }
    const handleClose = (key: any, keyPath: any) => {
      // eslint-disable-next-line no-console
      console.log(key, keyPath)
    }
    const handleOpenOrClose = () => {
      isCollapse.value = !isCollapse.value
      emit('onOpenOrClose', isCollapse.value)
    }
    const handleSelect = (index: any, indexPath: any, item: any) => {
      let firstMenuId = ''
      firstMenuId = indexPath[0]
      routerList.value.forEach((item: any) => {
        item.meta.activeIcon = false
      })
      routerList.value.filter(
        (item: any) => item.path === firstMenuId
      )[0].meta.activeIcon = true
    }
    onMounted(() => {
      const menuList = defaultData
      const { meta, path } = route
      const currentPath: any = meta.activeMenu ? meta.activeMenu : path
      const parentsList = loopMenuIcon(menuList, currentPath)
      console.log(currentPath)
      console.log(parentsList)
      if (parentsList) {
        parentsList[parentsList.length - 1].meta.activeIcon = true
      }
      routerList.value = filterArray(menuList)
    })
    return {
      activeMenu,
      routes,
      isCollapse,
      routerList,
      handleOpen,
      filterArray,
      handleOpenOrClose,
      handleSelect,
      handleClose
    }
  }
})
</script>
<style lang="scss" scoped>
.el-menu-vertical {
  width: 100%;
  height: calc(100vh - 134px);
  text-align: left;
  border: none;
}

.menu__containt {
  height: calc(100vh - 80px);
  background: #fff;
}
:deep(.nest-menu) {
  &:has(& > li.is-active) {
    background-color: #f2f3f5;
    color: #fff;
  }
  &:has(.subMenu) {
    margin-left: 8px;
  }
}
:deep(.el-menu) {
  border-right: none;
  .el-menu-item {
    position: relative;
    border-radius: 2px;
    height: 64px;
    line-height: 64px;
    &:not(.is-active):hover {
      // color: #fff;
    }
    &:not(.menu-item).is-active,
    &:not(.menu-item).is-active:hover {
      font-family: 'ROBOTO_BOLD';
      color: #1d3359;
      background-color: #f2f3f5;
    }
    &:not(.menu-item):hover {
      background: #f2f3f5;
    }
    &.is-active.menu-item {
      font-family: 'ROBOTO_BOLD';
      background-color: #e8eaee;
      color: #1d3359;
      font-size: 22px;
      // background-color: #232324;
    }
  }
  .el-menu-item:not(.menu-item) {
    margin: 0 8px;
  }
  .el-sub-menu__icon-arrow {
    color: #000;
    font-size: 16px;
  }
  .is-active {
    .el-sub-menu__icon-arrow {
      color: #9da2ab;
    }
  }
  /*:deep(.menu-item.is-active) {
    background-color: #232324;
    color: #fff;
  }*/
}

.menu-footer {
  height: 56px;
  // border-top: 1px solid get-color('Text', 2);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  // color: get-color('Background', 2);
  i {
    font-size: 22px;
  }
}
</style>
<style lang="scss">
.el-menu--popup-container {
  .el-menu-item {
    margin: 0 8px;
    color: rgb(0 0 0 / 70%);
    border-radius: 2px;
    font-size: 20px;
    font-family: 'ROBOTO_REGULAR';
    &:hover,
    &.is-active {
      font-family: 'ROBOTO_REGULAR';
      background: #f2f3f5;
      color: #1d3359;
      font-size: 20px;
    }
    &.is-active {
      font-family: 'ROBOTO_BOLD';
      font-size: 22px;
    }
  }
}
</style>
