<template>
    <div class="div_map" id="map" ref="map"></div>
</template>

<script>
import 'ol/ol.css'
import { Map, View } from 'ol'
import TileLayer from 'ol/layer/Tile.js'
import XYZ from 'ol/source/XYZ.js'
import VectorLayer from 'ol/layer/Vector.js'
import VectorSource from 'ol/source/Vector.js'
import GeoJSON from 'ol/format/GeoJSON.js'
import Point from "ol/geom/Point.js"
import Feature from "ol/Feature.js"
import Overlay from 'ol/Overlay'
import { Select, DoubleClickZoom } from 'ol/interaction.js'
import { getCenter, boundingExtent } from 'ol/extent.js'
import { Circle as CircleStyle, Icon, Fill, Stroke, Style, Text } from 'ol/style.js'
import { altKeyOnly, click, pointerMove } from 'ol/events/condition'
import { getDistance } from 'ol/sphere'
import MousePosition from 'ol/control/MousePosition'
import { createStringXY } from 'ol/coordinate'
import { defaults as defaultControls } from 'ol/control'
import { mapGetters } from "vuex"
import { Loading } from 'element-ui'
import { requestPost } from "@/js/dai/request"

let map
let mapView
let gaodeMapLayer // 背景地图图层
let markerSource
let markerLayer

let markerSource_1
let markerLayer_1

let markerSource_2
let markerLayer_2



let parentLayer;//上级组织图层
let parentSource;//上级组织多边形


let polygonSource;//变电站标注多边形
let iconSource; // icon
let polygonLayer;//变电站标注图层
let select;//选中标注
let iconLayer; // icon标注图层
var centerPointGlobal = [120.38945519, 36.0722275]

const iconArray = [
    'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a219130b6bc74b0b80b5ddb0fce0892a.png',
    'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a775d15e62374350b80e5cdf1912a4eb.png',
    'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/884efcf6d6b44224a7fda599dd1b14cb.png'
]
const textColorArray = [
  'rgba(236, 69, 4, 0.66)',
  'rgba(0, 146, 238, 0.75)',
  'rgba(238, 151, 0, 0.8)'
]
let polygonColorArray = [
  'rgba(210, 2, 2, 0.24)',
  'rgba(43, 231, 253, 0.25)',
  'rgba(183, 185, 0, 0.16)'
];
let iconUrlArray = [
  'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a219130b6bc74b0b80b5ddb0fce0892a.png',
  'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a775d15e62374350b80e5cdf1912a4eb.png',
  'https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/884efcf6d6b44224a7fda599dd1b14cb.png'
];
//变电站标注的文字样式
var createTextStyle = function (feature) {
  return new Text({
    textAlign: undefined,
    font: "18px Arial",
    //fontFamily: "Courier New, monospace",
    // fontWeight: "bold",
    text: feature.values_.name,
    backgroundFill: new Fill({
      // color: 'rgba(0, 146, 238, 0.75)'
      color: textColorArray[feature.values_.colorIndex]
    }),
    padding: [4, 10, 4, 10],
    //text: "变电站名称",
    fill: new Fill({ color: "#ffffff" }),
    // stroke: new Stroke({ color: "#ffffff", width: 3 }),
    offsetY: -30,
    offsetX: -50,
    overflow: true,
  });
};
//上级组织标注样式
var parentStyleFunction = (function () {
  return function (feature) {
    return new Style({
      // fill: new Fill({
      //   color: [255, 255, 255, 0.3]
      // }),
      stroke: new Stroke({
        color: [0, 103, 182, 1],
        width: 2
      }),

      // text: createTextStyle(feature)
    });;
  };
})()


//变电站标注样式
var polygonStyleFunction = (function () {
  return function (feature) {
    return new Style({
      fill: new Fill({
        // color: [255, 255, 255, 0.3]
        color: polygonColorArray[feature.values_.colorIndex]
      }),
      stroke: new Stroke({
        color: polygonColorArray[feature.values_.colorIndex],
        width: 3
      }),

      text: createTextStyle(feature)
    });;
  };
})()
export default {
  name: "screen-org-map",
  data() {
    return {
      centerPoint: [], // 中心点位置
      zoom: 14, // 缩放范围：区14
      minZoom: 1, // 最小缩放
      orgData: {},//当前组织对象
      iconCoordinators: [],
      parentPolygon: [],
      subAgencyArray: [],
      centerFlag: 'point',//定义中心点的flag  point点 fit 自适应
    }
  },
  async mounted() {

    //加载组织数据
    await this.loadOrgData()
    this.initMap()
    this.addParentLayer()
    this.loadParentPolygon()
    //添加标注图层
    this.addPolygonLayer()

    //添加icontuceng
    this.addIconLayer()

    //加载当前园区的标注
    this.loadPolygon()

    this.setMapLocation()
  },
  methods: {
    initMap () {
      this.firstCenterMap()

      gaodeMapLayer = new TileLayer({
        title: "地图",
        source: new XYZ({
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
          wrapX: true // x方向平铺，也可以选择false
        }),
        zIndex: 20
      })

      mapView = new View({
        center: this.centerPoint,
        projection: 'EPSG:4326',
        zoom: this.zoom,
        minZoom: this.minZoom
      })
      map = new Map({
        layers: [gaodeMapLayer],
        view: mapView,
        target: 'map'
      })

      map.on('singleclick', function (e) {
        // console.log(e.coordinate)
        // console.log(transform(e.coordinate, 'EPSG:3857', 'EPSG:4326'));
      })
    },
    //设置地图定位的中心点和缩放级别
    setMapLocation () {
      if (!this.zoom) {
        this.setZoom(this.orgData.agencyLevel)
      }
      this.centerPoint = []


      //如果存在中心点（返回时赋值）
      if (parentLayer.getSource().getFeatures()[0]) {//如果是初次进入，不存在下级组织，用父级组织
        this.centerFlag = 'flag_parent'
      } else if (polygonLayer.getSource().getFeatures()[0]) {//如果是初次进入,存在下级组织
        this.centerFlag = 'flag_polygon'
      } else if (this.orgData.longitude && this.orgData.latitude) {
        this.centerPoint.push(this.orgData.longitude)
        this.centerPoint.push(this.orgData.latitude)
        this.centerFlag = 'point'
      } else {
        this.centerPoint = centerPointGlobal
        this.centerFlag = 'point'
      }
      // debugger
      if (this.centerFlag === 'flag_parent') {
        let parentFeatures = parentLayer.getSource().getFeatures()[0]
        let polygon = parentFeatures.getGeometry();
        map.getView().fit(polygon, map.getSize());
        this.zoom = map.getView().getZoom() - 1

      } else if (this.centerFlag === 'flag_polygon') {
        let polygonFeatures = polygonLayer.getSource().getFeatures()[0]
        let polygon = polygonFeatures.getGeometry();
        map.getView().fit(polygon, map.getSize());
        this.zoom = map.getView().getZoom() - 1
      } else {
        mapView.setCenter(this.centerPoint);
      }
      mapView.setZoom(this.zoom);
    },

    firstCenterMap () {
      this.centerPoint = []
      if (this.orgData.longitude && this.orgData.latitude) {
        this.centerPoint.push(this.orgData.longitude)
        this.centerPoint.push(this.orgData.latitude)

      } else {
        this.centerPoint = centerPointGlobal
      }
    },
    addMarker (list, icon=iconArray[0], scale=1) {
      if (markerSource) {
        markerSource.clear()
      }
      markerSource = new VectorSource({
        // features: new GeoJSON().readFeatures(geojsonObject)
      })
      markerLayer = new VectorLayer({
        source: markerSource,
        zIndex: 50
      })
      let features = []
      list.forEach((item, index) => {
        const point = [parseFloat(item.longitude), parseFloat(item.latitude)]
        let marker = new Feature({
          geometry: new Point(point),
          properties: {
            ...item
          }
        })
        let iconStyle = new Style({
          image: new Icon({
            scale: scale,
            src: icon
          })
        })
        marker.setStyle(iconStyle)
        features.push(marker)
      })
      // // 点击图标
      // var overlayStyle = (function () {
      //   return function (feature) {
      //     var styles = {}
      //     styles['Point'] = [
      //       new Style({
      //         image: new Icon({
      //           scale: scale,
      //           src: iconArray[0] // feature.values_.properties.index
      //         })
      //       }),
      //       new Style({
      //         text: createTextStyle(feature)
      //       })
      //     ]
      //     return styles[feature.getGeometry().getType()]
      //   }
      // })()
      // let select = new Select({
      //   style: overlayStyle
      // })
      // map.addInteraction(select)
      // select.on('select', e => {
      //   if (e.selected.length > 0) {
      //     console.log('------', e.selected[0].values_.properties.id)
      //   }
      // })
      markerSource.addFeatures(features)
      map.addLayer(markerLayer)
    },
    addMarker_1 (list, icon=iconArray[0], scale=1) {
      if (markerSource_1) {
        markerSource_1.clear()
      }
      markerSource_1 = new VectorSource({
        // features: new GeoJSON().readFeatures(geojsonObject)
      })
      markerLayer_1 = new VectorLayer({
        source: markerSource_1,
        zIndex: 50
      })
      let features = []
      list.forEach((item, index) => {
        const point = [parseFloat(item.longitude), parseFloat(item.latitude)]
        let marker = new Feature({
          geometry: new Point(point),
          properties: {
            ...item
          }
        })
        let iconStyle = new Style({
          image: new Icon({
            scale: scale,
            src: icon
          })
        })
        marker.setStyle(iconStyle)
        features.push(marker)
      })
      markerSource_1.addFeatures(features)
      map.addLayer(markerLayer_1)
    },
    addMarker_2 (list, icon=iconArray[0], scale=1) {
      if (markerSource_2) {
        markerSource_2.clear()
      }
      markerSource_2 = new VectorSource({
        // features: new GeoJSON().readFeatures(geojsonObject)
      })
      markerLayer_2 = new VectorLayer({
        source: markerSource_2,
        zIndex: 50
      })
      let features = []
      list.forEach((item, index) => {
        const point = [parseFloat(item.longitude), parseFloat(item.latitude)]
        let marker = new Feature({
          geometry: new Point(point),
          properties: {
            ...item
          }
        })
        let iconStyle = new Style({
          image: new Icon({
            scale: scale,
            src: icon
          })
        })
        marker.setStyle(iconStyle)
        features.push(marker)
      })
      markerSource_2.addFeatures(features)
      map.addLayer(markerLayer_2)
    },
    //加载组织数据
    async loadOrgData () {

      const url = "/gov/org/agency/maporg"
      let params = {
        orgId: '',
        level: ''
      }

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {

        this.orgData = data
        // this.orgId = this.orgData.id
        // this.orgLevel = this.orgData.level
        this.parentPolygon = []
        this.parentPolygon.push(data)
        if (data.children && data.children.length > 0) {
          this.subAgencyArray = data.children
        } else {
          this.subAgencyArray = []
        }

      } else {
        this.$message.error(msg)
      }

    },
    //加载父级组织多边形
    loadParentPolygon () {
      let featureData = []//标注数据
      if (this.parentPolygon && this.parentPolygon.length > 0) {//判断是否存在下级标注
        let oneData = {}

        this.parentPolygon.forEach(agencyItem => {

          if (agencyItem.coordinates && agencyItem.coordinates !== '') {//如果有坐标
            oneData = {
              type: 'Feature',
              id: agencyItem.id,
              properties: {
                id: agencyItem.id,
                level: agencyItem.level,
                name: agencyItem.name
              },
              geometry: {
                type: 'Polygon',
                coordinates: [],
              },
            }
            let coorArray = agencyItem.coordinates.split(',')//坐标数组

            let itemArray = []//单个点位的[lon,lat]，数组
            let polygonArray = []//整个多边形的[[lon,lat],[lon,lat],[lon,lat]]数组

            coorArray.forEach((item, index) => {
              itemArray.push(item)
              if (index % 2 == 0) {//偶

              } else {//奇
                polygonArray.push(itemArray)
                itemArray = []
              }

            });
            oneData.geometry.coordinates.push(polygonArray)
            featureData.push(oneData)
          }
        });
      }

      if (featureData && featureData.length > 0) {
        var geojsonObject = {
          'type': 'FeatureCollection',
          'features': featureData
        };
        let feature = (new GeoJSON()).readFeatures(geojsonObject)
        parentSource.addFeatures(feature)

      }

    },
    //加载当前园区的标注
    loadPolygon () {
      let featureData = []//标注数据

      if (this.subAgencyArray && this.subAgencyArray.length > 0) {//判断是否存在下级标注
        let oneData = {}

        let count = 0
        for (let i = 0; i < this.subAgencyArray.length; i++) {
          const agencyItem = this.subAgencyArray[i]
          

          if (agencyItem.coordinates && agencyItem.coordinates !== '') {//如果有坐标
            let urlNum = count % 3
            count++

            oneData = {
              type: 'Feature',
              id: agencyItem.id,
              properties: {
                id: agencyItem.id,
                level: agencyItem.level,
                name: agencyItem.name,
                colorIndex: urlNum//颜色随机的索引
              },
              geometry: {
                type: 'Polygon',
                coordinates: [],
              },
            }
            let coorArray = agencyItem.coordinates.split(',')//坐标数组

            let itemArray = []//单个点位的[lon,lat]，数组
            let polygonArray = []//整个多边形的[[lon,lat],[lon,lat],[lon,lat]]数组

            coorArray.forEach((item, index) => {
              itemArray.push(item)
              if (index % 2 == 0) {//偶

              } else {//奇
                polygonArray.push(itemArray)
                itemArray = []
              }

            });
            oneData.geometry.coordinates.push(polygonArray)
            featureData.push(oneData)
          }
        }
      }

      if (featureData && featureData.length > 0) {
        var geojsonObject = {
          'type': 'FeatureCollection',
          'features': featureData
        };
        let feature = (new GeoJSON()).readFeatures(geojsonObject)
        polygonSource.addFeatures(feature)

        let iconFeatures = [];
        feature.forEach(oneIcon => {
          var extent = boundingExtent(oneIcon.getGeometry().getCoordinates()[0]); //获取一个坐标数组的边界，格式为[minx,miny,maxx,maxy]
          // var center = getCenter(extent);   //获取边界区域的中心位置
          //添加标注
          let x = (parseFloat(extent[0]) + parseFloat(extent[2])) / 2
          let y = (parseFloat(extent[1]) + parseFloat(extent[3])) / 2

          let oneArray = [x, y]
          this.iconCoordinators.push(oneArray)
          // debugger
          //地图icon样式
          let oneCctv = new Feature({
            geometry: new Point([x, y]),
            id: oneIcon.id_,
            properties: {
              type: "icon",
              id: oneIcon.id_
            }
          });

          let iconStyle = new Style({
            image: new Icon({
              // anchor: [0.5, 0.5],
              // imgSize: [32, 32],
              scale: 0.5,
              // src: "/img/largeScreen/icon_camra.png"
              // src: "https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a219130b6bc74b0b80b5ddb0fce0892a.png"
              src: iconUrlArray[oneIcon.values_.colorIndex]
            })
          });

          oneCctv.setStyle(iconStyle);
          iconFeatures.push(oneCctv);

        });

        iconSource.addFeatures(iconFeatures);
      }

    },
    //添加变电站标注图层
    addParentLayer () {
      parentSource = new VectorSource({
        //features: (new GeoJSON()).readFeatures(geojsonObject)
      });
      parentLayer = new VectorLayer({
        source: parentSource,
        style: parentStyleFunction,
        zIndex: 50
      });
      map.addLayer(parentLayer)
    },
    //添加变电站标注图层
    addPolygonLayer () {
      polygonSource = new VectorSource({
        //features: (new GeoJSON()).readFeatures(geojsonObject)
      });

      polygonLayer = new VectorLayer({
        source: polygonSource,
        style: polygonStyleFunction,
        zIndex: 50
      });

      //选中多边形后的样式
      var overlayStyle = (function () {

        return function (feature) {
          var styles = {};
          styles['Polygon'] = [
            new Style({
              stroke: new Stroke({
                color: '#ec9000',
                width: 2
              })
            }),

            new Style({
              fill: new Fill({
                color: 'rgba(0, 0, 255, 0.1)'
              })
            }),
            new Style({
              text: createTextStyle(feature)
            })
          ];
          styles['MultiPolygon'] = styles['Polygon'];
          return styles[feature.getGeometry().getType()];
        };
      })();

      select = new Select({
        style: overlayStyle
      });


      map.addLayer(polygonLayer)
      map.addInteraction(select);

      // select.on('select', e => {
      //   this.toSubAgency('polygon', e)
      // });

    },

    addIconLayer () {
      iconSource = new VectorSource({
        //features: (new GeoJSON()).readFeatures(geojsonObject)
      });

      iconLayer = new VectorLayer({
        source: iconSource,
        zIndex: 70
      });
      map.addLayer(iconLayer);
    },

  },
}
</script>

<style
  lang="scss"
  src="@/assets/scss/modules/visual/basicInfoMain.scss"
  scoped
></style>

<style lang="scss" >
.div_map {
    box-sizing: border-box;
    // width: 100%;
    height: 100%;
    color: #fff;
}
</style>