<script setup>
import Header from '@/components/pc/Header.vue'
import mobileHeader from '@/components/mobile/Header.vue'
import Footer from '@/components/pc/Footer.vue'
import mobileFooter from '@/components/mobile/Footer.vue'
import GoTop from '@/components/pc/GoTop.vue'
import contactTheCustomerS from '@/components/pc/contactTheCustomerS.vue'
import {useRouter} from "vue-router";
import { onMounted, onUnmounted, ref } from 'vue'
const router = useRouter()
const fuliterTop = [
  '/examHome',
  '/examDetail',
  '/examGuide',
  '/examHomeReport',
  '/onlineTest',
  '/reportCard',
  '/examPdf',
  '/examCheckCertificate',
]
let small_width = ref(true)
let realityWidth = ref(0)
// const isMobile = () => {
//   let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
//   return flag;
// }
const getWidth =() => {
  realityWidth.value = document.documentElement.clientWidth
  if ( realityWidth.value< 750){
    small_width.value = true
  }else {
    small_width.value = false
    console.log(router.currentRoute.value,'==')
    if (router.currentRoute.value.fullPath != '/'){
      console.log(router.currentRoute.value.path,'==')
      console.log(fuliterTop.includes(router.currentRoute.value.path),'ggg--')
      if (fuliterTop.includes(router.currentRoute.value.path)){
      }else {
        console.log('222')
        location.href = 'https://www.ufutx.com/web/#/'
      }
    }else {
      setTimeout(() => {
        getWidth()
      },100)
      // location.href = 'https://www.ufutx.com/web/#/'
    }
  }
}
onMounted(() => {
  window.addEventListener('resize', getWidth)
  getWidth()
})
onUnmounted(() => {
  window.removeEventListener('resize', getWidth)
})
</script>

<template>
  <div v-if="router.currentRoute.value.fullPath != '/'">
    <div v-if="fuliterTop.includes(router.currentRoute.value.path)">
      <router-view></router-view>
    </div>
    <div v-else>
      <Header v-if='!small_width' :key="router.currentRoute.value.fullPath"></Header>
      <mobileHeader v-else :key="router.currentRoute.value.path"></mobileHeader>
      <!-- 路由出口 :key="router.currentRoute.value.fullPath"-->
      <!-- 路由匹配到的组件将渲染在这里 -->
      <router-view></router-view>
      <Footer v-if='!small_width'></Footer>
      <mobileFooter v-else ></mobileFooter>
      <GoTop v-if='!small_width'></GoTop>
      <contactTheCustomerS v-if='!small_width'></contactTheCustomerS>
    </div>
  </div>

</template>

<style scoped>
#app {
  position: relative;
  font-family: Source Han Sans CN-Normal, Source Han Sans CN;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /*text-align: center;*/
  /*color: #2c3e50;*/
}
</style>

