<!--
  Description: 高德地图
  Author: 李亚光
  Date: 2023-04-21
 -->
<script lang="ts" setup name="GuadMap">
import AMapLoader from '@amap/amap-jsapi-loader'
import { electricityNode, getElectricityListAll } from '@/api/api/index'
// 设置安全密钥
window._AMapSecurityConfig = {
  securityJsCode: '56bf9671d4b3517d294caec4751889a1', // 后期需替换
}
const electricityList = ref()
// 地图实例
const map = ref()
//  用来画区域的
const polygon = ref()
//  画图工具实例
const mouseTool = ref()
// 区域数组
const pathArr = ref([
  [111.737806, 40.83386],
  [111.736806, 40.83686],
  [111.739906, 40.83686],
  [111.739906, 40.83386],
])
// 区域点数组
const markerArr = ref([
])
const markerArrInfo = ref()
// 折现节点坐标
const lineArr = ref([])
// 初始化地图
const initMap = () => {
  AMapLoader.load({
    key: '40849e82b4e33f5255b17372520c954d', // 后期需替换
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.Scale', 'AMap.MouseTool'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap) => {
      // 初始化地图
      map.value = new AMap.Map('map', {
        viewMode: '2D', //  是否为3D地图模式
        zoom: 17, // 初始化地图级别
        center: markerArr.value[0],
        resizeEnable: true,
      })
      // 用来画区域的
      // polygon.value = new AMap.Polygon({
      //   map: map.value,
      //   fillOpacity: 0.2,
      //   path: pathArr.value, // 区域数组
      // })
      // 画图工具
      // mouseTool.value = new AMap.MouseTool(map.value)
      // mouseTool.value.rectangle({
      //   strokeColor: '#1E9FFF',
      //   strokeWeight: 2,
      //   strokeStyle: 'dashed',
      //   strokeOpacity: 1,
      //   fillOpacity: 0.1,
      //   fillColor: '#1E9FFF',
      //   // zIndex: 50,
      //   // 同Polygon的Option设置
      // })
      // var overlays = []
      // 监听draw事件可获取画好的覆盖物
      // mouseTool.value.on('draw', (e) => {
      // // 绘制多边形;
      //   overlays.push(e.obj)
      //   // 获取坐标;
      //   console.log(e.obj.getPath())
      //   // 格式化坐标;
      //   var polyPoints = e.obj.getPath()
      //   var arr = ''
      //   for (var i = 0; i < polyPoints.length; i++) {
      //     arr += `${polyPoints[i].lng},${polyPoints[i].lat};`
      //   }
      //   console.log(arr)// 121.540994,29.870174;121.55138,29.858116;121.55756,29.874193;
      // })
      // 标记点绘制
      for (let i = 0; i < markerArr.value.length; i++) {
        const icon = new AMap.Icon({
          size: new AMap.Size(36, 36), // 图标尺寸
          // image: 'https://img1.baidu.com/it/u=783564618,4142196075&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500', // Icon的图像
          image: 'http://111.198.10.15:11404/imgs/1.png', // Icon的图像
          imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
          imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
        })
        // const content = '<div>111</div>'
        const marker = new AMap.Marker({
          position: markerArr.value[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          map: map.value,
          title: '测试坐标',
          icon,
          offset: new AMap.Pixel(-20, -20),
        })
        marker.setLabel({
          offset: new AMap.Pixel(-10, -2), // 设置文本标注偏移量
          content: `<div>${markerArrInfo.value[i].busId}</div>`, // 设置文本标注内容
          direction: 'right', // 设置文本标注方位
        })
        map.value.add([marker])
        // 标记点文本
        // 自动适应显示想显示的范围区域
        // map.value.setFitView()
      }
      // 折现(
      // const path = lineArr.value.map(item => (new AMap.LngLat(item[0], item[1])))
      // const polyline = new AMap.Polyline({
      //   path,
      //   borderWeight: 1, // 线条宽度，默认为 1
      //   strokeColor: '#008d68', // 线条颜色
      //   lineJoin: 'round', // 折线拐点连接处样式
      //   strokeStyle: 'solid',
      // })
      // polyline.setMap(map.value)
      // map.value.add(polyline)
    })
    .catch((e) => {
      console.log(e)
    })
}
onMounted(() => {
  getElectricityListAll().then((res) => {
    // 电网列表
    electricityList.value = res.data
    // 默认选中第一个查询节点
    if (electricityList.value.length) {
      electricityNode(electricityList.value[0].id).then((res) => {
        markerArr.value = res.data.map(item => ([Number(item.lng), Number(item.lat)]))
        markerArrInfo.value = res.data
        initMap()
      })
    }
  })
})
</script>

<template>
  <div id="map" />
</template>

<style scoped>
#map {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0;
  font-family: "微软雅黑";
}
</style>

<style>
/* 隐藏高德logo  */
.amap-logo {
  display: none !important;
}

/* 隐藏高德版权  */
.amap-copyright {
  display: none !important;
}

.amap-marker-label {
  border: 0;
  background-color: transparent;
}
</style>