<!--
  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 infoDetailHot from './infoWindowHot.vue'
import { getDictByCode } from '@/api/system/dict'
import { electricityBranch, electricityNode, getAreaPosition, getDeviceListPage, 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 markerArrHot = ref()
const markerArrHotInfo = ref()
// 信息窗体
const infoWindow = ref()
const infoWindow2 = ref()
const infoWindowHot = ref()
const windowInfoRef = ref()
const windowInfoRef2 = ref()
const windowInfoHotRef = 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(false)
// 切换图层
const changeLayerGrop = () => {
  if (flag.value) {
    map.value.addLayer(layer.value)
  }
  else {
    map.value.removeLayer(layer.value)
  }
  flag.value = !flag.value
}
// 初始化地图
const initMap = async () => {
  await 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.addLayer(layer.value)
    // 地图绑定右击事件
    map.value.on('mousedown', clickHandler)
  })
    .catch((e) => {
      console.log(e)
    })
}
// 绘制用电监测相关
const useElectricity = () => {
  const AMap = AMap1.value
  // 电网支路标记点绘制
  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])
    //   })
    // })
  }
}
// 绘制用热监测相关
const useHot = () => {
  for (let i = 0; i < markerArrHot.value.length; i++) {
    const AMap = AMap1.value
    const icon = new AMap.Icon({
      size: new AMap.Size(36, 36), // 图标尺寸
      image: `${publicPath}img/icon4.png`, // Icon的图像
      imageSize: new AMap.Size(24, 30), // 根据所设置的大小拉伸或压缩图片
      imageOffset: new AMap.Pixel(0, 0), // 图像相对展示区域的偏移量，适于雪碧图等
    })
    const marker = new AMap.Marker({
      zooms: [16, 20], // 缩放
      position: markerArrHot.value[i], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
      map: map.value,
      icon,
      offset: new AMap.Pixel(3, -30),
    })
    // 支路点详细信息// 信息窗体
    infoWindowHot.value = new AMap.InfoWindow({
      isCustom: true, // 自定义信息窗体
      content: windowInfoHotRef.value.$el, // 窗体内容(vue组件)
      offset: new AMap.Pixel(9, -5), // 偏移
    })
    marker.on('click', (e) => {
      // 打开信息窗口
      infoWindowHot.value.open(map.value, e.lnglat)
      // 初始化信息窗口
      windowInfoHotRef.value.initialize({
        overlay: e.target,
        infoWindow: infoWindowHot.value,
        info: markerArrHotInfo.value[i],
      })
    })
    // 标记点文本标记
    marker.setLabel({
      offset: new AMap.Pixel(-10, -2), // 设置文本标注偏移量
      content: `<div>${markerArrHotInfo.value[i].deviceName}</div>`, // 设置文本标注内容
      direction: 'right', // 设置文本标注方位
    })
    map.value.add([marker])
  }
}
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
    // 初始化地图
    await initMap()
    useElectricity()
  }
  catch (error) {
    initMap()
  }
  // 获取用热数据
  getDeviceListPage({
    offset: 1,
    limit: 999,
    ptn: '',
    deviceType: '2',
  }).then((res) => {
    markerArrHotInfo.value = res.data.rows
    markerArrHot.value = res.data.rows.map(item => ([Number(item.lng), Number(item.lat)]))
  })
  // 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()
  //       })
  //     })
  //   }
  // })
})
const area = ref('')
const areaList = ref([])
// 获取分区列表
const fetchAreaList = () => {
  getDictByCode('ptn_type').then((res) => {
    areaList.value = res.data
  })
}
fetchAreaList()
const areaMarkerList = ref()
const polygons = ref()
// 绘制区域
const drawArea = (markerList: any, color: string) => {
  const polygon = new AMap1.value.Polygon({
    path: markerList,
    fillColor: color,
    strokeOpacity: 1,
    fillOpacity: 0.5,
    strokeColor: '#2b8cba',
    strokeWeight: 1,
    strokeStyle: 'dashed',
    strokeDasharray: [5, 5],
  })
  polygons.value = polygon
  map.value.add(polygon)
}
// 删除绘制
const clearDraw = () => {
  if (polygons.value) {
    map.value.remove(polygons.value)
    area.value = ''
  }
}
// 监听分区变化
watch(() => area.value, (newVal) => {
  if (polygons.value) {
    map.value.remove(polygons.value)
  }
  if (!newVal) {
    return
  }
  getAreaPosition(newVal).then((res) => {
    const color = {
      1: '#2b8cbe',
      2: '#ccebc5',
      3: '#7bccc4',
    }
    areaMarkerList.value = res.data
    if (res.data.length) {
      areaMarkerList.value.push(res.data[0])
      const data = areaMarkerList.value.map(item => ([Number(item.lng), Number(item.lat)]))
      drawArea(data, color[newVal])
    }
  })
})
// 用电检测/用热监测 默认用电
const flagType = ref(true)
// 切换用电检测/用热监测
const changeFlagType = () => {
  map.value.clearMap()
  map.value.setCenter([111.765785, 40.718114])
  // 区域框展示
  area.value = ''
  if (flagType.value) {
    useHot()
  }
  else {
    useElectricity()
  }
  flagType.value = !flagType.value
}
defineExpose({ changeLayerGrop, changeFlagType, flag })
</script>

<template>
  <div id="map" />
  <info-detail ref="windowInfoRef" />
  <info-detail2 ref="windowInfoRef2" />
  <info-detail-hot ref="windowInfoHotRef" />
  <div class="btns">
    <el-radio-group v-model="area">
      <el-radio-button v-for="item in areaList" :key="item.id" :label="item.value" @dblclick="clearDraw">
        {{ item.name }}
      </el-radio-button>
    </el-radio-group>
  </div>
</template>

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

.btns {
  position: absolute;
  left: 10px;
  bottom: 10px;
}
</style>

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

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

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