<template>
  <el-scrollbar class="avue-menu">
    <div v-if="menu && menu.length == 0 && !isHorizontal" class="avue-sidebar--tip">
      {{ $t('menuTip') }}
    </div>
    <el-menu
      unique-opened
      :default-active="activeMenu"
      :mode="setting.sidebar"
      :collapse="getScreen(isCollapse)"
    >
      <sidebar-item :menu="menu"></sidebar-item>
    </el-menu>
  </el-scrollbar>
</template>

<script>
import { mapGetters } from 'vuex';
import website from '@/config/website';
import sidebarItem from './sidebarItem.vue';

export default {
  name: 'sidebar',
  components: { sidebarItem },
  inject: ['index'],
  created() {
    this.index.openMenu();
  },
  computed: {
    ...mapGetters(['isHorizontal', 'setting', 'menu', 'tag', 'isCollapse', 'menuId']),
    // 带参菜单的索引集合，用于激活态的精确匹配
    menuIndexes() {
      const props = website.menu;
      const indexes = new Set();
      const collect = list => {
        (list || []).forEach(item => {
          const query = item[props.query];
          if (query && Object.keys(query).length) {
            indexes.add(this.$router.resolve({ path: item[props.path], query }).fullPath);
          }
          collect(item[props.children]);
        });
      };
      collect(this.menu);
      return indexes;
    },
    activeMenu() {
      const route = this.$route;
      const { meta, path } = route;
      if (meta.activeMenu) {
        return meta.activeMenu;
      }
      // 完整地址命中带参菜单索引时精确高亮，其余场景按路径高亮
      const fullPath = route.fullPath;
      if (fullPath !== path && this.menuIndexes.has(fullPath)) {
        return fullPath;
      }
      return path;
    },
  },
};
</script>
<style lang="scss" scoped></style>
