<!--
 * @Author: chris
 * @Date: 2025-01-13 16:31:10
 * @LastEditors: chris
 * @LastEditTime: 2025-10-31 15:33:18
-->
<script setup>
import { BmMarker, BmInfoWindow } from 'vue-baidu-map-3x'

const props = defineProps({
  deviceList: {
    type: Array,
    default: () => []
  },
  currentDevice: {
    type: Object,
    default: () => null
  }
})

const Map = ref(null)
const pestMap = ref(null)
const baiduMapConfig = {
  center: '汕头市潮南区雷岭镇',
  zoom: 12,
}

const mapDevices = computed(() => {
  if (!Map.value) return []
  return props.deviceList.map(item => {
    const [lng, lat] = item.installPointDes.split(',')
    return Object.assign({}, item, {
      point: new Map.value.Point(lng, lat),
      open: false
    })
  })
})

watch(() => props.currentDevice, (newVal) => {
  if(!pestMap.value || !props.currentDevice) return
  const device = mapDevices.value.find(item => item.deviceAddr === newVal.deviceAddr)
  device && pestMap.value.flyTo(device.point, 16)
})

function mapReady({BMap, map}) {
  console.log(BMap, map)
    pestMap.value = map;
    Map.value = BMap;
    map.enableScrollWheelZoom(true)
    
    // const overlays = map.getOverlays()
    // const points = overlays.map(item => item.latLng)
    // const viewport = map.getViewport(points)
    // map.setViewport(viewport)
}

function mapZoomEnd({target}) {
  target.setTilt(45)
}
</script>

<template>
  <div class="device-map" >
    <baidu-map class="map" :center="baiduMapConfig.center" :zoom="baiduMapConfig.zoom" @ready="mapReady" @zoomend="mapZoomEnd">
      <bm-marker v-for="item in mapDevices" :key="item.deviceAddr" :position="{lng: item.point.lng, lat: item.point.lat}" >
      </bm-marker>
    </baidu-map>
  </div>
</template>

<style lang="scss" scoped>
.device-map {
  // @apply mx-[-19px] my-[-15px];
}

.device-map, .map {
  @apply w-full h-full;
}

:deep(.anchorBL)  {
  display: none;
}
</style>
