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

  <!-- 倒计时返回首页提示 -->
  <AutoBackNotification v-if="countDownGif" :title="title" :delay="isWall ? countDownToWall : countDownNum" />

  <Transition enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut">
    <Search v-if="showSearch" />
  </Transition>
  <Temperature />

  <SearchBar v-if="path !== '/billboard'" />
  <img v-if="config.projectLogo && config.projectLogo.length" :src="'./static/offline' + config.projectLogo[0]" class="mall-logo" alt="" srcset="" />
  <Tabs />
</template>

<script setup>
import { defineAsyncComponent, watch, onMounted, ref, onBeforeUnmount } from 'vue'
import { storeToRefs } from 'pinia'
import { useStore } from '@/store/root'
import { useRouter } 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 AutoBackNotification = defineAsyncComponent(() => import('@/base/AutoBackNotification/AutoBackNotification.vue'))
const Search = defineAsyncComponent(() => import('@/components/Search/Search.vue'))
const Temperature = defineAsyncComponent(() => import('@/base/Temperature/Temperature.vue'))
const SearchBar = defineAsyncComponent(() => import('./SearchBar.vue'))
const Tabs = defineAsyncComponent(() => import('./Tabs.vue'))

const router = useRouter()
const store = useStore()
const { shop, showSearch, language, path, config } = storeToRefs(store)

const { resetClickNumber, setLogoutRef, addTotalClick } = useLogout()

const screenSaveCallback = () => {
  window.Map_QM.changeMapIPState(shop.value?.houseNum, shop.value?.formatColor)
  setLogoutRef(false)
  resetClickNumber()
  showSearch.value && store.SET_SHOW_SEARCH(false)
  language.value !== 'zh' && store.SET_LANGUAGE('zh')
  router.push('/billboard')
}

const { title, countDownGif, isWall, countDownToWall, countDownNum, checkHandleScreen } = useHandleScreen(handleScreen, screenSaveCallback)

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()
  showSearch.value && store.SET_SHOW_SEARCH(false)
  language.value !== 'zh' && store.SET_LANGUAGE('zh')
  await router.push('/index')
}

const timer = ref(null)
onMounted(() => {
  !window.Map_QM && useInitMap()

  window.addEventListener('touchend', checkHandleScreen)
})
onBeforeUnmount(() => {
  clearInterval(timer.value)
  window.removeEventListener('touchend', checkHandleScreen)
})

watch(path, nxtPath => {
  if (nxtPath === '/guide' || nxtPath === '/nav' || nxtPath === '/billboard') {
    window?.Map_QM?.startRender()
  } else {
    window?.Map_QM?.cancelRender()
  }
})
</script>
<style>
.mall-logo {
  position: absolute;
  height: 110px;
  left: 68px;
  bottom: 66px;
}
@media (min-aspect-ratio: 1/1) {
  .mall-logo {
    top: 32px;
    left: 68px;
  }
}
.box {
  position: absolute;
  left: 0;
  top: 0;
  width: 200px;
  height: 200px;
  z-index: 100;
}
</style>
