<!-- 带有二级菜单的layout -->
<template>
  <div class="component-container home-container">
    <aside class="aside">
      <el-menu :default-active="selectedKeys" :default-openeds="openKeys" router class="el-menu-vertical">
        <template v-for="item in subMenus" :key="item.name">
          <el-sub-menu v-if="item.children" :index="item.name">
            <template #title>
              <component v-if="item.meta?.icon" :is="item.meta.icon" />
              <span class="menu-title">{{ item.meta?.title }}</span>
            </template>
            <el-menu-item v-for="child in item.children" :key="child.name" :index="child.name">
              {{ child.meta?.title }}
            </el-menu-item>
          </el-sub-menu>
          <el-menu-item v-else :index="item.name">
            <!-- <SvgIcon icon-name="overview" /> -->
            <component v-if="item.meta?.icon" :is="item.meta?.icon" />
            <span class="menu-title">
              {{ item.meta?.title }}
            </span>
          </el-menu-item>
        </template>
      </el-menu>
    </aside>
    <div class="main">
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref, watch, computed } from 'vue';
  import { useRoute } from 'vue-router';

  // 当前路由
  const currentRoute = useRoute();
  const activeMenu = currentRoute.meta?.activeMenu || null; // activeMenu undefined，null 或 空字符串，统一变为 null。
  const selectedKeys = ref<string>((activeMenu ?? currentRoute.name) as string);

  const openKeys = ref<string[]>([]);

  // 将菜单数组过滤掉隐藏的菜单
  const filterHiddenMenus = (menus: any[]) => {
    return menus.filter((menu) => !menu.meta?.hidden);
  };

  function filterHiddenItems(arr: any[]): any[] {
    return arr.filter((item) => {
      if (item.meta && item.meta.hidden) {
        return false;
      }
      if (item.children && Array.isArray(item.children)) {
        item.children = filterHiddenItems(item.children);
      }
      return true;
    });
  }

  const subMenus = computed(() => {
    return filterHiddenItems(currentRoute.matched[0].children);
  });

  // 跟随页面路由变化，切换菜单选中状态
  watch(
    () => currentRoute.fullPath,
    () => {
      const matched = currentRoute.matched;
      openKeys.value = matched.map((item) => item.name) as string[];
      const activeMenu: string = (currentRoute.meta?.activeMenu as string) || '';
      selectedKeys.value = activeMenu ? activeMenu : (currentRoute.name as string);
    },
  );
</script>

<style scoped lang="scss">
  .home-container {
    display: flex;
    gap: 10cpx;
    padding: 10cpx;
    height: 100%;
  }
  .aside,
  .main {
    height: 100%;
    border-radius: 4cpx;
    background: $white-color;
  }
  .aside {
    width: 270cpx;
  }
  .main {
    flex: 1;
  }
  .el-menu-vertical {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 4cpx;
    .el-menu-item,
    :deep(.el-sub-menu__title) {
      font-size: 18cpx;
      color: #333;
    }
    .el-menu-item.is-active {
      color: $white-color;
      background-color: $primary-color;
    }
    .el-menu-item:first-child.is-active {
      border-radius: 4cpx 4cpx 0 0;
    }
  }

  .el-menu-item,
  .el-sub-menu {
    svg {
      color: #1777ff;
    }
  }
  .el-menu-item {
    &.is-active {
      svg {
        color: #fff;
      }
    }
  }

  .menu-title {
    margin-left: 10px;
  }
</style>
