<template>
  <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-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" :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>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import type { Ref } from 'vue';
import { project_module_menus, studio_style_Info } from '../../../layout/site';
import { ElMessage } from 'element-plus';
// 接口
import { ModuleStore } from '@common/src/stores/admin/module'; //模块
import { RoleStore } from '@common/src/stores/admin/role'; //模块
import type { IQueryResult } from '@/util/types.util'; //
const module = ModuleStore();
const role = RoleStore();

// 请求列表
let items: Ref<any[]> = ref([]);
items.value = project_module_menus;
let styleInfo = studio_style_Info;
const onRoutes = () => {};
onMounted(async () => {
  let name = import.meta.env.VITE_APP_ROUTER;
  const res: IQueryResult = await module.query({ name: name, is_use: 'Y' });
  if (res && res.errcode == '0') {
    if (res.total > 0) {
      let moduleInfo = res.data[0];
      let roleInfo = await role.um();
      if (roleInfo.errcode == '0') {
        if (roleInfo.data) {
          let menus = roleInfo.data[moduleInfo._id];
          if (menus && menus.length > 0) {
            items.value = menus;
          }
        }
      }
    }
  } else {
    ElMessage({ message: `${res.errmsg}`, type: 'error' });
  }
});
</script>

<style scoped>
.main {
  width: 100%;
}
.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>
