<template>
  <div id="appContainer" v-cloak>
    <Header />
    <router-view v-slot="{ Component }">
      <!-- 缓存 wrap($route.fullPath, Component)-->
      <keep-alive>
        <component :is="Component" :key="$route.name" v-if="$route.meta.keepAlive" />
      </keep-alive>
      <!-- 不缓存 -->
      <component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive" />
    </router-view>
    <!-- 全局loading效果 -->
    <Loading v-if="showLoading" />
    <!-- 开启底部安全区适配 -->
    <van-number-keyboard safe-area-inset-bottom />
  </div>
</template>
<script setup name="appContainer">
import Loading from "@/views/components/Loading.vue";
import Header from "@/views/components/Header.vue";
import { useStore } from "@/pinia/store.js";

const showLoading = ref(false);
const pinias = useStore();

watch(
  () => {
    pinias.loading;
  },
  (val) => {
    showLoading.value = pinias.loading;
  },
  { immediate: true, deep: true }
);
/**
 * keepalive热更新报错 TypeError: parentComponent.ctx.deactivate is not a function
 */
// 自定义name的壳的集合
const wrapperMap = new Map();
// 为keep-alive里的component接收的组件包上一层自定义name的壳
function wrap(fullPath, component) {
  let wrapper;
  // 重点就是这里，这个组件的名字是完全可控的，
  // 只要自己写好逻辑，每次能找到对应的外壳组件就行，完全可以写成任何自己想要的名字
  // 这就能配合 keep-alive 的 include 属性可控地操作缓存
  if (component) {
    const wrapperName = fullPath;
    if (wrapperMap.has(wrapperName)) {
      wrapper = wrapperMap.get(wrapperName);
    } else {
      wrapper = {
        name: wrapperName,
        render() {
          return h("div", { className: "vaf-page-wrapper" }, component);
        },
      };
      wrapperMap.set(wrapperName, wrapper);
    }
    return h(wrapper);
  }
}
onMounted(() => {
  wrap();
});
onBeforeMount(() => {});
</script>
<style lang="less">
[v-cloak] {
  display: none;
}

#appContainer {
  width: 100%;
  height: 100vh;
  background: #fff;
  position: relative;
  z-index: 0;
  margin: 0;
}
</style>