<script setup>
import headView from "@/components/headView.vue";
import Businesses from "@/components/Businesses.vue";
import Businesses2 from "@/components/Businesses2.vue";
import { ref, nextTick, provide, watch, onMounted, onUnmounted } from "vue";
import mitt from "@/utils/mitt";

const show = ref(false);
const reload = () => {
  show.value = false;
  nextTick(() => {
    show.value = true;
  })
}

provide('reload', reload);

// 无操作每三分钟刷新页面
let timer = null;
const startReLoad = () => {
  clearInterval(timer);
  timer = setInterval(() => {
    reload();
  }, 3 * 60 * 1000);
}

onMounted(() => {
  mitt.on('map_info', e => {
    reload();
    startReLoad();
    window.addEventListener('mousemove', startReLoad);
    window.addEventListener('keypress', startReLoad);
    window.addEventListener('click', startReLoad);
  })
})

onUnmounted(() => {
  window.removeEventListener('mousemove', startReLoad);
  window.removeEventListener('keypress', startReLoad);
  window.removeEventListener('click', startReLoad);
})

</script>

<template>
  <dv-full-screen-container class="body">
    <headView></headView>
    <div style="height: calc(100% - 3.75rem)" v-if="show">
      <router-view v-slot="{ Component }">
        <transition name="fade">
          <component :is="Component"></component>
        </transition>
      </router-view>
    </div>
    <Businesses class="businesses"></Businesses>
    <Businesses2 class="businesses"></Businesses2>
  </dv-full-screen-container>
</template>

<style scoped lang="scss">
.body {
  background-image: url("/src/assets/img/bg.png");
  background-size: 100% 100%;
  color: #fff;
  background-color: rgba($color: #000000, $alpha: 0.8);
}
.businesses {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 999999;
  width: 100%;
  height: 100%;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
