<!--
  Description: 闸井监测-地图
  Author: 李亚光
  Date: 2023-07-08
 -->
<script lang="ts" setup name="AlarmMap">
import detailInfo from './detailInfoDialog.vue'
import AMap from '@/components/map/index.vue'

const $props = defineProps({
  height: {
    type: Number,
    default: 0,
  },
  data: {
    type: Array,
    default: () => ([]),
  },
})
// 地图实例
const mapRef = ref()
const publicPath = window.location.origin
console.log(publicPath, 'publicPath')
// 初次加载标识
const pageIsFirst = ref(true)
// 绘制标记点
const drawMarker = () => {
  const style = [
    {
      url: `${publicPath}/image/well/闸井-正常.png`, // 图标地址
      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
      size: new mapRef.value.AMap.Size(20, 20), // 图标的尺寸
      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
    },
    {
      url: `${publicPath}/image/well/闸井-异常.png`, // 图标地址
      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
      size: new mapRef.value.AMap.Size(20, 20), // 图标的尺寸
      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
    },
    {
      url: `${publicPath}/image/well/闸井-离线.png`, // 图标地址
      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
      size: new mapRef.value.AMap.Size(20, 20), // 图标的尺寸
      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
    },
    {
      url: `${publicPath}/image/well/闸井-未部署.png`, // 图标地址
      anchor: new mapRef.value.AMap.Pixel(4, 4), // 图标显示位置偏移量，基准点为图标左上角
      size: new mapRef.value.AMap.Size(20, 20), // 图标的尺寸
      zIndex: 99, // 每种样式图标的叠加顺序，数字越大越靠前
    },
  ]
  // （0：未监控，1：正常，2：异常，3：离线）
  const styleDict = {
    0: 3,
    1: 0,
    2: 1,
    3: 2,
  } as { [key: string]: number }
  const data = $props.data.filter((item: any) => item.lngGaode && item.latGaode).map((item: any) => ({
    lnglat: [item.lngGaode, item.latGaode],
    name: item.ledgerName,
    style: item.monitorState ? styleDict[item.monitorState] : 3,
    id: item.id,
  }))
  mapRef.value.addMassMarks({
    path: data,
    zIndex: 111,
    zooms: [10.5, 20],
    style,
  })
  //
  if (pageIsFirst.value) {
    mapRef.value.map.setCenter([116.397428, 39.90923])
  }
  else {
    mapRef.value.map.setFitView()
  }
  mapRef.value.map.setZoom(10.5)
}
// 点标记弹窗
const detail = ref()
const detailRef = ref()
const massMarksClick = (data: any) => {
  // 定义弹窗
  detail.value = new mapRef.value.AMap.InfoWindow({
    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
    autoMove: true, // 是否自动调整窗体到视野内
    isCustom: true, // 自定义信息窗体
    content: detailRef.value.$el, // 窗体内容(vue组件)
    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
  })
  // 打开信息窗口
  detail.value.open(data.map, data.event.data.lnglat)
  // 初始化信息窗口
  console.log(data.event.target)
  detailRef.value.initDialog({
    overlay: data.event.target,
    infoWindow: detail.value,
    info: data.event.data,
  })
}

// 打开信息窗体
const openInfoDetail = (data: any) => {
  mapRef.value.map.setZoom(10.5)
  // 定义弹窗
  detail.value = new mapRef.value.AMap.InfoWindow({
    closeWhenClickMap: true, // 是否在鼠标点击地图后关闭信息窗体
    autoMove: true, // 是否自动调整窗体到视野内
    isCustom: true, // 自定义信息窗体
    content: detailRef.value.$el, // 窗体内容(vue组件)
    offset: new mapRef.value.AMap.Pixel(9, -5), // 偏移
  })
  // 打开信息窗口
  setTimeout(() => {
    detail.value.open(mapRef.value.map, data.lnglat)
    // 初始化信息窗口
    detailRef.value.initDialog({
      // overlay: data.event.target,
      infoWindow: detail.value,
      info: data,
      map: mapRef.value.map,
    })
    mapRef.value.map.setCenter(data.lnglat)
    // mapRef.value.map.setZoom(15)
  })
}

// 地图绘制完毕
const completeMap = () => {
  console.log($props.data, '地图绘制完毕')
  // 绘制海量点
  drawMarker()
  pageIsFirst.value = false
}
watch(() => $props.data, (newVal) => {
  if (pageIsFirst.value) { return }
  mapRef.value.removeMassMarks()
  if (detailRef.value) {
    detailRef.value.close()
  }
  if (newVal.length) {
    // 清空标记点重新绘制
    drawMarker()
  }
}, {
  deep: true,
})
defineExpose({ openInfoDetail })
</script>

<template>
  <div :style="`height: ${$props.height}px`" class="map-container">
    <!-- 设备信息窗体 -->
    <detail-info ref="detailRef" />
    <!-- 地图 -->
    <a-map ref="mapRef" @complete="completeMap" @massMarksClick="massMarksClick" />
  </div>
</template>

<style lang="scss" scoped>
.map-container {
  width: 100%;
}
</style>