<template>
    <component :is="config.layout.layoutMode"></component>
</template>

<script setup lang="ts">
import { reactive } from 'vue'
import { useConfig } from '@/stores/config'
import { useNavTabs } from '@/stores/navTabs'
import { useAdminInfo } from '@/stores/adminInfo'
import { useDictData } from '@/stores/dictData'
import { useRoute } from 'vue-router'
import Default from '@/layouts/admin/container/default.vue'
import Classic from '@/layouts/admin/container/classic.vue'
import Streamline from '@/layouts/admin/container/streamline.vue'
import Double from '@/layouts/admin/container/double.vue'
import { onMounted, onBeforeMount } from 'vue'
import { handleAdminRoute, getFirstRoute, routePush } from '@/utils/router'
import router from '@/router/index'
import { useEventListener } from '@vueuse/core'
import { isEmpty } from 'lodash-es'
import { setNavTabsWidth } from '@/utils/layout'
import { adminBaseRoutePath } from '@/router/static'
import { getRouteMenu, dictDataCache } from '@/api/auth'
import { getAreaList } from '@/api/common'
import { BasicDictData } from '@/stores/interface'

defineOptions({
    components: { Default, Classic, Streamline, Double }
})

const navTabs = useNavTabs()
const config = useConfig()
const route = useRoute()
const adminInfo = useAdminInfo()
const dictData = useDictData()
const state = reactive({
    autoMenuCollapseLock: false
})

onMounted(() => {
    // if (!adminInfo.token) return router.push({ name: 'login' })

    init()
    setNavTabsWidth()
    useEventListener(window, 'resize', setNavTabsWidth)
})
onBeforeMount(() => {
    onAdaptiveLayout()
    useEventListener(window, 'resize', onAdaptiveLayout)
})

const init = async () => {
    await Promise.all([getAreaList(), dictDataCache()]).then(res => {
        dictData.state.area = res[0].data
        dictData.state.basic = res[1].data
    })
    /**
     * 后台初始化请求，获取站点配置，动态路由等信息
     */
    getRouteMenu().then((res: any) => {
        // const arr = [
        //     {
        //         id: 1,
        //         pid: 0,
        //         type: 'menu',
        //         title: '控制台',
        //         name: 'dashboard',
        //         path: 'dashboard',
        //         icon: 'fa fa-dashboard',
        //         menu_type: 'tab',
        //         url: '',
        //         component: '/src/views/govern/log/debug.vue',
        //         keepalive: 'dashboard',
        //         extend: 'none',
        //         children: []
        //     },
        //     {
        //         id: 3,
        //         pid: 0,
        //         type: 'menu',
        //         title: '审计管理',
        //         name: 'test',
        //         path: 'test',
        //         icon: 'el-icon-List',
        //         menu_type: 'tab',
        //         url: '',
        //         component: '/src/views/govern/setting/app/index.vue',
        //         keepalive: 'test',
        //         extend: 'none',
        //         children: [
        //             {
        //                 id: 1,
        //                 pid: 3,
        //                 type: 'menu',
        //                 title: '图表1',
        //                 name: 'comptroller/list1',
        //                 path: 'comptroller/list1',
        //                 icon: 'el-icon-List',
        //                 menu_type: 'tab',
        //                 url: '',
        //                 component: '/src/views/govern/user/roleCode/index.vue',
        //                 keepalive: 'auth/role',
        //                 extend: 'none',
        //                 children: []
        //             }
        //         ]
        //     },
        //     {
        //         id: 3,
        //         pid: 0,
        //         type: 'menu_dir',
        //         title: '电压暂降',
        //         name: 'voltage/sags',
        //         path: 'voltage/sags',
        //         icon: 'el-icon-BellFilled',
        //         menu_type: 'tab',
        //         url: '',
        //         extend: 'none',
        //         children: [
        //             {
        //                 id: 1,
        //                 pid: 3,
        //                 type: 'menu_dir',
        //                 title: '运行管理',
        //                 name: 'voltage/sags/operationsManagement',
        //                 path: 'voltage/sags/operationsManagement',
        //                 icon: 'fa-solid fa-bars-progress',
        //                 menu_type: 'tab',
        //                 url: '',
        //                 extend: 'none',
        //                 children: [
        //                     {
        //                         id: 1,
        //                         pid: 3,
        //                         type: 'menu',
        //                         title: '终端运行管理',
        //                         name: 'voltage/sags/operationsManagement/index',
        //                         path: 'voltage/sags/operationsManagement/index',
        //                         icon: 'fa-solid fa-recycle',
        //                         menu_type: 'tab',
        //                         url: '',
        //                         component: '/src/views/voltage/sags/operationsManagement/index.vue',
        //                         keepalive: 'voltage/sags/operationsManagement/index',
        //                         extend: 'none',
        //                         children: []
        //                     },
        //                     {
        //                         id: 1,
        //                         pid: 3,
        //                         type: 'menu',
        //                         title: '终端运行统计',
        //                         name: 'voltage/sags/operationsManagement/statistics',
        //                         path: 'voltage/sags/operationsManagement/statistics',
        //                         icon: 'fa-solid fa-chart-column',
        //                         menu_type: 'tab',
        //                         url: '',
        //                         component: '/src/views/voltage/sags/operationsManagement/statistics.vue',
        //                         keepalive: 'voltage/sags/operationsManagement/statistics',
        //                         extend: 'none',
        //                         children: []
        //                     },
        //                     {
        //                         id: 1,
        //                         pid: 3,
        //                         type: 'menu',
        //                         title: '监测点台账信息',
        //                         name: 'voltage/sags/operationsManagement/point',
        //                         path: 'voltage/sags/operationsManagement/point',
        //                         icon: 'fa-brands fa-square-pinterest',
        //                         menu_type: 'tab',
        //                         url: '',
        //                         component: '/src/views/voltage/sags/operationsManagement/point.vue',
        //                         keepalive: 'voltage/sags/operationsManagement/point',
        //                         extend: 'none',
        //                         children: []
        //                     }
        //                 ]
        //             },
        //             {
        //                 id: 2,
        //                 pid: 3,
        //                 type: 'menu',
        //                 title: '区域',
        //                 name: 'Event-boot/Region/distribution',
        //                 path: 'Event-boot/Region/distribution',
        //                 icon: 'el-icon-Management',
        //                 menu_type: 'tab',
        //                 url: '',
        //                 component: '/src/views/Event-boot/Region/distribution.vue',
        //                 keepalive: 'Event-boot/Region/distribution',
        //                 extend: 'none',
        //                 children: [
        //                     {
        //                         id: 2,
        //                         pid: 3,
        //                         type: 'menu',
        //                         title: '区域概览',
        //                         name: 'Region/overview',
        //                         path: 'Region/overview',
        //                         icon: 'el-icon-Promotion',
        //                         menu_type: 'tab',
        //                         url: '',
        //                         component: '/src/views/Event-boot/Region/overview.vue',
        //                         keepalive: 'Region/overview',
        //                         extend: 'none',
        //                         children: []
        //                     },
        //                     {
        //                         id: 2,
        //                         pid: 3,
        //                         type: 'menu',
        //                         title: '区域统计',
        //                         name: 'Region/statistics',
        //                         path: 'Region/statistics',
        //                         icon: 'el-icon-Promotion',
        //                         menu_type: 'tab',
        //                         url: '',
        //                         component: '/src/views/Event-boot/Region/statistics.vue',
        //                         keepalive: 'Region/statistics',
        //                         extend: 'none',
        //                         children: []
        //                     },
        //                     {
        //                         id: 1,
        //                         pid: 3,
        //                         type: 'menu',
        //                         title: '监测网分布',
        //                         name: 'Region/distribution',
        //                         path: 'Region/distribution',
        //                         icon: 'el-icon-Share',
        //                         menu_type: 'tab',
        //                         url: '',
        //                         component: '/src/views/Event-boot/Region/distribution.vue',
        //                         keepalive: 'Region/distribution',
        //                         extend: 'none',
        //                         children: []
        //                     }
        //                 ]
        //             }
        //         ]
        //     },
        //     {
        //         id: 2,
        //         pid: 0,
        //         type: 'menu_dir',
        //         title: '权限管理',
        //         name: 'auth',
        //         path: 'auth',
        //         icon: 'fa-solid fa-layer-group',
        //         menu_type: null,
        //         url: '',
        //         component: '',
        //         keepalive: 0,
        //         extend: 'none',
        //         children: [
        //             {
        //                 id: 3,
        //                 pid: 2,
        //                 type: 'menu',
        //                 title: '角色管理',
        //                 name: 'auth/role',
        //                 path: 'auth/role',
        //                 icon: 'el-icon-Avatar',
        //                 menu_type: 'tab',
        //                 url: '',
        //                 component: '/src/views/auth/role/index.vue',
        //                 keepalive: 'auth/role',
        //                 extend: 'none',
        //                 children: []
        //             },
        //             {
        //                 id: 13,
        //                 pid: 2,
        //                 type: 'menu',
        //                 title: '菜单规则管理',
        //                 name: 'auth/menu',
        //                 path: 'auth/menu',
        //                 icon: 'el-icon-Menu',
        //                 menu_type: 'tab',
        //                 url: '',
        //                 component: '/src/views/auth/menu/index.vue',
        //                 keepalive: 'auth/menu',
        //                 extend: 'none',
        //                 children: []
        //             }
        //         ]
        //     }
        // ]
        const handlerMenu = (data: any) => {
            data.forEach((item: any) => {
                item.path = item.routePath
                item.name = item.title
                item.keepalive = item.routePath
                item.component = item.routeName || '/src/views/Event-boot/Region/overview.vue'
                item.type = item.children && item.children.length > 0 ? 'menu_dir' : 'menu'
                item.menu_type = item.children && item.children.length > 0 ? null : 'tab'
                if (item.children) {
                    handlerMenu(item.children)
                }
            })
        }
        handlerMenu(res.data)
        handleAdminRoute(res.data)
        // 预跳转到上次路径
        if (route.params.to) {
            const lastRoute = JSON.parse(route.params.to as string)
            if (lastRoute.path != adminBaseRoutePath) {
                let query = !isEmpty(lastRoute.query) ? lastRoute.query : {}
                routePush({ path: lastRoute.path, query: query })
                return
            }
        }

        // 跳转到第一个菜单
        let firstRoute = getFirstRoute(navTabs.state.tabsViewRoutes)
        if (firstRoute) routePush(firstRoute.path)
    })
}

const onAdaptiveLayout = () => {
    let defaultBeforeResizeLayout = {
        layoutMode: config.layout.layoutMode,
        menuCollapse: config.layout.menuCollapse
    }

    const clientWidth = document.body.clientWidth
    if (clientWidth < 1024) {
        /**
         * 锁定窗口改变自动调整 menuCollapse
         * 避免已是小窗且打开了菜单栏时，意外的自动关闭菜单栏
         */
        if (!state.autoMenuCollapseLock) {
            state.autoMenuCollapseLock = true
            config.setLayout('menuCollapse', true)
        }
        config.setLayout('shrink', true)
        config.setLayoutMode('Classic')
    } else {
        state.autoMenuCollapseLock = false
        config.setLayout('menuCollapse', defaultBeforeResizeLayout.menuCollapse)
        config.setLayout('shrink', false)
        config.setLayoutMode(defaultBeforeResizeLayout.layoutMode)
    }
}
</script>
