<template>
    <Maximize v-if="maximize" />
    <Tabs v-if="tabs" />
    <el-main>
        <router-view v-slot="{ Component, route }">
            <transition appear name="fade-transform" mode="out-in">
                <keep-alive :include="keepAliveName">
                    <component :is="Component" v-if="isRouterShow" :key="route.fullPath" />
                </keep-alive>
            </transition>
        </router-view>
    </el-main>
</template>

<script setup lang="ts">
//onBeforeUnmount
import { ref, provide, watch } from "vue";
import { storeToRefs } from "pinia";
// import { useDebounceFn } from "@vueuse/core";
import { useGlobalStore } from "@/stores/modules/global";
import { useKeepAliveStore } from "@/stores/modules/keepAlive";
import Maximize from "./components/Maximize.vue";
import Tabs from "@/layouts/components/Tabs/index.vue";

const globalStore = useGlobalStore();
//isCollapse
const { maximize, layout, tabs } = storeToRefs(globalStore);

const keepAliveStore = useKeepAliveStore();
const { keepAliveName } = storeToRefs(keepAliveStore);
// 注入刷新页面方法
const isRouterShow = ref(true);
const refreshCurrentPage = (val: boolean) => {
    isRouterShow.value = val;
};

provide("refresh", refreshCurrentPage);

// 监听当前页面是否最大化，动态添加 class
watch(
    () => maximize.value,
    () => {
        const app = document.getElementById("app") as HTMLElement;
        if (maximize.value) app.classList.add("main-maximize");
        else app.classList.remove("main-maximize");
    },
    { immediate: true }
);

// 监听布局变化，在 body 上添加相对应的 layout class
watch(
    () => layout.value,
    () => {
        const body = document.body as HTMLElement;
        body.setAttribute("class", layout.value);
    },
    { immediate: true }
);

// 监听窗口大小变化，折叠侧边栏
// const screenWidth = ref(0);
// const listeningWindow = useDebounceFn(() => {
//     screenWidth.value = document.body.clientWidth;
//     if (!isCollapse.value && screenWidth.value < 1200) globalStore.setGlobalState("isCollapse", true);
//     if (isCollapse.value && screenWidth.value > 1200) globalStore.setGlobalState("isCollapse", false);
// }, 100);
// window.addEventListener("resize", listeningWindow, false);
// onBeforeUnmount(() => {
//     window.removeEventListener("resize", listeningWindow);
// });
</script>

<style scoped lang="scss">
@use "./index.scss";
</style>
