<template>
  <div>
    <div class="toggle-menu" @click="toggleMenu">
      <img :class="isCollapse? 'toggle-menu-open' : ''" :src="require('@/assets/img/icon_menu.svg')" alt="" class="toggle-menu-icon">
    </div>
    <el-menu :default-active="activeIndex" :collapse="isCollapse" class="el-menu-vertical-demo" @select="onSelect" @open="onOpen" @close="onClose">
      <el-submenu v-for="menu in powerMenus" :key="menu.name" :index="menu.path">
        <template slot="title">
          <i :class="menu.meta ? menu.meta.icon : ''" class="icon-menu" />
          <span>{{ menu.meta ? menu.meta.title : '' }}</span>
        </template>
        <el-menu-item v-for="childMenu in menu.children" :key="childMenu.name" :index="childMenu.path">{{ childMenu.meta ? childMenu.meta.title : '' }}</el-menu-item>
      </el-submenu>
    </el-menu>
  </div>

</template>
<script>
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      isCollapse: false
    }
  },
  computed: {
    ...mapGetters(['addRoutes']),
    activeIndex() {
      return this.$route.path
    },
    powerMenus() {
      // 当前已经过滤后的数据
      const menus = this.addRoutes.filter(route => ['Search', 'Management', 'Audit'].includes(route.name))
      // 取出有孩子节点的
      return menus.filter(menu => menu.children.length > 0)
    }
  },
  methods: {
    toggleMenu() {
      this.isCollapse = !this.isCollapse
    },
    onSelect(path) {
      this.$router.push({ path })
    },
    onOpen(key, keyPath) {
      console.log(key, keyPath)
    },
    onClose(key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>
<style lang="scss" scoped>
.toggle-menu {
  position: absolute;
  top: 299px;
  right: 0;
  width: 16px;
  height: 60px;
  padding-top: 23px;
  padding-left: 3px;
  background: url(../../assets/img/icon_menu_bg.svg) no-repeat 0 0;
  background-size: 100% 100%;
  z-index: 1;
  cursor: pointer;
  .toggle-menu-icon {
    width: 14px;
    height: 14px;
  }
  .toggle-menu-open{
    transform: rotate(180deg);
  }
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 208px;
  }
</style>
