<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import Navbar from '@/viewsnew/application/sfcEditor/NavbarEditor/previewNavSfc.vue'
import { useRoute, useRouter } from 'vue-router'
import { getMenuTree } from '@/api/permission/menu'
import { moduleList } from '@/api/application/module'
const route = useRoute()
const applicationId: any = ref('')
const menuList = ref([])
const isNavbar = ref(false)
const projectName: any = ref('')
const projectList: any = ref({})
onMounted(() => {
    if (route.query.id) {
        applicationId.value = route.query.id
        projectName.value = route.query.name
        getmenuinfo()
    }
})
const processMenuTree = (menuNodes: any[], moduleData: any[]) => {
    const typeMap = new Map(
        moduleData.map(({ id, type }) => [id, type])
    );

    const traverseMenu = (nodes: any[]) => {
        for (const node of nodes) {
            if (node.module_id && typeMap.has(node.module_id)) {
                node.module_type = typeMap.get(node.module_id);
            }
            if (node.children?.length) {
                traverseMenu(node.children);
            }
        }
    };
    traverseMenu(menuNodes);
    return menuNodes;
};
function getmenuinfo() {
    const params = {
        appId: applicationId.value,
        name: '',
        isdisplay: ''
    }
    getMenuTree(params).then(res => {
        menuList.value = res.data
        const paramss = { appId: applicationId.value }
        moduleList(paramss).then(ress => {
            var arr = ress.data.data
            let list: any = {}
            menuList.value = processMenuTree(menuList.value, arr)
            arr.forEach((item: any) => {
                if (item.type == '02' && item.node_type == '02') {
                    list = item
                }
            })
            if (list.id) {
                projectList.value = list
                isNavbar.value = true
            }
        })
    })
}
</script>
<template>
    <div class="system-box">
        <Navbar v-if="isNavbar" :menuList="menuList" :projectName="projectName" :isFixed="true"
            :projectId="projectList.id" :applicationId="applicationId" :isExecuteEvent="false">
        </Navbar>
    </div>
</template>

<style lang="less" scoped>
.system-box {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}
</style>
