<template>
  <el-menu :collapse-transition="false" :default-active="activeIndex2" mode="horizontal" @select="handleSelect">
    <template v-for="(item, index) in newRoute">
      <template v-if="index <= visibleNumber">
        <el-menu-item popper-class="nav-bar-menu-submenu-open" v-if="!item.children.length" :index="item.path" :key="index">
          <i :class="item.meta.icon"></i>
          {{ item.meta.title }}
        </el-menu-item>
        <el-menu-item popper-class="nav-bar-menu-submenu-open" v-else-if="item.children.length > 0 && item.children.every((i) => i.meta.hide)" :index="item.path" :key="index">
          <i :class="item.meta.icon"></i>
          {{ item.meta.title }}
        </el-menu-item>
        <el-submenu v-else popper-class="nav-bar-menu-submenu-open" :show-timeout="100" :hide-timeoutt="100" :key="index" :index="item.path">
          <template slot="title">
            <i :class="item.meta.icon"></i>
            {{ item.meta.title }}
          </template>
          <template v-for="(items, n) in item.children">
            <el-menu-item v-if="!items.meta.hide" :open="index.toString() + '-' + n.toString()" :key="n" :index="items.path">
              <i v-if="items.meta.icon" :class="items.meta.icon"></i>
              {{ items.meta.title }}
            </el-menu-item>
          </template>
        </el-submenu>
      </template>
    </template>
    <el-submenu v-if="newRoute.length > visibleNumber" index="more" popper-class="nav-bar-menu-submenu-open">
      <template slot="title">更多菜单</template>
      <template v-for="(item, index) in newRoute">
        <template v-if="index > visibleNumber">
          <el-menu-item popper-class="nav-bar-menu-submenu-open" v-if="!item.children.length" :index="item.path" :key="index">
            <i :class="item.meta.icon"></i>
            {{ item.meta.title }}
          </el-menu-item>
          <el-menu-item popper-class="nav-bar-menu-submenu-open" v-else-if="item.children.length > 0 && item.children.every((i) => i.meta.hide)" :index="item.path" :key="index">
            <i :class="item.meta.icon"></i>
            {{ item.meta.title }}
          </el-menu-item>
          <el-submenu v-else popper-class="nav-bar-menu-submenu-open" :show-timeout="100" :hide-timeoutt="100" :key="index" :index="item.path">
            <template slot="title">
              <i :class="item.meta.icon"></i>
              {{ item.meta.title }}
            </template>
            <template v-for="(items, n) in item.children">
              <el-menu-item v-if="!items.meta.hide" :open="index.toString() + '-' + n.toString()" :key="n" :index="items.path">
                <i v-if="items.meta.icon" :class="items.meta.icon"></i>
                {{ items.meta.title }}
              </el-menu-item>
            </template>
          </el-submenu>
        </template>
      </template>
    </el-submenu>
  </el-menu>
</template>

<script>
import { filterRoutes, generteMenus, changeSortMenus } from '@/utils/route'

export default {
  name: 'Menu',
  computed: {
    mainMenu() {
      return this.$router.getRoutes()
    },
    newRoute() {
      const froutes = filterRoutes(this.mainMenu)
      return changeSortMenus(generteMenus(froutes))
    }
  },

  data() {
    return {
      activeIndex2: '0',
      // 顶部栏初始数
      visibleNumber: 4
    }
  },
  mounted() {
    this.activeIndex2 = this.$route.path
  },
  watch: {
    $route() {
      this.activeIndex2 = this.$route.path
    }
  },
  methods: {
    handleSelect(key) {
      this.$router.push(key)
    }
  }
}
</script>
