<template>
  <div class="container">
    <template v-for="(moduleRoute, index) in modules" :key="index">
      <p class="module" @click="moduleRoute.length === 1 ? $router.push(moduleRoute[0].path) : null">
        {{ index }}
        <span v-if="moduleRoute.length === 1">-- {{ moduleRoute[0].meta.title }}</span>
      </p>
      <div class="module_content" v-if="moduleRoute.length !== 1">
        <div class="module_item" v-for="(route, i) of moduleRoute" :key="route.path" @click="$router.push(route.path)">
          {{ i + 1 }}. {{ route.meta.title }}
        </div>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      modules: [],
    };
  },
  mounted() {
    this.getModules()
  },
  methods: {
    getModules() {
      let routers = this.$router.getRoutes() || []
      let modules = {}

      routers = routers
        .filter((route) => route.meta.title)
        .forEach(route => {
          let moduleName = route.path.split('/')[1]

          if (!modules.hasOwnProperty(moduleName)) modules[moduleName] = []

          modules[moduleName].push(route)
        });

      this.modules = modules
    }
  },
};
</script>

<style scoped lang="less">
.container {
  overflow: scroll;
}

.module {
  background-color: #eceff9;
  line-height: 5vh;
  color: #4762C3;
  border: 1px solid #e4e7f2;
  font-size: 4vw;
  font-weight: 600;
  padding-left: 2vw;
}


.module_content {
  padding: 10px 20px;
}


.module_item {
  color: gray;
  line-height: 4vh;
}
</style>