<!-- eslint-disable vue/no-deprecated-slot-attribute -->
<template>
  <div id="Sidebar">
    <el-row class="sidebar">
      <el-col :span="24" class="main">
        <el-col :span="24" class="one">
          <el-menu
            class="sidebar-el-menu"
            :default-active="onRoutes"
            unique-opened
            router
            :background-color="styleInfo.backColor"
            :text-color="styleInfo.textColor"
            :active-text-color="styleInfo.activeColor"
          >
            <template v-for="item in items">
              <template v-if="item.type === '0'">
                <el-sub-menu :index="item._id" :key="item._id">
                  <template #title>
                    <i :class="['iconfont', item.icon]"></i>
                    <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 #title>
                        <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">
                        <i :class="['iconfont', threeItem.icon]"></i>
                        <span>{{ threeItem.name }}</span>
                      </el-menu-item>
                    </el-sub-menu>
                    <el-menu-item v-else :index="subItem.path" :key="subItem.path">
                      <i :class="['iconfont', subItem.icon]"></i>
                      <span>{{ subItem.name }}</span>
                    </el-menu-item>
                  </template>
                </el-sub-menu>
              </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-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { menuInfo } from '../../../layout/site'
import { ElMessage } from 'element-plus'
import store from '@/stores/counter'
import type { Ref } from 'vue'
import { ref, onMounted, watch } from 'vue'
import { useRoute } from 'vue-router'
import { ModuleStore } from '@common/src/stores/system/module' //模块
import { RoleStore } from '@common/src/stores/system/role' //模块
import type { IQueryResult } from '@/util/types.util' //
const module = ModuleStore()
const role = RoleStore()
const route = useRoute()
let onRoutes = route.path
let user: Ref<any> = ref({})
const styleInfo: Ref<any> = ref(menuInfo.info)
let items: Ref<any> = ref([])
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: '0' })
  if (res && res.errcode == '0') {
    if (res.total > 0) {
      let moduleInfo = res.data[0]
      let roleInfo: IQueryResult = 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' })
    }
  },
  {
    deep: true
  }
)
</script>
<style scoped lang="scss">
.sidebar::-webkit-scrollbar {
  width: 0;
}
.sidebar-el-menu:not(.el-menu--collapse) {
  width: 201px;
}
.sidebar > ul {
  height: 100%;
}
.main {
  .one {
    .iconfont {
      font-size: 18px;
      margin: 0 5px 0 0;
    }
  }
}
</style>
