<template>
  <el-menu class="custom-base-menu" :default-active="matchPath" :mode="mode" unique-opened v-bind="$attrs">
    <sidebar-item v-for="route in sideMenuData" :menuItem="route" :key="route.path" :isLimitLevel="isLimitLevel" :base-path="basePath" :default-icon="defaultIcon"></sidebar-item>
  </el-menu>
</template>

<script lang="ts">
import { computed, defineComponent, PropType } from 'vue'
import { useRoute } from 'vue-router'
import SidebarItem from './SidebarItem.vue'
import { trimStart } from 'lodash-es'

export default defineComponent({
  components: { SidebarItem },
  props: {
    mode: {
      type: String as PropType<'horizontal' | 'vertical'>,
      default: 'vertical'
    },
    menuData: {
      type: Array
    },
    mainMenu: {
      type: Boolean,
      default: false
    },
    inlineIndent: {
      type: Number,
      default: 12
    },
    isLimitLevel: {
      type: Boolean,
      default: true
    },
    limitLevel: {
      type: Number,
      default: 4
    },
    basePath: {
      type: String,
      default: '/'
    },
    defaultIcon: {
      type: String,
      default: 'svg-dot'
    }
  },
  setup(props) {
    // 对菜单数据做过滤，去掉隐藏菜单
    function filterMenuData(data: any) {
      const menu: any[] = []
      data.forEach((item: any) => {
        if (!item.hidden) {
          const cache = { ...item }
          menu.push(cache)
          if (item.children && item.path.split('/').length - 1 < props.limitLevel) {
            cache.children = filterMenuData(item.children)
          } else {
            cache.children = null
          }
        }
      })
      return menu.length ? menu : null
    }
    const sideMenuData = computed(() => filterMenuData(props.menuData))
    const route = useRoute()
    const matchPath = computed(() => {
      return `/${trimStart(route.path, '/')
        .split('/', props.limitLevel - 1)
        .join('/')}`
    })
    return {
      matchPath,
      sideMenuData
    }
  }
})
</script>
<style lang="scss" scoped>
.custom-base-menu {
  background: var(--custom-base-color-background);
  color: var(--custom-base-color-text);
  border-right: none;
  height: 100%;
  :deep(.ant-menu-submenu-arrow) {
    color: var(--custom-base-color-text);
  }
}
</style>
