<template>
   <el-aside :style="AsideObj" >
    <el-menu
          background-color="#AA7151"
          :collapse="isCollapse"
          collapse-transition
          text-color="#fff"
          router
          :default-active="currentRoute"
          active-text-color="#ffd04b"
          unique-opened
          style="height: 100%;
          overflow-y: auto;"
        >
        <div style="height: 80px; color: white; font-weight: bold;
           display: flex; align-items: center; justify-content: center">
            <img src="../../assets/newlogo.png" alt="" style="height: 30px">
            <span style="margin-left: 5px" v-show="isShow">泠泷水月阁管理系统</span>
          </div>
          <!-- 遍历 menuRoutes，动态渲染菜单项 -->
          <template v-for="(item, index) in menuRoutes">
            <!-- 如果有子路由，使用 el-sub-menu -->
            <el-sub-menu
              v-if="item.children && item.children.length"
              :key="index"
              :index="index + ''"
            >
              <template #title>
                <el-icon>
                  <component :is="iconComponents[item.meta.icon]"></component>
                </el-icon>
                <span>{{ item.meta.title }}</span>
              </template>
              <!-- 二级菜单 -->
              <template v-for="(item2, index2) in item.children" :key="index2">
                <el-menu-item
                  v-if="!item2.meta?.hidden"
                  :index="item2.path"
                  :class="$route.path === item2.path ? 'is-active' : 'no-active'">
                <template #title>
                  <el-icon>
                    <component
                      :is="iconComponents[item2.meta.icon]"
                    ></component>
                  </el-icon>
                  {{ item2.meta.title }}
                </template>
              </el-menu-item>
              </template>
            </el-sub-menu>
          
            <!-- 如果没有子路由，使用 el-menu-item     代码备用，谨防路由被修改-->   
            <!-- <el-menu-item
              v-else
              :index="item.path"
              :class="$route.path === item.path ? 'is-active' : ''"
            >
              <el-icon>
                <component :is="iconComponents[item.meta.icon]"></component>
              </el-icon>
              <span>{{ item.meta.title }}</span>
            </el-menu-item> -->
          </template>
        </el-menu>
      </el-aside>
</template>

<script setup>
import {ref ,computed, onMounted } from 'vue'
import { defineProps } from 'vue';
import emitter from '@/utils/emitter'
import { useRouter } from 'vue-router';
import {
  More,
  House,
  User,
  Location,
  Histogram,
  DataAnalysis,
  Menu,
  Switch,
  Edit,
  Camera,
  Calendar,
  Box,
  Upload,
  Postcard,
  TakeawayBox,
  Files,
  DataBoard,
  MessageBox,
  Discount,
  Notification,
  Tickets,
  Money,
  Odometer,
  Notebook,
  Picture,
  PictureRounded
} from "@element-plus/icons-vue";
defineProps(['send-data'])

const showLog = ref(true)
const isCollapse = ref(false)
const isShow = ref(true)
const sideWidth = ref(250)
const AsideObj = ref({
  width: '250px'
})


emitter.on('Aside', (value) => {
  showLog.value = value
  if(showLog.value){
    AsideObj.value.width = '64px'
    isCollapse.value = true
    isShow.value = false
    sideWidth.value = 64
  }else{
    AsideObj.value.width = '250px'
    isCollapse.value = false
    isShow.value = true
    sideWidth.value = 250
  }
})

//动态路由导航
const router = useRouter()
const currentRoute = router.currentRoute.value.fullPath   //当前路由信息
// console.log('router--->',router.options.routes);

onMounted(()=>{
  console.log('uid--->',router.currentRoute.value.fullPath)
})

// 创建图标映射表
const iconComponents = {
  More,
  House,
  User,
  Location,
  Histogram,
  DataAnalysis,
  Menu,
  Switch,
  Edit,
  Camera,
  Calendar,
  Box,
  Upload,
  Postcard,
  TakeawayBox,
  Files,
  DataBoard,
  MessageBox,
  Discount,
  Notification,
  Tickets,
  Money,
  Odometer,
  Notebook,
  Picture,
  PictureRounded
  // 添加其他图标组件映射
};
// 过滤掉不需要展示的路由，并调整 layout 的子路由
const menuRoutes = computed(() => {
  // 获取所有路由
  const routes = router.options.routes;
  // 过滤掉不需要展示的路由并展开 layout 子路由
  const adjustedRoutes = routes.flatMap((route) => {
    // 隐藏 'layout' 路由但展示其子路由作为一级路由
    if (route.path === '/' && route.children) {
      return route.children.map((child) => ({
        ...child,
        path: child.path,
        meta: child.meta,
      }));
    }
    // 如果路由设置为隐藏，则跳过
    if (route.meta?.hidden ) {
      // console.log('11',route.children);
      return [];
    }
    return route;
  });
  // console.log('adj--->',adjustedRoutes);
  return adjustedRoutes;
});
// console.log('menuRoutes--->',menuRoutes.value);

</script>
<style scoped>
.no-active {
  color: #ffffff;
}
</style>