<template>
  <OpenLayerMap v-if="inited" :markers="markers" />
</template>
<script lang="ts" setup>
import OpenLayerMap from './components/OpenLayerMap.vue'
import { getLastestDetectorData } from '@/api/gas'
import { HandDetector } from '@/api/gas/handdetector'
import { MarkerData } from './components/types/map.types'
const getDataTimer = ref<NodeJS.Timeout | null>(null)
const markers = ref<MarkerData[]>([])
const inited = ref(false)
const getMarkers = async () => {
  console.log('getMarkers')
  return await getLastestDetectorData().then((res: HandDetector[]) => {
    res = res.filter((i) => i.enableStatus === 1)
    res = res.map((i) => {
      return {
        ...i,
        coordinates: [i.longitude, i.latitude],
        data: []
      }
    })
    markers.value = res as unknown as any[]
    inited.value = true
  })
}
onMounted(() => {
  getMarkers()
  getDataTimer.value = setInterval(() => {
    getMarkers()
  }, 5000)
})
onUnmounted(() => {
  clearInterval(getDataTimer.value as NodeJS.Timeout)
})
</script>
<style scoped></style>
