<template>
  <div :class="{'has-logo':showLogo}">
    <logo v-if="showLogo" :collapse="isCollapse"/>
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu
          :default-active="activeMenu"
          :collapse="isCollapse"
          :unique-opened="true"
          :collapse-transition="false"
          mode="vertical">
        <sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path"/>
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
import Logo from './Logo'
import SidebarItem from './SidebarItem'
import variables from '@/styles/variables.scss'

export default {
  components: {SidebarItem, Logo},
  computed: {
    sidebar() {
      return this.$store.state.app.sidebar
    },
    routes() {
        // return this.handlerLevel(this.filterPermissions(this.$router.options.routes));
        return this.filterPermissions(this.$router.options.routes);
    },
    activeMenu() {
      const route = this.$route;
      const {meta, path} = route;
      // if set path, the sidebar will highlight the path you set
      if (meta.activeMenu) {
        return meta.activeMenu
      }
      if (meta.activePath) {
        return meta.activePath
      }
      return path
    },
    showLogo() {
      return this.$store.state.app.sidebarLogo
    },
    variables() {
      return variables;
    },
    isCollapse() {
      return !this.sidebar.opened
    },
  },
  methods: {
    // 权限过滤
    filterPermissions(routes) {
      return routes.map(item => {
        return {...item}
      }).filter(item => {
        // 过滤子菜单权限
        if (item.children) {
          item.children = this.filterPermissions(item.children);
        }
        // 无权限检查：有权限定义，并且用户没有该权限
        if (item.meta && item.meta.permissions) {
          let permissions = item.meta.permissions.split(",");
          return permissions.some(role => {
            return this.$storage.getPermissions()?.includes(role)
          })
        } else {
          return true;
        }
      })
    },

    // 处理多级菜单修改为2级菜单造成的菜单逻辑错误,一般不需要调用
    handlerLevel(routes) {
      let errorNode = this.findErrorNode(routes);
      errorNode.forEach(node => {
        this.insertNode(routes, node);
      })
      return routes;
    },

    findErrorNode(routes) {
      let errorNode = [];
      routes.forEach(route => {
        if (route.children) {
          route.children = route.children.filter(child => {
            if (child.parent.name !== route.name) {
              errorNode.unshift(child);
            }
            return child.parent.name === route.name;
          })
        }
      })
      return errorNode;
    },

    insertNode(routes, node) {
      for (let i = 0; i < routes.length; i++) {
        if (node.parent.name === routes[i].name) {
          if (!routes[i].children) {
            routes[i].children = [];
          }
          routes[i].children.unshift(node);
          return true;
        } else if (routes[i].children) {
          if (this.insertNode(routes[i].children, node)) {
            return true;
          }
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">

@import "src/styles/variables";

::v-deep .el-submenu.is-active .el-submenu__title {
  color: #409EFF;
}

::v-deep .el-menu-item, ::v-deep .el-submenu__title {
  color: #999999;
}
</style>
