<template>
  <Maximize v-show="maximize" />
  <Tabs v-show="tabs" />
  <el-main>
    <el-watermark id="watermark" :font="font" :content="watermark ? username : ''">
      <router-view v-slot="{ Component, route }">
        <transition appear name="fade-transform" mode="out-in">
          <keep-alive :include="keepAliveName">
            <component
              :is="createComponentWrapper(Component, route)"
              v-if="isRouterShow"
              :key="route.fullPath"
            />
          </keep-alive>
        </transition>
      </router-view>
    </el-watermark>
  </el-main>
</template>

<script setup>
  import { ref, onBeforeUnmount, provide, watch, h, computed, reactive } from 'vue';
  import { storeToRefs } from 'pinia';
  import { useDebounceFn } from '@vueuse/core';
  import { useGlobalStore } from '@/stores/modules/global';
  import { useKeepAliveStore } from '@/stores/modules/keepAlive';
  import { useUserStore } from '@/stores/modules/user';
  import Maximize from './components/Maximize.vue';
  import Tabs from '@/layouts/components/Tabs/index.vue';

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

  const keepAliveStore = useKeepAliveStore();
  const { keepAliveName } = storeToRefs(keepAliveStore);
  const isDark = computed(() => globalStore.isDark);
  const watermark = computed(() => globalStore.watermark);
  const username = computed(() => userStore.userInfo?.username);

  // 注入刷新页面方法
  const isRouterShow = ref(true);
  const refreshCurrentPage = (val) => (isRouterShow.value = val);
  provide('refresh', refreshCurrentPage);

  // 解决详情页 keep-alive 问题
  const wrapperMap = new Map();
  function createComponentWrapper(component, route) {
    if (!component) return;
    const wrapperName = route.fullPath;
    let wrapper = wrapperMap.get(wrapperName);
    if (!wrapper) {
      wrapper = { name: wrapperName, render: () => h(component) };
      wrapperMap.set(wrapperName, wrapper);
    }
    return h(wrapper);
  }
  const font = reactive({ color: 'rgba(153, 153, 153, 0.1)', fontSize: 24 });
  watch(
    isDark,
    () => (font.color = isDark.value ? 'rgba(153, 153, 153, 0.1)' : 'rgba(153, 153, 153, 0.1)'),
    {
      immediate: true,
    }
  );
  // 监听当前页面是否最大化，动态添加 class
  watch(
    () => maximize.value,
    () => {
      const app = document.getElementById('app');
      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;
      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>
