<template>
  <div class="main">
    <el-menu :collapse="false" unique-opened router background-color="#66363c">
      <template v-for="item in items">
        <!-- 二级菜单 -->
        <template v-if="item.type === '0'">
          <el-sub-menu :index="item._id || item.index" :key="item._id">
            <template v-slot:title>
              <span>{{ item.name }}</span>
            </template>
            <template v-for="subItem in item.children">
              <!-- 三级菜单 -->
              <el-sub-menu
                v-if="subItem.children && subItem.children.length > 0 && subItem.children.every((f:any) => f.type === '0' || f.type === '1')"
                :index="subItem._id"
                :key="subItem._id"
              >
                <template v-slot:title>
                  <span>{{ subItem.name }}</span>
                </template>
                <el-menu-item v-for="(threeItem, i) in subItem.children" :key="i" :index="threeItem.path">
                  <template v-slot:title>
                    <span>{{ threeItem.name }}</span>
                  </template>
                </el-menu-item>
              </el-sub-menu>
              <el-menu-item v-else :index="subItem.path" :key="subItem.path">
                <template v-slot:title>
                  <span>{{ subItem.name }}</span>
                </template>
              </el-menu-item>
            </template>
          </el-sub-menu>
        </template>
        <!-- 一级菜单 -->
        <template v-else>
          <el-menu-item :index="item.path" :key="item.path">
            <span>{{ item.name }}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import type { Ref } from 'vue';
// import { project_module_menus } from '@/layout/site';

// 请求列表
let items: Ref<any[]> = ref([]);
// items.value = project_module_menus;
</script>

<style scoped>
.el-menu {
  height: 92.5vh;
  overflow-y: auto;
}
.el-menu-item {
  color: var(--vt-c-white);
  font-size: 16px;
  font-weight: 500;
}
.el-menu-item span {
  overflow-y: auto;
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:deep().el-sub-menu__title {
  color: var(--vt-c-white);
  font-size: 16px;
  font-weight: 500;
}
:deep().el-sub-menu__title span {
  overflow-y: auto;
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.el-menu-item.is-active {
  color: var(--vt-c-black) !important;
  background-color: var(--vt-c-white) !important;
}
.el-menu-item:hover {
  color: var(--vt-c-black) !important;
  background-color: var(--vt-c-white) !important;
}
.el-menu::-webkit-scrollbar {
  width: 2px;
}
.el-menu::-webkit-scrollbar-thumb {
  border-radius: 10px;
  background: rgb(255, 255, 255);
}
</style>
