<template>
  <!-- 地图容器 -->
  <Map v-show="$route.meta.showMap" @handle-GO="handleGO" />

  <!-- 退出弹框 -->
  <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>

  <Transition enter-active-class="animate__animated animate__fadeInLeft" leave-active-class="animate__animated animate__fadeOutLeft">
    <Sidebar v-show="$route.meta.showMenu" />
  </Transition>
</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 Sidebar = defineAsyncComponent(() => import('@/components/Sidebar/Sidebar.vue'))
const BrandDetail = defineAsyncComponent(() => import('@/components/BrandDetail/BrandDetail.vue'))
const Search = defineAsyncComponent(() => import('@/components/Search/Search.vue'))

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

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

function handleGO() {
  router.push('/nav')
}

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

const timer = ref(null)
onMounted(() => {
  !window.Map_QM && useInitMap()
  timer.value = setInterval(() => {
    send(`type:online`)
  }, 30000)
  window.addEventListener('touchend', checkHandleScreen)
})
onBeforeUnmount(() => {
  clearInterval(timer.value)
  window.removeEventListener('touchend', checkHandleScreen)
})

watch(route, to => {
  if (to.fullPath === '/guide' || to.fullPath === '/nav') {
    window?.Map_QM?.startRender()
  } else {
    window?.Map_QM?.cancelRender()
  }
})
</script>
