<template>
  <div id="aside-1">
    <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 v-slot:title>
                  <el-icon><User /></el-icon>
                  <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 v-slot:title>
                      <el-icon><User /></el-icon>
                      <span>{{ subItem.name }}</span>
                    </template>
                    <el-menu-item v-for="(threeItem, i) in subItem.children" :key="i" :index="threeItem.path">
                      <template v-slot:title>
                        <el-icon><User /></el-icon>
                        <span>{{ threeItem.name }}</span>
                      </template>
                    </el-menu-item>
                  </el-submenu>
                  <el-menu-item v-else :index="subItem.path" :key="subItem.path">
                    <template v-slot:title>
                      <el-icon><User /></el-icon>
                      <span>{{ subItem.name }}</span>
                    </template>
                  </el-menu-item>
                </template>
              </el-submenu>
            </template>
            <template v-else>
              <el-menu-item :index="item.path" :key="item.path">
                <el-icon><User /></el-icon>
                <span>{{ item.name }}</span>
              </el-menu-item>
            </template>
          </template>
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted } from 'vue';
import type { Ref } from 'vue';
import store from '@/stores/counter';
import { 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([]);
let styleInfo = studio_style_Info;
let user: Ref<{ _id: string; name: string; unit_name: string; nick_name: string }> = ref({ _id: '', name: '', unit_name: '', nick_name: '' });
const onRoutes = () => {};
onMounted(async () => {
  user.value = store.state.user;
});
const getMenu = 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' });
  }
};
watch(user, (newVal) => {
  if (newVal && newVal._id) {
    if (newVal && newVal._id) getMenu();
    else ElMessage({ message: `暂无用户信息，无法获取菜单信息`, 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>
