<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>

    <van-tabbar fixed route style="z-index: 100000">
      <van-tabbar-item replace to="/ElectronicMap" icon="location-o">电子地图</van-tabbar-item>
      <van-tabbar-item replace to="/questionnaire" icon="apps-o">问卷调查</van-tabbar-item>
      <van-tabbar-item replace to="/SpongeCulture" icon="bulb-o">海绵文化</van-tabbar-item>
      <van-tabbar-item replace to="/PublicAdvice" icon="user-o">公众建议</van-tabbar-item>
    </van-tabbar>

    <!-- 全局loading效果 -->
    <!-- <Loading v-if="showLoading" /> -->
    <!-- 开启底部安全区适配 -->
    <van-number-keyboard safe-area-inset-bottom />
  </div>
</template>
<script setup name="appContainer">
import { useStore } from '@/pinia/store.js';
import Header from '@/views/components/Header.vue';
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>