<template>
  <div class="home">
    <Header
      v-if="route.meta && !route.meta.hideHeader"
      :color="route.meta.color"
      :metaObj="route.meta"
    />
    <div
      :class="!route.meta.hideHeader ? 'ptheader' : ''"
      :style="{ background: route.meta.color }"
    />
    <router-view :key="route.fullPath + 'f'" />
  </div>
</template>

<script lang="ts">
import {
  defineComponent,
  nextTick,
  onMounted,
  reactive,
  toRefs,
  onBeforeUnmount,
} from "vue";
import Header from "@/components/header/Comheader.vue";
import { useRoute, onBeforeRouteUpdate } from "vue-router";
import axios from "axios";
// import { formatDate } from "./utils";

export default defineComponent({
  components: {
    Header,
  },
  setup() {
    const route: any = useRoute();
    let itervel: any = null;
    const proxyData = reactive({
      route: route,
      transitionName: "slide-right",
      showHeader: false,
      isRouterAlive: true,
      reload() {
        proxyData.isRouterAlive = false;
        nextTick(() => {
          proxyData.isRouterAlive = true;
        });
      },
      itervel: itervel,
      getPadVersion() {
        axios.get(`/sgipad/pad_mtime`).then((res: any) => {
          let data: any = res.data || {};
          let pad_mtime: any = data.pad_mtime;
          let oldTime: any = localStorage.getItem("pad_mtime");
          if (oldTime && oldTime !== pad_mtime) {
            localStorage.setItem("pad_mtime", pad_mtime);
            window.location.reload();
            // proxyData.reload();
          } else {
            localStorage.setItem("pad_mtime", pad_mtime);
          }
        });
      },
      timerPadVersion() {
        proxyData.itervel = setInterval(() => {
          proxyData.getPadVersion();
        }, 300000);
      },
    });
    nextTick(() => {
      const document: any = window.document;
      document.addEventListener("touchstart", function (event: any) {
        if (event.touches.length > 1) {
          event.preventDefault();
        }
      });
      document.addEventListener("gesturestart", function (event: any) {
        event.preventDefault();
      });
    });
    onBeforeUnmount(() => {
      clearInterval(proxyData.itervel);
    });
    onMounted(() => {
      // proxyData.timerPadVersion();
    });
    return {
      ...toRefs(proxyData),
    };
  },
});
</script>
<style lang="scss" scoped>
.home {
  .child-view {
    position: absolute;
    width: 100%;
    transition: all 0.8s cubic-bezier(0.55, 0, 0.1, 1);
  }

  .slide-left-enter,
  .slide-right-leave-active {
    opacity: 0;
    -webkit-transform: translate(50px, 0);
    transform: translate(50px, 0);
  }

  .slide-left-leave-active,
  .slide-right-enter {
    opacity: 0;
    -webkit-transform: translate(-50px, 0);
    transform: translate(-50px, 0);
  }
}
</style>
