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

  </div>
</template>
<script setup lang="ts">
import { ref, onMounted, render, createVNode, VNode, watch } from 'vue';
import collapseMenuItem from './collapseMenuItem.vue';
const emit = defineEmits(['showAddDialog', 'showEditDialog', 'showDeleteDialog', 'showStatusDialog']);
const mainMenu = ref();
const addDialogShow = (e: any) => {
  // console.log('展示添加弹窗');
  // console.log(e);
  emit('showAddDialog', e);
}
const editDialogShow = (e: any) => {
  // console.log('展示编辑弹窗');
  // console.log(e);
  emit('showEditDialog', e);
}
const deleteDialogShow = (e: any) => {
  // console.log('展示删除弹窗');
  // console.log(e);
  emit('showDeleteDialog', e);
}
const statusDialogShow = (status: any, id: any) => {
  emit('showStatusDialog', status ? 0 : 1, id);
}
// collapseMenu.value.appendChild(newDiv);
//菜单解析
const menuAnalysis = (menuInfo: menuInfoType) => {

  // render(itemNode, fNode);
  if (menuInfo.children) {
    const childrens = [] as any;
    menuInfo.children.forEach((item) => {
      childrens.push(menuAnalysis(item));
    });
    const itemNode = createVNode(collapseMenuItem, {
      itemInfo: {
        id: menuInfo.id,
        path: menuInfo.path,
        component: menuInfo.component,
        menuName: menuInfo.menuName,
        status: menuInfo.status,
        icon: menuInfo.icon,
        type: menuInfo.type,
        redirect: menuInfo.redirect,
        orders: menuInfo.orders,
        name: menuInfo.name
      } as menuItemType,
      deleteShow: deleteDialogShow,
      addShow: addDialogShow,
      editShow: editDialogShow,
      statusShow: statusDialogShow
    },
      childrens
    );
    return itemNode;
  }
  else {
    const itemNode = createVNode(collapseMenuItem, {
      itemInfo: {
        id: menuInfo.id,
        path: menuInfo.path,
        component: menuInfo.component,
        menuName: menuInfo.menuName,
        status: menuInfo.status,
        icon: menuInfo.icon,
        type: menuInfo.type,
        redirect: menuInfo.redirect,
        orders: menuInfo.orders
      } as menuItemType,
      deleteShow: deleteDialogShow,
      addShow: addDialogShow,
      editShow: editDialogShow,
      statusShow: statusDialogShow
    });
    return itemNode;
  }

};
const props = defineProps({
  menuItemHeight: {
    type: String,
    default: '5vh',
  },
  menuInfos: {
    type: Object as any | [],
    required: true,
  }
});
//菜单生成
const createdMenu = () => {
  if (props.menuInfos.length) {
    // console.log('输入菜单信息为', props.menuInfos);
    let vNodes: VNode[] = [] as VNode[];
    props.menuInfos.forEach((item: menuInfoType) => {
      // console.log('正在遍历');
      // console.log(item);
      vNodes.push(menuAnalysis(item));
    })
    const finalVnode = createVNode('div', {}, vNodes);

    render(finalVnode, mainMenu.value);
  }
  else {
    render(menuAnalysis(props.menuInfos), mainMenu.value);
  }
}
onMounted(() => {
  createdMenu();
  // const vnode=createVNode('div',{},['123']);
  // render(vnode,mainMenu.value);
});

watch(
  () => props.menuInfos,
  (newValue) => {
    createdMenu();
  }
);

</script>
<style style lang="scss" scoped></style>
