export class DefinedOverlay extends T.Overlay {
  initialize(lnglat, x, options = {}) {
    const { text, text2, filterNowMarkerList } = x;
    this.lnglat = lnglat;
    this.setOptions(options);
    this._text = text;
    this._overText = text2;
    this.filterNowMarkerList = filterNowMarkerList;
  }

  onAdd(map) {
    this.map = map;
    const div = (this._div = document.createElement('div'));
    div.style.position = 'absolute';
    div.style.backgroundColor = 'rgba(255, 0, 0, 0.7)';
    div.style.border = '1px solid #BC3B3A';
    div.style.color = 'white';
    div.style.width = '200px';
    div.style.height = '94px';
    div.style.padding = '2px';
    div.style.lineHeight = '18px';
    div.style.whiteSpace = 'nowrap';
    div.style.MozUserSelect = 'none';
    div.style.fontSize = '12px';
    div.style.display = 'none';

    const span = (this._span = document.createElement('span'));
    div.appendChild(span);
    span.appendChild(document.createTextNode(this._text));
    const that = this;

    div.onmouseover = function () {
      this.style.backgroundColor = '#6BADCA';
      this.style.borderColor = '#0000ff';
      this.getElementsByTagName('span')[0].innerHTML = that._overText;
    };

    div.onmouseout = function () {
      this.style.backgroundColor = '#EE5D5B';
      this.style.borderColor = '#BC3B3A';
      this.getElementsByTagName('span')[0].innerHTML = that._text;
    };

    this._bg = document.createElement('div');
    this._bg.style.position = 'absolute';
    this._bg.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
    this._bg.style.border = '1px solid #BC3B3A';
    this._bg.style.color = 'white';
    this._bg.style.width = '1120px';
    this._bg.style.height = '794px';
    this._bg.style.top = '0px !important';
    this._bg.style.left = '0px !important';
    this._bg.style.display = 'none';

    this._bg.onclick = () => {
      this.hide();
    };

    map.getPanes().overlayPane.appendChild(this._bg);
    map.getPanes().overlayPane.appendChild(this._div);
    this.update(this.lnglat);
  }

  onRemove() {
    const parent = this._div.parentNode;
    if (parent) {
      parent.removeChild(this._div);
      parent.removeChild(this._bg);
      this._bg = null;
      this._div = null;
    }
  }

  show() {
    this._div.style.display = 'block';
    this._bg.style.display = 'block';
  }

  hide() {
    this._div.style.display = 'none';
    this._bg.style.display = 'none';
  }

  setLnglat(lnglat) {
    this.lnglat = lnglat;
    this.update();
  }
  getLnglat() {
    return this.lnglat;
  }
  setPos(pos) {
    this.lnglat = this.map.layerPointToLngLat(pos);
    this.update();
  }
  /**
   * 更新位置
   */
  update() {
    const pos = this.map.lngLatToLayerPoint(this.lnglat);
    this._div.style.top = pos.y - 36 + 'px';
    this._div.style.left = pos.x - 11 + 'px';
  }

  setOverlayInfo({ text, text2, lnglat }) {
    this._text = text;
    this._overText = text2;
    this.setLnglat(lnglat);
  }

  toggle(show = false, options) {
    if (show) {
      this.setOverlayInfo(options);
      this._div.style.display = 'block';
    } else {
      this._div.style.display = 'none';
    }
  }
}

export class DefinedMarkerInfoWindow {
  constructor(id, options = {}) {
    this.createContain(id);

    return new T.InfoWindow(this._div.outerHTML, {
      closeButton: false,
      closeOnClick: true,
      offset: new T.Point(17, 47),
      autoPan: true,
      minWidth: 0,
    });
  }

  createContain(id) {
    const div = document.createElement('div');
    div.setAttribute('id', id);
    div.style.width = '60px';
    div.style.height = '60px';
    div.style.background = 'rgba(0, 0, 0, 0)';
    div.style.position = 'relative';

    this.containerId = id;
    this._div = div;
  }
}

// 随机向地图添加 n 个标注
export const randomPoint = (map, n) => {
  const bounds = map.getBounds();
  const sw = bounds.getSouthWest();
  const ne = bounds.getNorthEast();
  const lngSpan = Math.abs(sw.lng - ne.lng);
  const latSpan = Math.abs(ne.lat - sw.lat);
  const result = [];
  for (let i = 0; i < n; i++) {
    const lng = sw.lng + lngSpan * (Math.random() * 0.7);
    const lat = ne.lat - latSpan * (Math.random() * 0.7);

    result.push({
      lng,
      lat,
      zh: `天坛公园${i}`,
      detail: `detail天坛公园${i}`,
      count: Math.floor(Math.random() * 30),
      lnglat: new T.LngLat(lng, lat),
    });
  }
  return result;
};
