<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" />
  </div>
</template>

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

export default defineComponent({
  components: {
    Header,
  },
  beforeRouteLeave(to, from, next) {
    debugger;
    if (to.name === "home") {
      let mac: any = getCookieMac();
      from.query.mac = mac;
    }
    next();
  },
  setup() {
    const route: any = useRoute();
    const data = reactive({
      route: route,
      transitionName: "slide-right",
      showHeader: false,
    });
    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();
      });
    });
    onMounted(() => {
      // debugger
    });
    return {
      ...toRefs(data),
    };
  },
});
</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>
