<template>
  <div class="main">
    <el-row>
      <el-col :span="24" class="aside">
        <el-menu
          :default-active="onRoutes"
          unique-opened
          router
          :background-color="styleInfo.menus_bg_color"
          :text-color="styleInfo.menus_txt_color"
          :active-text-color="styleInfo.menus_actxt_color"
        >
          <template v-for="item in items">
            <template v-if="item.type === '0'">
              <el-submenu :index="item._id" :key="item._id">
                <template>
                  <!-- <i :class="['iconfont', item.icon]"></i> -->
                  <span>{{ item.name }}</span>
                </template>
                <template v-for="subItem in item.children">
                  <el-submenu v-if="subItem.children && subItem.children.length > 0" :index="subItem._id" :key="subItem._id">
                    <template>
                      <i :class="['iconfont', subItem.icon]"></i>
                      <span>{{ subItem.name }}</span>
                    </template>
                    <el-menu-item v-for="(threeItem, i) in subItem.children" :key="i" :index="threeItem.path">
                      <template>
                        <i :class="['iconfont', threeItem.icon]"></i>
                        <span>{{ threeItem.name }}</span>
                      </template>
                    </el-menu-item>
                  </el-submenu>
                  <el-menu-item v-else :index="subItem.path" :key="subItem.path">
                    <template>
                      <i :class="['iconfont', subItem.icon]"></i>
                      <span>{{ subItem.name }}</span>
                    </template>
                  </el-menu-item>
                </template>
              </el-submenu>
            </template>
            <template v-else>
              <el-menu-item :index="item.path" :key="item.path">
                <i :class="['iconfont', item.icon]"></i>
                <span>{{ item.name }}</span>
              </el-menu-item>
            </template>
          </template>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

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

// 请求列表
let items: Ref<any[]> = ref([]);
items.value = project_module_menus;
let styleInfo=studio_style_Info
const onRoutes = () => {};
</script>

<style scoped>
.el-menu-item.is-active {
  background-color: #65cd94 !important;
}
.el-menu-item:focus,
.el-menu-item:hover {
  background-color: #65cd94 !important;
  color: #ffffff !important;
}
</style>
