<template>
  <div class="home">
    <Header
      v-if="route.meta && !route.meta.hideHeader"
      :color="route.meta.color"
    />
    <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'

export default defineComponent({
  components: {
    Header
  },
  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 .8s cubic-bezier(.55, 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>
