<template>
  <aside :class="$route.path === '/template/update' ? 'app-aside none' : 'app-aside'">
    <nav class="nav">
      <el-menu :default-active="defaultActive" :router="true">
        <template v-for="(item, index) in menuList">
          <el-submenu :index="item.path" :key="item.path" v-if="item.children">
            <template #title><i :class="item.icon"></i>{{ item.name }}</template>
            <el-menu-item :index="subitem.path" v-for="subitem in item.children" :key="subitem.path">
              {{ subitem.name }}
            </el-menu-item>
          </el-submenu>
          <el-menu-item :index="item.path" :key="index" v-else>
            <i :class="item.icon"></i>{{ item.name }}
          </el-menu-item>
        </template>
      </el-menu>
    </nav>
  </aside>
</template>

<script>
export default {
  name: 'AppAside',
  data() {
    return {
      menuList: [
        { name: '证书模板管理', path: '/template/list', icon: 'el-icon-tickets' },
        { name: '动态变量管理', path: '/variable/list', icon: 'el-icon-set-up' },
        { name: '学员管理', path: '/student/list', icon: 'el-icon-user' },
        { name: '项目管理', path: '/project/list', icon: 'el-icon-copy-document' }
      ]
    }
  },
  computed: {
    defaultActive() {
      // 扁平菜单
      const flatMenuList = this.menuList.reduce((result, item) => {
        result.push(item)
        if (item.children) {
          result = result.concat(item.children)
        }
        return result
      }, [])
      const found = flatMenuList.reverse().find(item => {
        return this.$route.path.includes(item.path)
      })
      return found ? found.path : '/'
    },
    // 菜单权限
    menuPermissions() {
      return this.$store.state.permissions.filter(item => item.type === 2)
    }
  },
  methods: {
    menuVisible(tag) {
      if (!tag) {
        return true
      }
      return !!this.menuPermissions.find(item => item.tag === tag)
    }
  }
}
</script>

<style lang="scss">
.none {
  display: none;
}
.app-aside {
  position: sticky;
  top: 0;
  width: 200px;
  z-index: 100;
  background: #fff;
  border-right: 1px solid rgba(0, 0, 0, 0.12);
  overflow-x: hidden;
  overflow-y: auto;
  flex: 0 0 200px;
}
.nav {
  margin: 20px 0;
  .el-menu {
    border-right: 0;
    i {
      margin-right: 14px;
      font-size: 24px;
    }
    .el-icon-arrow-down {
      margin-right: 0;
      font-size: 16px;
    }
  }
  .el-menu-item {
    display: flex;
    align-items: center;
    margin: 0 16px;
    font-size: 16px;
    border-radius: 8px;
  }
  .el-submenu .el-menu-item {
    min-width: auto;
    padding-left: 58px !important;
  }
  .el-submenu__title {
    display: flex;
    align-items: center;
    margin: 0 16px;
    font-size: 16px;
    border-radius: 8px;
    &:hover {
      background-color: rgba(86, 100, 210, 0.04);
    }
  }
}
</style>
