<!--
  Description: 高德地图
  Author: 李亚光
  Date: 2023-04-21
 -->
<script lang="ts" setup name="GuadMap">
import AMapLoader from '@amap/amap-jsapi-loader'
import infoDetail from './infoWindow.vue'
import infoDetail2 from './infoWindow2.vue'
import { electricityBranch, electricityNode, getElectricityListAll, getMonitorStationList } from '@/api/api/index'
const publicPath = import.meta.env.BASE_URL
// 设置安全密钥
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 markerArr1 = ref([
])
// 信息窗体
const infoWindow = ref()
const infoWindow2 = ref()
const windowInfoRef = ref()
const windowInfoRef2 = ref()
const markerArrInfo = ref()
const markerArrInfo1 = ref()
// 折现节点坐标
const lineArr = ref([])
// 地图点击事件
const clickHandler = function (e) {
  const location = [e.lnglat.getLng(), e.lnglat.getLat()]
  if (event.button === 2) {
    console.log('当前点击坐标为:   ', location)
  }
}
// 地图实例对象
const AMap1 = ref()
// 图层实例
const layer = ref()
const flag = ref(true)
// 切换图层
const changeLayerGrop = () => {
  if (flag.value) {
    map.value.addLayer(layer.value)
  }
  else {
    map.value.removeLayer(layer.value)
  }
  flag.value = !flag.value
}
defineExpose({ changeLayerGrop, flag })
// 初始化地图
const initMap = () => {
  AMapLoader.load({
    key: '40849e82b4e33f5255b17372520c954d', // 后期需替换
    version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ['AMap.Scale', 'AMap.MouseTool', 'AMap.ToolBar'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap) => {
      AMap1.value = AMap
      // 初始化地图
      map.value = new AMap.Map('map', {
        viewMode: '3D', //  是否为3D地图模式
        zoom: 17, // 初始化地图级别
        center: [111.765785, 40.718114],
        resizeEnable: true,
      })
      // 图层实例
      layer.value = new AMap.TileLayer.Satellite()
      // 地图绑定右击事件
      map.value.on('mousedown', clickHandler)
      // 电网支路标记点绘制
      for (let i = 0; i < markerArr.value.length; i++) {
        const icon = new AMap.Icon({
          size: new AMap.Size(36, 36), // 图标尺寸
          image: `${publicPath}img/icon1.png`, // Icon的图像
          imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
          imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
        })
        const marker = new AMap.Marker({
          zooms: [16, 20], // 缩放
          position: markerArr.value[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          map: map.value,
          icon,
          offset: new AMap.Pixel(3, -30),
        })
        // 支路点详细信息// 信息窗体
        infoWindow.value = new AMap.InfoWindow({
          isCustom: true, // 自定义信息窗体
          content: windowInfoRef.value.$el, // 窗体内容(vue组件)
          offset: new AMap.Pixel(9, -5), // 偏移
        })
        marker.on('click', (e) => {
          // 打开信息窗口
          infoWindow.value.open(map.value, e.lnglat)
          // 初始化信息窗口
          windowInfoRef.value.initialize({
            overlay: e.target,
            infoWindow: infoWindow.value,
            info: markerArrInfo.value[i],
          })
        })
        // 标记点文本标记
        marker.setLabel({
          offset: new AMap.Pixel(-10, -2), // 设置文本标注偏移量
          content: `<div>${markerArrInfo.value[i].nodeName}</div>`, // 设置文本标注内容
          direction: 'right', // 设置文本标注方位
        })
        map.value.add([marker])
      }
      // 光伏标记点及光伏绘制
      for (let i = 0; i < markerArr1.value.length; i++) {
        const icon = new AMap.Icon({
          size: new AMap.Size(36, 36), // 图标尺寸
          image: `${publicPath}img/icon2.png`, // Icon的图像
          imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
          imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
        })
        const marker = new AMap.Marker({
          zooms: [16, 20],
          position: markerArr1.value[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          map: map.value,
          icon,
          offset: new AMap.Pixel(-20, -20),
        })
        // 信息窗体
        infoWindow2.value = new AMap.InfoWindow({
          isCustom: true, // 自定义信息窗体
          content: windowInfoRef2.value.$el, // 窗体内容(vue组件)
          offset: new AMap.Pixel(9, -5), // 偏移
        })
        marker.on('click', (e) => {
          // 打开信息窗口
          infoWindow2.value.open(map.value, e.lnglat)
          // 初始化信息窗口
          windowInfoRef2.value.initialize({
            overlay: e.target,
            infoWindow: infoWindow2.value,
            info: markerArrInfo1.value[i],
          })
        })
        // 标记点的文本
        marker.setLabel({
          zooms: [16, 20],
          offset: new AMap.Pixel(-10, -2), // 设置文本标注偏移量
          content: `<div>${markerArrInfo1.value[i].stationName}</div>`, // 设置文本标注内容
          direction: 'right', // 设置文本标注方位
        })
        map.value.add([marker])
        // 绘制电网和节点连线
        const path = markerArrInfo1.value.map((item) => {
          return [[Number(item.lng), Number(item.lat)], [Number(item.nodeLng), Number(item.nodeLat)]]
        })
        const polyline = new AMap.Polyline({
          path,
          strokeColor: '#03A382',
          strokeStyle: 'dashed',
          strokeDasharray: [10, 3],
          lineJoin: 'round',
          lineCap: 'round',
          zIndex: 50,
          zooms: [16, 20],
        })
        polyline.setMap(map.value)
        map.value.add(polyline)
      }
      // 电网支路折线绘制
      for (let i = 0; i < lineArr.value.length; i++) {
        // console.log(lineArr.value[i])
        const path = lineArr.value.map(item => item.branchNodeInfos)
        const line = path.map(item => (
          item.map((child) => {
            return ([[child.flng, child.flat], [child.tlng, child.tlat], child.status2])
          })
        ))
        line.forEach((item) => {
          item.forEach((child) => {
            const path = [child[0], child[1]]
            const polyline = new AMap.Polyline({
              path,
              // isOutline: true,
              strokeColor: child[2] === 1 ? '#008d68' : '#000',
              // strokeOpacity: 1,
              strokeWeight: 3,
              // 折线样式还支持 'dashed'
              strokeStyle: child[2] !== 1 ? 'dashed' : 'dashed ',
              // strokeStyle是dashed时有效
              strokeDasharray: [10, 3],
              lineJoin: 'round',
              showDir: child[2] === 1,
              // lineCap: 'square',
              lineCap: 'round',
              zIndex: 50,
              zooms: [16, 20],

            })
            // 离线支路连接添加开关图标
            if (child[2] === 0) {
              const data = [(Number(child[0][0]) + Number(child[1][0])) / 2, (Number(child[0][1]) + Number(child[1][1])) / 2]
              const icon = new AMap.Icon({
                size: new AMap.Size(36, 36), // 图标尺寸
                image: `${publicPath}img/icon3.png`, // Icon的图像
                imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
                imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
              })
              const marker = new AMap.Marker({
                zooms: [16, 20],
                position: data, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                map: map.value,
                icon,
                offset: new AMap.Pixel(-20, -20),
              })
              map.value.add([marker])
            }
            polyline.setMap(map.value)
            map.value.add(polyline)
          })
        })
        // 添加支路折线文本
        // 创建纯文本标记
        // const textArr = path.map(item => (
        //   item.map((child) => {
        //     return ([[(Number(child.flng) + Number(child.tlng)) / 2, (Number(child.flat) + Number(child.tlat)) / 2], child.flowRate])
        //   })
        // ))
        // textArr.forEach((item) => {
        //   // console.log(item, 'item')
        //   item.forEach((child) => {
        //     const icon = new AMap.Icon({
        //       size: new AMap.Size(36, 36), // 图标尺寸
        //       // image: '', // Icon的图像
        //       imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
        //       imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
        //     })
        //     // const content = '<div>111</div>'
        //     const marker = new AMap.Marker({
        //       position: child[0], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        //       map: map.value,
        //       content: '<span></span>',
        //       offset: new AMap.Pixel(-20, -20),
        //     })
        //     marker.setLabel({
        //       offset: new AMap.Pixel(-10, -2), // 设置文本标注偏移量
        //       content: `<div>${`${child[1]}kgCO2/h`}</div>`, // 设置文本标注内容
        //       direction: 'right', // 设置文本标注方位
        //     })
        //     map.value.add([marker])
        //   })
        // })
      }
    })
    .catch((e) => {
      console.log(e)
    })
}
onMounted(async () => {
  // 获取电网列表
  try {
    const list = await getElectricityListAll()
    // 电网列表
    electricityList.value = list.data
    // 查询节点列表(标记点)
    if (electricityList.value.length) {
      const res = await electricityNode(electricityList.value[0].id)
      markerArr.value = res.data.map(item => ([Number(item.lng), Number(item.lat)]))
      markerArrInfo.value = res.data
      // 获取支路信息(折线)
      const res1 = await electricityBranch(electricityList.value[0].id)
      lineArr.value = res1.data
    }
    // 获取光伏列表
    const list1 = await getMonitorStationList()
    markerArr1.value = list1.data.map(item => ([Number(item.lng), Number(item.lat)]))
    markerArrInfo1.value = list1.data
    // 初始化地图
    initMap()
  }
  catch (error) {
    initMap()
  }
  // 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
  //       // 获取支路
  //       electricityBranch(electricityList.value[0].id).then(res => {
  //         lineArr.value = res.data
  //         // console.log(res.data)
  //         initMap()
  //       })
  //     })
  //   }
  // })
})
</script>

<template>
  <div id="map" />
  <info-detail ref="windowInfoRef" />
  <info-detail2 ref="windowInfoRef2" />
</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>