<script>
import commonMixin from "vue-baidu-map/components/base/mixins/common.js";
import bindEvents from "vue-baidu-map/components/base/bindEvent.js";
import { createPoint } from "vue-baidu-map/components/base/factory.js";

export default {
  render() {},
  name: "baiduPointCollection",
  mixins: [commonMixin("overlay")],
  props: {
    points: {
      type: Array,
      default() {
        return [];
      }
    },
    shape: {
      type: String,
      default: "BMAP_POINT_SHAPE_CIRCLE"
    },
    color: {
      type: String
    },
    size: {
      type: String,
      default: "BMAP_POINT_SIZE_NORMAL"
    }
  },
  watch: {
    shape(val) {
      const { originInstance, color, size } = this;
      originInstance.setStyles({
        shape: global[val],
        color,
        size: global[size]
      });
    },
    size(val) {
      const { originInstance, color, shape } = this;
      originInstance.setStyles({
        shape: global[shape],
        color,
        size: global[val]
      });
    },
    color(val) {
      const { originInstance, shape, size } = this;
      originInstance.setStyles({
        shape: global[shape],
        color: val,
        size: global[size]
      });
    },
    points: {
      deep: true,
      handler(val) {
        const { originInstance } = this;
        originInstance.clear();
        originInstance.setPoints(val);
      }
    }
  },
  methods: {
    load() {
      const { BMap, map, points, shape, color, size } = this;
      const overlay = (this.originInstance = new BMap.PointCollection(
        points.map(p => createPoint(BMap, p)),
        {
          shape: global[shape],
          color,
          size: global[size]
        }
      ));
      const thisvue = this;
      overlay.addEventListener("click", function(e) {
        // console.log("baiduPointCollection click listener");
        // console.log(points, "points");
        // console.log(e, "eeeeeeeeeeeeeeeeee");
        // thisvue.$emit("click", e.point);
        // 1. 获取点击的坐标点
        // setTimeout(() => {
        // console.log(JSON.parse(JSON.stringify(e)), 'e.po111111111111nit')
        // });
        const clickedPoint = e.point;
        // console.log(e, "eeeeeeeeeeeeeeeeeeeeeee");
        // console.log(clickedPoint, "clickedPoint");
        if (clickedPoint.wellId) {
          thisvue.$emit("click", {
            ...clickedPoint
          });
        } else {
          // 2. 在points数组中查找匹配的项
          const matchedItem = points.find(item => {
            // 创建当前项的坐标点
            const itemPoint = new BMap.Point(item.lng, item.lat);
            // 比较两点是否相同（可以添加一定的容差）
            return clickedPoint.equals(itemPoint);
          });
          // console.log(matchedItem, "matchedItem");
          // 3. 如果找到匹配项，emit出去
          if (matchedItem) {
            thisvue.$emit("click", {
              ...matchedItem,
              point: e.point,
              data: matchedItem // 包含完整的原始数据
            });
          }
        }
      });

      bindEvents.call(this, overlay);
      map.addOverlay(overlay);
    }
  }
};
</script>