<template>
  <!-- 编辑路由菜单栏 -->
  <div class="collapseMenu" ref="mainMenu">

  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, render, createVNode, VNode } from 'vue';
import routerMenuItem from './components/routerMenuItem.vue';
import { useRouter } from 'vue-router';
import { useMenuStore } from 'src/stores/useMenuStore';
const emit = defineEmits(['showAddDialog', 'showEditDialog', 'showDeleteDialog', 'showStatusDialog']);
const mainMenu = ref();
const menuSotre = useMenuStore();
const router = useRouter();
menuSotre.menuRouter = router;
// collapseMenu.value.appendChild(newDiv);
//菜单解析
const menuAnalysis = (menuInfo: menuType) => {
  // render(itemNode, fNode);
  if (menuInfo.children && menuInfo.children.length >= 1) {
    const childrens = [] as any;
    menuInfo.children.forEach((item) => {
      childrens.push(menuAnalysis(item));
    });
    const itemNode = createVNode(routerMenuItem, {
      itemInfo: {
        path: menuInfo.path,
        pathName: menuInfo.name,
        menuName: menuInfo.menuName,
        status: menuInfo.status,
        icon: menuInfo.icon,
        redirect: menuInfo.redirect
      } as menuItemType
    },
      childrens
    );
    return itemNode;
  }
  else {
    const itemNode = createVNode(routerMenuItem, {
      itemInfo: {
        path: menuInfo.path,
        pathName: menuInfo.name,
        menuName: menuInfo.menuName,
        status: menuInfo.status,
        icon: menuInfo.icon,
        redirect: menuInfo.redirect
      } as menuItemType
    });
    return itemNode;
  }

};
const props = defineProps({
  menuItemHeight: {
    type: String,
    default: '5vh',
  },
  menuInfos: {
    type: Object as any | [],
    required: true,
  }
});

onMounted(() => {
  if (props.menuInfos.length) {
    let vNodes: VNode[] = [] as VNode[];
    props.menuInfos.forEach((item: menuType) => {
      vNodes.push(menuAnalysis(item));
    })
    const finalVnode = createVNode('div', {}, vNodes);
    render(finalVnode, mainMenu.value);
  }
  else {
    render(menuAnalysis(props.menuInfos), mainMenu.value);
  }

  // const vnode=createVNode('div',{},['123']);
  // render(vnode,mainMenu.value);
});
</script>
<style style lang="scss" scoped></style>
