import React from 'react';
import * as L from 'leaflet';
import { map } from '../../mapContext';
import { createPolygon } from '../../utils/polygon'
import { providerMap } from '../../providerMap';
import MapResetTools from '../../components/MapResetTools';
import { addictPlaceIcon } from '../../utils/overlayer';
import { tipOptions } from '../../utils/config';
import base64 from '../../base64';
import { LMConfig } from '@zenview/micro-basic-library'

const { AddictPlace, AddictGather } =  base64
@providerMap({ className: "lm-tl-judgement-center-addict-place-map", mapConfig: { scrollWheelZoom: true } })
@map
class AddictPlaceMap extends React.Component {
  constructor(props){
    super(props);
    const { map } = props;
    this.featureGroup = L.featureGroup().addTo(map);
    this.checkedPlace = null;
  }

  componentDidMount(){
    const { mapData={} } = this.props;
    this.createLayer(mapData);
  }

  componentWillUnmount(){
    this.checkedPlace = null;
    this.featureGroup.clearLayers();
    this.featureGroup = null;
  }

  UNSAFE_componentWillReceiveProps(nextProps){
    if (nextProps.mapData !== this.props.mapData) {
      this.createLayer(nextProps.mapData);
    }
    if(nextProps.currentId !== this.props.currentId){
      this.setCenter(nextProps.currentId);
    }
  }

  // 根据当前id设置中心点和放大级别
  setCenter = currentId => {
    // 先重置之前的点位的index值
    this.checkedPlace && this.checkedPlace.setZIndexOffset(10);
    this.checkedPlace = this.featureGroup.getLayers().find(v => {
      return v.__extData.id === currentId
    });
    if(this.checkedPlace){
      this.checkedPlace.setZIndexOffset(20);
      let device = this.checkedPlace.__extData;
      let [longitude, latitude] = device.point.split(',')
      const latlng = L.latLng({ lat: latitude, lng: longitude });
      this.props.map.setView(latlng, LMConfig.LMapConfig.layerOptions.maxZoom - 2);
    }
  }

  createLayer = (mapData = {}) => {
    // 清除图层
    this.featureGroup && this.featureGroup.clearLayers();
    // 绘制场所
    const { placesArray=[], pointsArray=[] } = mapData;// 创建点位
    this._initMarker(pointsArray);
    // 创建场所
    this._initPolygon(placesArray);
    // 自适应
    this.mapReset();
  }

  _initPolygon = places => {
    if (!Array.isArray(places) || places.length === 0) {
      return
    }
    places.forEach(item => {
      const path = item.polyline;
      if (!path || path.length === 0) {
        return
      }
      const polygon =  createPolygon(path, {
        // 边界配置
        zIndexOffset: 10,
        weight: 2,
        fillColor: item.dataType === 'gathered' ? '#ff796e' : '#0989e9',
        fillOpacity: 0.3,
        color: item.dataType === 'gathered' ? '#ff796e' : '#0989e9',
      }); 
      polygon.__extendData = item;
      polygon.on('click', () => this.props.markerClick && this.props.markerClick(item, item.dataType))
      this.featureGroup.addLayer(polygon)
    })
  }

  _initMarker(points) {
    if(Array.isArray(points) && points.length === 0){
      return;
    }
    for(let i = 0; i < points.length; i++){
      let device = points[i]; // 单个点位
      let [longitude, latitude] = device.point.split(',')
      if(!longitude || !latitude){
        continue;
      }
      let marker = this.createMarker({...device, longitude, latitude});
      this.featureGroup.addLayer(marker);
    }
  }

  // 创建点位
  createMarker = point => {
    const imgSrc = point.dataType === 'gathered' ? AddictGather : AddictPlace;
    const marker = new L.Marker(L.latLng(point.latitude, point.longitude), {
      icon: addictPlaceIcon(point, imgSrc),
      zIndexOffset: 10
    });
    marker.__extData = point;
    marker.on('click', e => {
      this.props.markerClick && this.props.markerClick(point, point.dataType);
    })
    // 添加hover
    let label = '';
    if(point.dataType === 'gathered'){
      label = '吸毒人员聚集地点: ';
    }
    if(point.dataType === 'place'){
      label = '销毒地点: ';
    }
    marker.bindTooltip(label + point.objName, tipOptions)
    return marker;
  }
  mapReset = () => {
    const bounds = this.featureGroup.getBounds();
    if (bounds.isValid()) {
      this.props.map.fitBounds(bounds);
    }
  }

  render(){
    return (
      <React.Fragment>
        <MapResetTools mapReset={this.mapReset} />
      </React.Fragment>
    )
  } 
}
export default AddictPlaceMap;