<template>
  <div class="main">
    <template v-for="menu in menuList" :key="menu.path">
      <!-- 一级菜单 -->
      <template v-if="!menu.children">
        <el-menu-item
          :index="menu.name"
          v-if="!menu.children && menu.meta.hidden !== true"
          @click="headerCliek"
        >
          <el-icon>
            <component v-if="menu.meta.menuIcon" :is="menu.meta.menuIcon" />
            <component v-else :is="Location" />
          </el-icon>
          <template #title>
            <span>{{ menu.meta.title }}</span>
          </template>
          <!-- <template #title>{{ menu.meta.title }}</template> -->
        </el-menu-item>
      </template>

      <!-- 只有一个子菜单 -->
      <template v-if="menu.children && menu.children.length === 1">
        <el-menu-item
          :index="menu.children[0].name"
          v-if="
            menu.children && menu.children.length === 1 && menu.children[0].meta.hidden !== true
          "
          @click="headerCliek"
        >
          <el-icon>
            <component v-if="menu.meta.menuIcon" :is="menu.meta.menuIcon" />
            <component v-else :is="Location" />
          </el-icon>
          <template #title>
            <span>{{ menu.children[0].meta.title }}</span>
          </template>
        </el-menu-item>
      </template>

      <!-- 特殊处理全站总览 -->
      <template
        v-if="menu.children && menu.children.length > 1 && menu.children[0].name == 'homeOverview'"
      >
        <el-menu-item
          :index="menu.children[0].name"
          v-if="menu.children && menu.children.length > 1 && menu.children[0].meta.hidden !== true"
          @click="headerCliek"
        >
          <el-icon>
            <component v-if="menu.children[0].meta.menuIcon" :is="menu.children[0].meta.menuIcon" />
            <component v-else :is="Location" />
          </el-icon>

          <template #title>
            <span>{{ menu.children[0].meta.title }}</span>
          </template>
        </el-menu-item>
      </template>

      <!-- 多个子菜单 -->
      <template
        v-if="menu.children && menu.children.length > 1 && menu.children[0].name != 'homeOverview'"
      >
        <el-sub-menu
          :index="menu.children[0].name"
          v-if="menu.children && menu.children.length > 1"
        >
          <template #title>
            <el-icon>
              <component
                v-if="menu.children[0].meta.menuIcon"
                :is="menu.children[0].meta.menuIcon"
              />
              <component v-else :is="Location" />
            </el-icon>
            <span v-if="!isCollapse" @click.stop="handleSubMenuTitleClick(menu.children[0])">{{
              menu.children[0].meta.title
            }}</span>
          </template>
          <menuDoCreateMenu :menuList="menu.children" />
        </el-sub-menu>
      </template>

      <!-- END -->
    </template>
  </div>
</template>

<script lang="ts">
export default {
  name: 'doCreateMenu'
};
</script>

<script lang="ts" setup>
import { Document, Menu as IconMenu, Location } from '@element-plus/icons-vue';
import { useRouter } from 'vue-router';
import { stairRouteNames } from '@/router/newIndex';
import emitter from '@/utils/emitter';

const props = withDefaults(
  defineProps<{
    menuList: any[];
    isCollapse?: boolean;
  }>(),
  {
    isCollapse: false
  }
);

function isStairRoute(routeName: string) {
  console.log('routeName');
  if (stairRouteNames.includes(routeName)) {
    emitter.emit('getStairRoute', routeName);
  }
}

const router = useRouter();

function headerCliek(val: any) {
  isStairRoute(val.index);
  router.push({
    name: val.index,
    query: { screen: val.index }
  });
}

function handleSubMenuTitleClick(menu: any) {
  isStairRoute(menu.name);
  // 点击子菜单标题时跳转到默认路由或父级路由
  router.push({
    name: menu.name,
    query: { screen: menu.name }
  });
}
</script>

<style scoped>
.el-menu--collapse .el-submenu__title span {
  display: none;
}
/*隐藏 > */
.el-menu--collapse .el-submenu__title .el-submenu__icon-arrow {
  display: none;
}
</style>
