<template>
  <div class="box" @click="addTotalClick"></div>
  <!-- 地图容器 -->
  <Map v-show="$route.meta.showMap" @handle-GO="handleGO" @handle-Detail="handleDetail" />

  <!-- 退出弹框 -->
  <Logout v-model="logoutRef" @bingo="send('startexplorer')" />

  <!-- 倒计时返回首页提示 -->
  <AutoBackNotification v-if="countDownGif" :title="title" :delay="isWall ? countDownToWall : countDownNum" />
  <Teleport to="body">
    <Transition enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut">
      <BrandDetail v-if="showDetail" />
    </Transition>
  </Teleport>

  <Transition enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut">
    <Search v-if="showSearch" />
  </Transition>
  <Temperature />
  <Time />
  <SearchBar v-if="$route.path !== '/billboard'" />
  <Tabs />
</template>

<script setup>
import { defineAsyncComponent, watch, onMounted, ref, onBeforeUnmount } from 'vue'
import { storeToRefs } from 'pinia'
import { useStore } from '@/store/root'
import { useRouter, useRoute } from 'vue-router'
import { useHandleScreen } from '@/composables/useHandleScreen'
import { useLogout } from '@/composables/useLogout'
import { useInitMap } from '@/composables/useInitMap'
import Map from '@/components/Map/Map.vue'
const Logout = defineAsyncComponent(() => import('@/base/Logout/Logout.vue'))
const AutoBackNotification = defineAsyncComponent(() => import('@/base/AutoBackNotification/AutoBackNotification.vue'))
const BrandDetail = defineAsyncComponent(() => import('@/components/BrandDetail/BrandDetail.vue'))
const Search = defineAsyncComponent(() => import('@/components/Search/Search.vue'))
const Temperature = defineAsyncComponent(() => import('@/base/Temperature/Temperature.vue'))
const Time = defineAsyncComponent(() => import('@/base/Time/Time.vue'))
const SearchBar = defineAsyncComponent(() => import('./SearchBar.vue'))
const Tabs = defineAsyncComponent(() => import('./Tabs.vue'))

const router = useRouter()
const route = useRoute()
const store = useStore()
const { shop, showDetail, showSearch, sidebarList, language, showVoice } = storeToRefs(store)

const { logoutRef, resetClickNumber, setLogoutRef, addTotalClick } = useLogout()
const { title, countDownGif, isWall, countDownToWall, countDownNum, send, checkHandleScreen } = useHandleScreen(handleScreen)

function handleGO() {
  router.push('/nav')
}
function handleDetail() {
  store.SET_SHOW_DETAIL(true)
}

//指定时间返回首页时做的操作
async function handleScreen() {
  window.Map_QM.changeMapIPState(shop.value?.houseNum, shop.value?.formatColor)
  setLogoutRef(false)
  resetClickNumber()
  store.SET_SELECTED_MODULE(sidebarList.value[0].title)
  showDetail.value && store.SET_SHOW_DETAIL(false)
  showSearch.value && store.SET_SHOW_SEARCH(false)
  showVoice.value && store.SET_SHOW_VOICE(false)
  language.value !== 'zh' && store.SET_LANGUAGE('zh')
  await router.push('/billboard')
}

const timer = ref(null)
onMounted(() => {
  !window.Map_QM && useInitMap()
  timer.value = setInterval(() => {
    send(`type:online`)
  }, 30000)

  store.SET_CURRENT_THEME('dark')
  // let i = 0
  // setInterval(() => {
  //   i++
  //   store.SET_CURRENT_THEME(['main', 'fashion', 'highend'][i % 3])
  // }, 5000)
  window.addEventListener('touchend', checkHandleScreen)
})
onBeforeUnmount(() => {
  clearInterval(timer.value)
  window.removeEventListener('touchend', checkHandleScreen)
})

watch(route, to => {
  if (to.fullPath === '/guide' || to.fullPath === '/nav' || to.fullPath === '/billboard') {
    window?.Map_QM?.startRender()
  } else {
    window?.Map_QM?.cancelRender()
  }
})
</script>
<style>
.box {
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  height: 200px;
  z-index: 100;
}
</style>
