<template>
  <!-- <box1 />
  <box2 /> -->
  
  <big-map
    v-model="show"
    :carList="scenicStore.carShipData.car.list"
    :shipList="scenicStore.carShipData.ship.list"
  />
</template>

<script setup>
	import BigMap from './components/big-map'
	import { useWebSocket } from '@/hooks/socket'
	import { useScenicStore } from '@/stores/scenic'
	import { mode, socketBaseUrl, proSocketBaseUrl } from '@/utils/config'
	
	import PubSub from 'pubsub-js'
	
	const scenicStore = useScenicStore()
	const { isConnected, sendMessage, dataRes } = useWebSocket(
	  `${mode == 'dev' ? socketBaseUrl : proSocketBaseUrl}/ws/gps`
	)
	let scenicSpotId = ref('')
	let scenicChange = null
	let timer = null
	let timer2 = null
	let show = ref(true)
	let keyword = ref('')
	watch(
	  () => [isConnected.value],
	  (val) => {
	    if (val[0]) {
	      sendMessage(JSON.stringify({ action: 'start', type: '',"keyword":keyword.value, scenicSpotId: scenicSpotId.value }))
	    }
	  },
	  { immediate: true }
	)
	watch(
	  () => dataRes.value,
	  (val) => {
	    if (val) {
	      scenicStore.setVehicleData(val)
	      if (!timer) sendCarShip()
	      // if (!timer2) sendTimer2()
	    }
	  }
	)
	
	const sendCarShip = (e) => {
	
	  timer = setInterval(() => {
	    if (isConnected.value) {
	      sendMessage(JSON.stringify({ action: 'start', type: '',"keyword":keyword.value, scenicSpotId: scenicSpotId.value }))
	    }
	  }, 5000)
	}
	onMounted(() => {
	   PubSub.subscribe('keywordChange', (msg, data) => {
	     keyword.value = data
	      sendMessage(JSON.stringify({ action: 'start', type: '',"keyword":keyword.value, scenicSpotId: scenicSpotId.value }))
	   })
	})
	onUnmounted(() => {
	  
	  if (timer) clearInterval(timer)
	})
</script>
