/**
 * 高德地图点标记绘制相关
 */

import { map, AMap } from './index';
import { useToolboxStore } from '@/stores/toolbox';

const toolboxStore = useToolboxStore();

var _massMarks = undefined;

export default {
  /**
   * 绘制海量点标记
   * @param fDatas 完整监测数据
   * @param _factor 当前展示的监测因子对象
   */
  drawMassMarks(fDatas, _factor, onClick) {
    if (!toolboxStore.dataMarkerStatus) {
      return;
    }
    this.clearMassMarks();
    const lnglats = fDatas.lnglats_GD;
    var data = [];
    for (let i = 0; i < lnglats.length; i++) {
      data.push({
        lnglat: lnglats[i], //点标记位置
        name: `${fDatas.times[i]}<br/>${_factor.factorName}: ${_factor.datas[i].factorData} μg/m³`,
        id: i
      });
    }

    // 创建样式对象
    var styleObject = {
      url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
      // url: './asset/mipmap/ic_up_white.png', // 图标地址

      size: new AMap.Size(11, 11), // 图标大小

      anchor: new AMap.Pixel(5, 5) // 图标显示位置偏移量，基准点为图标左上角
    };

    var massMarks = new AMap.MassMarks(data, {
      zIndex: 5, // 海量点图层叠加的顺序
      zooms: [15, 18], // 在指定地图缩放级别范围内展示海量点图层
      style: styleObject // 设置样式对象
    });
    massMarks.on('click', (event) => {
      const i = event.data.id;
      // 3. 自定义点击事件
      onClick(i);
    });

    var marker = new AMap.Marker({
      content: ' ',
      map: map,

      offset: new AMap.Pixel(13, 12)
    });
    var timeout;
    massMarks.on('mouseover', (e) => {
      if (timeout) {
        clearTimeout(timeout);
      }
      marker.setPosition(e.data.lnglat);
      marker.setLabel({ content: e.data.name });
      map.add(marker);
      timeout = setTimeout(() => {
        map.remove(marker);
      }, 2000);
    });
    _massMarks = massMarks;
    map.add(massMarks);
  },
  clearMassMarks() {
    if (_massMarks) {
      map.remove(_massMarks);
      _massMarks = undefined;
    }
  },

  /**
   * 创建标记点
   * @param {string | Array} img 图标或图标数组
   * @param {Array} dataList 监测数据
   * @param {boolean} collision 标注避让
   * @returns
   */
  createLabelMarks(img, dataList, collision = true, showTxt = true) {
    const layer = new AMap.LabelsLayer({
      zooms: [3, 20],
      zIndex: 1000,
      // 开启标注避让，默认为开启，v1.4.15 新增属性
      collision: collision,
      // 开启标注淡入动画，默认为开启，v1.4.15 新增属性
      animation: true
    });

    map.add(layer);

    // var markers = [];
    for (var i = 0; i < dataList.length; i++) {
      const data = dataList[i];
      var curData = {
        name: data.name,
        position: [data.longitude, data.latitude],
        zooms: [10, 20],
        opacity: 1,
        zIndex: 10,
        icon: {
          type: 'image',
          image: typeof img === 'string' ? img : img[i],
          // clipOrigin: [14, 92],
          // clipSize: [50, 68],
          size: [30, 30],
          anchor: 'bottom-center',
          angel: 0,
          retina: true
        },
        text: {
          content: showTxt ? data.name : '',
          direction: 'top',
          offset: [0, -5],
          style: {
            fontSize: 16,
            fontWeight: 'normal',
            fillColor: '#fff',
            strokeColor: '#333',
            strokeWidth: 0,
            backgroundColor: '#122b54a9'
          }
        }
      };
      curData.extData = {
        index: i
      };

      var labelMarker = new AMap.LabelMarker(curData);

      // markers.push(labelMarker);

      layer.add(labelMarker);
    }

    return layer;
  },

  createMarker({ position, img, label, extData }) {
    //创建 AMap.Icon 实例：
    const icon = new AMap.Icon({
      size: new AMap.Size(30, 30), //图标尺寸
      image: img, //Icon 的图像
      // imageOffset: new AMap.Pixel(-9, -3), //图像相对展示区域的偏移量，适于雪碧图等
      imageSize: new AMap.Size(30, 30) //根据所设置的大小拉伸或压缩图片
    });
    const marker = new AMap.Marker({
      position: position,
      // offset: new AMap.Pixel(-13, -30),
      icon: icon, //添加 icon 图标 URL
      title: label,
      label: {
        content: label,
        direction: 'bottom'
      },
      extData
    });
    // map.add(marker);
    return marker;
  }
};