<!--
  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: Object,
    default: () => ({}),
  },
})
const emits = defineEmits(['refresh'])
// 地图实例
const mapRef = ref()
// 地图加载状态
const completeFlag = ref(false)
// 地图加载完成
const completeMap = () => {
  completeFlag.value = true
  // console.log('地图加载完成')
}

// 点标记弹窗
const detail = ref()
const detailRef = ref()
const markerClick = (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.data.position)
  // 初始化信息窗口
  detailRef.value.initDialog({
    overlay: data.event.target,
    infoWindow: detail.value,
    info: $props.data,
    map: mapRef.value.map,
    type: 'data',
  })
  setTimeout(() => {
    // 根据zoom调整中心点位置
    const center = JSON.parse(JSON.stringify(data.data.position))
    center[1] = Number(center[1])
    // mapRef.value.map.setCenter(center)
    // mapRef.value.map.setFitView()
  })
}

// 打开信息窗体
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({
      infoWindow: detail.value,
      info: data,
      map: mapRef.value.map,
      type: 'data',
    })
    setTimeout(() => {
      // mapRef.value.map.setFitView()
      // mapRef.value.map.setZoom(15)
      // const zoom = mapRef.value.map.getZoom()
      const center = JSON.parse(JSON.stringify(data.lnglat))
      center[1] = Number(center[1])
      // mapRef.value.map.setCenter(center)
      // mapRef.value.map.setFitView()
    })
    // mapRef.value.map.setCenter(data.lnglat)
  })
}
// 关闭信息窗体
const closeInfoDetail = () => {
  if (detail.value) {
    detail.value.close()
  }
}
const refresh = () => {
  emits('refresh', true)
}
defineExpose({
  mapRef,
  completeFlag,
  openInfoDetail,
  closeInfoDetail
})
</script>

<template>
  <div :style="`height: ${$props.height}px`" class="map-container">
    <!-- 设备信息窗体 -->
    <detail-info ref="detailRef" @refresh="refresh" />
    <a-map ref="mapRef" :zoom="14" :show-pieple-layer="true" @complete="completeMap" @markerClick="markerClick" />
    <!--  -->
    <div class="tips">
      点击图标查看更多报警详情
    </div>
  </div>
</template>

<style lang="scss" scoped>
.map-container {
  width: 100%;
  position: relative;
}
.tips {
  position: absolute;
  bottom: 4px;
  right:0px;
  color: #0D76D4;
  font-size: 14px;
  background-color: #fff;
}
</style>