<template>
  <box1 :scenicSpotId="scenicSpotId" />
  <box2 />
</template>

<script setup>
  import box1 from './components/box-1.vue'
  import box2 from './components/box-2.vue'

  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/scenic-spot`
  )

  let scenicSpotId = ref('')
  let scenicChange = null
  let timer = null
  let timer2 = null
  let keyword = ref('')
  watch(
    () => [isConnected.value, scenicSpotId.value],
    (val) => {
      if (val[0] && val[1]) {
        sendMessage(JSON.stringify({ action: 'start', type: '', scenicSpotId: scenicSpotId.value }))
        sendMessage(
            JSON.stringify({
              action: 'start',
              type: 'secureData',
              scenicSpotId: scenicSpotId.value
            })
        )
		sendMessage(
		  JSON.stringify({
		    action: 'start',
		    type: 'gpsData',
			keyword:keyword.value,
		    scenicSpotId: scenicSpotId.value
		  })
	    )
      }
    },
    { immediate: true }
  )

  watch(
    () => dataRes.value,
    (val) => {
      if (val) {
        // console.log(val, '=====')
        switch (val.type) {
			case 'gpsData':
			  scenicStore.setVehicleData(val.data)
			  break
          case 'wordkOrderlist':
            scenicStore.setWordkOrderList(val.data)
            break
          case 'wordkOrderTotal':
            scenicStore.setWordkOrderData(val)
            break
          case 'scenicSpotData':
            scenicStore.setScenicSpotData(val)
            break
          case 'scenicSppotLineUp':
            scenicStore.setScenicQueueData(val)
            break
          case 'scenicSppotLoad':
            scenicStore.setScenicBearData(val)
            break
          case 'stopCarData':
            scenicStore.setStopCarData(val)
            break
          case 'secureData':
            scenicStore.setSecureData(val)
            break
          case 'trafficInformation':
            scenicStore.setTrafficData(val)
            break
          case 'userPortrait':
            scenicStore.setUserPortraitData(val)
            break
          case 'carShipData':
		  console.log(val,'carShipData')
            scenicStore.setCarShipData(val.data)
            break
        }
        if (!timer) sendCarShip()
        // if (!timer2) sendTimer2()
      }
    }
  )
  const sendTimer2 = (e) =>{
    timer2 = setInterval(() => {
      if (isConnected.value) {
        //用户画像
        sendMessage(
            JSON.stringify({
              action: 'start',
              type: 'userPortrait',
              scenicSpotId: scenicSpotId.value
            })
        )
        //停车数据
        sendMessage(
            JSON.stringify({
              action: 'start',
              type: 'stopCarData',
              scenicSpotId: scenicSpotId.value
            })
        )
      }
    }, 20000)
  }
  const sendCarShip = (e) => {
    timer = setInterval(() => {
      if (isConnected.value) {
        //车船数据
        sendMessage(
          JSON.stringify({
            action: 'start',
            type: 'carShipData',
            scenicSpotId: scenicSpotId.value
          })
        ) //车窗数据2
		sendMessage(
		  JSON.stringify({
		    action: 'start',
		    type: 'gpsData',
			keyword:keyword.value,
		    scenicSpotId: scenicSpotId.value
		  })
		) //车窗数据
      }
    }, 5000)
  }
  onMounted(() => {
    scenicChange = PubSub.subscribe('scenicChange', (msg, data) => {
      scenicSpotId.value = data.scenicSpotId
    })
	PubSub.subscribe('keywordChange', (msg, data) => {
	  keyword.value = data
	   sendMessage(JSON.stringify({ action: 'start', type: '',"keyword":keyword.value, scenicSpotId: scenicSpotId.value }))
	})
  })
  onUnmounted(() => {
    if (scenicChange) PubSub.unsubscribe(scenicChange)
    if (timer) clearInterval(timer)
  })
</script>

<style scoped lang="scss"></style>
