<template>
  <div class="kl-menu">
    <el-scrollbar height="100%">
      <el-menu class="el-menu-vertical" :default-active="activeRouteComputed" router>
        <KlMenuItem
          v-for="menu in childRoutes"
          :key="menu?.component?.toString()"
          :title="menu?.meta?.title + ''"
          :children="menu.children"
          :index="menu.path"
        />
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script lang="ts" setup>
  import KlMenuItem from './kl-menu-item.vue'
  import { RouteRecordRaw, useRoute } from 'vue-router'
  import { computed } from 'vue'

  const modulesFiles = import.meta.globEager('@/router/modules/*.ts')
  const childRoutes: RouteRecordRaw[] = []
  Object.keys(modulesFiles).forEach((path: string) => {
    const module = modulesFiles[path] as any
    if (module?.default) {
      childRoutes.push(...module.default)
    }
  }, {})

  const route = useRoute()
  const activeRouteComputed = computed(() => {
    return route.path
  })
</script>

<style lang="scss" scoped>
  .kl-menu {
    height: 100%;
    ::v-deep(.el-scrollbar) {
      .el-scrollbar__bar.is-vertical {
        display: block !important;
        .el-scrollbar__thumb {
          width: 0px;
          float: right;
        }
      }
    }
  }
  .el-menu-vertical {
    border: none;
    .el-sub-menu__title,
    .el-menu-item {
      font-size: 15px;
    }
    .el-menu-item.is-active {
      background-color: #ebf1ff;
      border-right: 4px solid $color-primary;
    }
    .el-sub-menu {
      .el-menu-item {
        text-indent: 10px;
      }
    }
  }
</style>
