<template>
  <div class="aside">
    <div class="scrollbar">
      <el-scrollbar>
        <el-menu
          :default-active="route.path"
          :default-openeds="openKeys"
          active-text-color="#1890FF"
          background-color="#fff"
          text-color="#000"
          router
        >
          <template v-for="(item, index) in routes" :key="item.path">
            <el-sub-menu
              :index="'/' + item.path"
              v-if="item.children && item.children.filter((el) => !el.meta.hide).length > 0"
            >
              <template #title>
                <span> {{ item.meta.title }}</span>
              </template>
              <el-menu-item
                v-for="(ele, idx) in item.children.filter((el) => !el.meta.hide)"
                :index="'/' + item.path + '/' + ele.path"
                :key="ele.path"
              >
                {{ ele.meta.title }}</el-menu-item
              >
            </el-sub-menu>
            <el-menu-item :index="item.redirect || '/' + item.path" v-else-if="!item.meta.hide">
              <span>{{ item.meta.title }}</span>
            </el-menu-item>
          </template>
        </el-menu>
      </el-scrollbar>
    </div>
  </div>
</template>

<script setup>
import { useUserStore } from '@/stores/user'

const userStore = useUserStore()
const route = useRoute()

const routes = userStore.routerList

const openKeys = ref([])

watch(
  () => route.path,
  (path) => {
    const parent = '/' + path.split('/')[1]
    openKeys.value = [parent]
  },
  { immediate: true },
)
</script>

<style lang="scss" scoped>
.aside {
  height: calc(100vh - 60px);
  background-color: #fff;
  padding-top: 20px;

  .scrollbar {
    height: calc(100vh - 100px);
  }

  .el-scrollbar {
    background-color: #fff;

    .el-menu-item.is-active {
      background-color: rgba(24, 144, 255, 0.1);
    }

    .el-menu-item:hover {
      background-color: rgba(24, 144, 255, 0.1);
    }

    :deep(.el-sub-menu__title:hover) {
      background-color: rgba(24, 144, 255, 0.1);
    }
  }
}
</style>
