popup 点位弹窗

export default class popup {
  constructor(vue) {
    // 弹窗的ID
    this.id = undefined;
    // 弹窗对应的事件处理函数
    this.fun = undefined;
    // Vue实例
    this.vue = vue;
    // 保存弹窗类型和ID的映射关系
    this.popTypeMap = new Map();
  }

  /**
   * 创建弹窗
   * @param {String} type 弹框类型
   * @param {Vue} popup 弹框组件
   * @param {Object} options 携带参数
   * @returns
   */
  createPopup(type, popup, options, popupheight, popupLeft, gensui = true) {
    // 如果已经存在相同ID的弹窗，则直接返回
    if (document.getElementById(options.id)) return;

    if (this.id) {
      // 如果当前存在弹窗，则先移除
      if (document.getElementById(this.id)) {
        this.removePopup();
      }
    }
    // 使用Vue.extend方法创建弹窗的Vue实例
    let windowVm = this.vue.extend(popup);
    // 创建弹窗的Vue实例，并传入propsData
    this.vmInstance = new windowVm({
      propsData: {
        info: {
          ...options,
        },
      },
    });
    // 将store对象设置为弹窗实例的$store属性
    this.vmInstance.$store = options.store;
    // 手动挂载Vue
    this.vmInstance.$mount();
    // 弹窗关闭事件的处理函数
    this.vmInstance.closeEvent = (e) => {
      // XGisMap.YBLS.create.entity.point.pointFlash("")
      // 移除弹窗
      this.removePopup();
    };

    // 将弹窗实例的根元素添加到DOM中
    document.getElementById('app').appendChild(this.vmInstance.$el);
    // 如果gensui参数为true，则添加回调函数，用于实现弹窗的跟随效果
    if (gensui) {
      this.fun = earth.czm.viewer.scene.postRender.addEventListener(() => {
        if (!document.getElementById(options.id)) return;
        const scratch = new Cesium.Cartesian2();

        let winpos = earth.czm.viewer.scene.cartesianToCanvasCoordinates(
          options.position,
          scratch
        );
        if (Cesium.defined(winpos)) {
          this.vmInstance.$el.style.top =
            winpos.y -
            this.vmInstance.$el.clientHeight -
            (popupheight || 80) +
            'px';
          this.vmInstance.$el.style.left =
            winpos.x -
            this.vmInstance.$el.clientWidth / 2 -
            (popupLeft || 0) +
            'px';
        }
      });
    }
    // 设置当前弹窗的ID
    this.id = options.id;
    // 将弹窗类型和ID添加到映射关系中
    this.popTypeMap.set(type, this.id);
    // 返回弹窗实例
    return this.vmInstance;
  }
  /**
   * @description: 销毁弹窗
   * @return {*}
   */
  removePopup() {
    // 判断是否存在当前弹窗元素
    if (document.getElementById(this.id)) {
      // 从DOM中移除弹窗元素
      document
        .getElementById('app')
        .removeChild(document.getElementById(this.id));
      // 销毁弹窗实例
      this.vmInstance.$destroy();
      if (this.fun) {
        this.fun(); // 移除回调函数
      }
    }
  }
  /**
   * @description: 根据类型删除弹窗
   * @param {*} type 弹窗类型
   * @return {*}
   */
  removePopupByType(type) {
    if (this.popTypeMap.has(type)) {
      let id = this.popTypeMap.get(type);
      if (document.getElementById(id)) {
        document.getElementById('app').removeChild(document.getElementById(id));
      }
      // XGisMap.YBLS.create.entity.point.pointFlash("")
      this.vmInstance.$destroy(); // 销毁弹窗实例
      if (this.fun) {
        this.fun(); // 移除回调函数
      }

      this.popTypeMap.delete(type); // 移除映射关系中对应的弹窗类型和ID
    }
  }
}