<template>
  <div v-for="(item, index) in items" :key="index">
    <div v-if="!item.hidden">
      <el-submenu :index="item.path" :key="item.path" v-if="item.children !== undefined && item.children?.length > 1"
        popper-append-to-body>
        <template #title>
          <!-- <i :class="item.meta.icon"></i> -->  <!-- 二级菜单的 -->  
          <el-icon :class="item.meta?.icon" style="margin-right:10px;font-size: 20px;"></el-icon>
          <span>{{ item.meta?.title }}</span>
        </template>
        <template v-for="(itemTwo, index) in item.children" :key="index">
          <el-menu-item v-if="!itemTwo.children" :index="itemTwo.path">
            <!-- <i :class="itemTwo.meta.icon"></i> --> <!-- 三级菜单的 -->  
            <el-icon :class="itemTwo.meta?.icon" style="margin-right:10px;font-size: 20px;"></el-icon>
            <template #title>{{ itemTwo.meta?.title }}</template>
          </el-menu-item>
          <el-submenu v-else :index="itemTwo.path">
            <template #title>
              <!-- <i :class="itemTwo.meta.icon"></i> -->
              <el-icon :class="itemTwo.meta?.icon" style="margin-right:10px;font-size: 20px;"></el-icon>
              {{ itemTwo.meta?.title }}
            </template>
            <el-menu-item v-for="(itemThree, index) in itemTwo.children" :key="index" :index="itemThree.path">
              <el-icon :class="itemThree.meta?.icon" style="margin-right:10px;font-size: 20px;"></el-icon>
              <template #title>{{ itemThree.meta?.title }}</template>
            </el-menu-item>
          </el-submenu>
        </template>
      </el-submenu>
      <el-menu-item v-for="(itemTwo, index) in item.children" :key="index" v-else :index="itemTwo.path">
        <!-- <i :class="itemTwo.meta.icon"></i> -->     <!-- 一级菜单和二级菜单统一大小 2023-03-25 guozhao --> 
        <el-icon :class="itemTwo.meta?.icon" style="margin-right:10px;height: 15px;width: 15px;font-size: 20px;margin-top: -4px;"></el-icon>
        <span style="margin-left: 5px;">{{ itemTwo.meta?.title }}</span>
        <!-- <template #title >{{ itemTwo.meta?.title }}</template> --> 
      </el-menu-item>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { useRouter } from "vue-router";
export default defineComponent({
  setup() {
    const router = useRouter();

    let items = router.options.routes;

    const userType = localStorage.getItem("UserType") + "";
    items.forEach(s => {
      const vis = s.meta == undefined ? false as boolean : (s.meta.CusVis == undefined ? false as boolean : s.meta.CusVis as boolean);
      if (userType === '1') {
        s.hidden = !vis;

        const unitType = localStorage.getItem("UnitType") + "";
        const createUnitFalg = localStorage.getItem("CreateUnitFalg") + "";

        if (s.meta !== null && s.meta !== undefined && s.meta.NoCreateHidden !== undefined) {
          if (createUnitFalg === '1') {

          } else {
            s.hidden = true;
          }
        }
      } else {
        s.hidden = vis;
      }
    })

    return {
      items,
    };
  },
});
</script>
<style lang="scss" scoped>
.el-menu--collapse .el-submenu__title span {
  display: none;
}

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