<template>
    <div class="mx-1">
        <el-config-provider v-bind="globalConfig">
            <router-view v-slot="{ Component, route  }">
                <transition name="fade" mode="out-in">
                    <div style="height: 100vh" class="overflow-auto">
                        <component v-if="route.meta.keepAlive != null && (route.meta.groups ? true: route.meta.keepAlive === false)" :is="Component"
                                   :key="route.meta.groups ? route.meta.groups : route.path"/>
                        <keep-alive v-else>
                            <component :is="Component" :key="route.meta.groups ? route.meta.groups : route.path"/>
                        </keep-alive>
                    </div>
                </transition>
            </router-view>
        </el-config-provider>
    </div>
</template>

<script setup>
import {computed, onBeforeUnmount} from "vue";
import {destroyDebugger, switchDebugger} from "src/utils/debugger/eruda";
import {useGlobalConfig} from "src/store/globalConfig";
import {mapWritableState} from "pinia";
import {useMagicKeys, whenever} from "@vueuse/core";
const {ctrl_alt_shift_x} = useMagicKeys()
const globalConfig = computed(mapWritableState(useGlobalConfig,['ui']).ui)

whenever(ctrl_alt_shift_x,()=>{
    switchDebugger()
})

onBeforeUnmount(()=>{
    destroyDebugger()
})
</script>
