import React from 'react';
import { map } from '../mapContext';
import { creatClusterMarker } from '../method/creatMarker';
import { Dict } from '@zenview/micro-basic-library';

let allType = JSON.parse(JSON.stringify(Dict.device.deviceType));
@map
class ClusterLayer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      deviceLayers: new Map(),
      points: props.points || null,
      isDataChange: false,
    };
  }

  static getDerivedStateFromProps(props, state) {
    if (props.points && props.points !== state.points) {
      return { isDataChange: true, points: props.points };
    }
    return null;
  }

  componentDidUpdate() {
    if (this.state.isDataChange) {
      this.setState({ isDataChange: false });
      if (Array.isArray(this.state.points) && this.state.points.length > 0) {
        clearTimeout(this.timer);
        this.timer = setTimeout(() => this.createClusterByType(this.state.points), 500);
      } else {
      }
    }
  }

  createClusterByType = (points, clusterOpt, markerOpt) => {
    const { ZenMap } = window;
    //根据设备类型聚合
    const { map } = this.props;
    if (!map || !points) {
      return;
    }
    let { deviceLayers } = this.state;
    let allLayer = map.getAllLayers(true);
    if (deviceLayers.size > 0) {
      //已有聚合图层
      allLayer.slice(1).forEach((layer) => {
        layer.useCluster && layer.show(); //显示聚合图层
      });
      return;
    }
    let opt = clusterOpt
      ? clusterOpt
      : {
          distance: 100,
          clusterClickModel: 'zoom',
          showClusterText: true,
          textColor: '#FFFFFF',
          textSize: 14,
          labelOffset: [12, 0],
          //   click: (f) => {
          //     this.props.deviceClick(f.location);
          //   },
          //   mouseover: (f) => {
          //     let obj = {
          //       lon: f.location.lon,
          //       lat: f.location.lat,
          //       item: f.location
          //     };
          //     this.infoWindow && this.infoWindow.destroy();
          //     const titleBox = document.createElement('div');
          //     titleBox.class = "marker-popup-hover-layout";
          //     this.infoWindow = new ZenMap.Symbols.InfoWindow(f.location, "", MarkerHoverInfo(f.location, openPop, titleBox), {
          //       iscommon: true,
          //       closeButton: false,
          //       isAdaptation: true,
          //       offset: new ZenMap.Geometry.Size(0, 110) //信息窗位置偏移值
          //     });
          //     this.infoWindow.addEventListener("open", () => {
          //       this.infoWindow.getBaseDiv().style.pointerEvents = "none";
          //       this.infoWindow.getBaseDiv().addEventListener('mouseleave', () => {
          //         this.infoWindow.close();
          //         this.infoWindow.destroy();
          //       }, false);
          //     });
          //     this.infoWindow.open();
          //     map.addOverlay(this.infoWindow);
          //   }
        };
    let cameraIcon = [];
    let clusterIcon = [];
    let viewIcon = [];
    allType
      .filter((v) => v.value !== '-1')
      .forEach((v) => {
        if (v.value * 1 === 100616) {
          // opt.distance = 1
          // cameraIcon.push([v.value + "policeman", `/micro-apps/micro-dep-librarys/images/zenMap/online-man-${v.value}.png`]);//警员图标
          // cameraIcon.push([v.value + "policecar", `/micro-apps/micro-dep-librarys/images/zenMap/online-car-${v.value}.png`]);//警车图标
          // deviceLayers.set(v.value + "policeman", new ZenMap.Layers.OverlayLayer(v.value + "policeman", false, opt));//警员图层
          // deviceLayers.set(v.value + "policecar", new ZenMap.Layers.OverlayLayer(v.value + "policecar", false, opt));//警车图标
          return;
        }
        if (v.value === '103501,103502') {
          //门禁
          let arr = v.value.split(',');
          arr.map((type) => {
            opt.clusterImage = [type + 'cluster', 10, type + 'cluster', 100, type + 'cluster', 1000, type + 'cluster']; //设置聚合配置
            opt.hasExendMarker = false;
            clusterIcon.push([type + 'cluster', `/micro-apps/micro-dep-librarys/images/zenMap/cluster-${type}.png`]); //聚合图标
            cameraIcon.push([type + 'online', `/micro-apps/micro-dep-librarys/images/zenMap/online-${type}.png`]); //在线设备
            cameraIcon.push([type + 'outline', `/micro-apps/micro-dep-librarys/images/zenMap/outline-${type}.png`]); //离线设备
            viewIcon.push([v.value + 'view', `/micro-apps/micro-dep-librarys/images/zenMap/view-${v.value}.png`]); //可视域图标
            return deviceLayers.set(type, new ZenMap.Layers.OverlayLayer(type, true, opt));
          });
          return;
        }
        opt.clusterImage = [v.value + 'cluster', 10, v.value + 'cluster', 100, v.value + 'cluster', 1000, v.value + 'cluster']; //设置聚合配置
        opt.hasExendMarker = +v.value === 100604 || +v.value === 100602 || +v.value === 100601 ? true : false;
        clusterIcon.push([v.value + 'cluster', `/micro-apps/micro-dep-librarys/images/zenMap/cluster-${v.value}.png`]); //聚合图标
        cameraIcon.push([v.value + 'online', `/micro-apps/micro-dep-librarys/images/zenMap/online-${v.value}.png`]); //在线设备
        cameraIcon.push([v.value + 'outline', `/micro-apps/micro-dep-librarys/images/zenMap/outline-${v.value}.png`]); //离线设备
        viewIcon.push([v.value + 'view', `/micro-apps/micro-dep-librarys/images/zenMap/view-${v.value}.png`]); //可视域图标
        return deviceLayers.set(v.value, new ZenMap.Layers.OverlayLayer(v.value, true, opt));
      });
    map.addImages([...clusterIcon, ...cameraIcon, ['outLine', `/micro-apps/micro-dep-librarys/images/zenMap/outLine.png`], ...viewIcon], () => {
      deviceLayers.set('featureGroup', new ZenMap.Layers.OverlayLayer('featureGroup', false, opt)); //用于后期计算点位在不在绘制范围,地图上添加分组图层
      [...deviceLayers.values()].map((v) => {
        return map.addLayer(v);
      });
      let markersGroup = [];
      let markers = [];
      for (let i = 0, l = points.length; i < l; i++) {
        let point = points[i];
        // if ((point.deviceType) * 1 === 100616) {//GPS情况
        //   let p = that.creatSinglePoint(point);
        //   let url = point.type === "policeman" ? '/micro-apps/micro-dep-librarys/images/zenMap/online-man-100616.png' : '/micro-apps/micro-dep-librarys/images/zenMap/online-car-100616.png'
        //   var gpsPoint = { id: point.id, point: p, iconSize: [42, 46], url: url, offset: [0, -23], deviceInfo: point };
        //   gpsPoint.click = (gps) => {
        //     this.mapGps.setGPSInfoWindowByID(gps.id, InfoGPS(gps, this.mapGps));
        //   }
        //   gpsPoints.push(gpsPoint);

        // }
        if (!point.latitude || !point.longitude) {
          continue;
        }
        if (point.deviceType * 1 === 100616) {
          continue;
        }
        let marker = creatClusterMarker(point, markerOpt);
        markers.push(marker);
        if (!markersGroup[point.deviceType]) {
          markersGroup[point.deviceType] = [];
        }
        markersGroup[point.deviceType].push(marker); //设备状态分组
      }
      // //开始加载GPS设备信息
      // this.mapGps.addGPSPoints(gpsPoints);
      // this.mapGps.start();

      var clusterPoints = new ZenMap.Symbols.ClusterPoints(markers || []);
      deviceLayers.get('featureGroup').addOverlay(clusterPoints);
      //点添加到图层分组上
      deviceLayers.forEach((v, k) => {
        if (k === 'featureGroup') {
          return;
        }
        var clusterGroup = new ZenMap.Symbols.ClusterPoints(markersGroup[k] || []);
        v.addOverlay(clusterGroup);
      });
    });
    // })
  };

  render() {
    return <></>;
  }
}
export default ClusterLayer;
