import { createApp } from 'vue'
const app = createApp({})
import axios from "axios";

export default {
  name: "X_Cesium",
  props: {
    // 初始化配置参数
    url: String,
    widgetUrl: String,

    // 地图唯一性标识
    mapKey: {
      type: String,
      default: ""
    },

    // 自定义参数
    options1: Object,

    // 是否分屏显示
    compare: {
      type: Boolean,
      default: false
    },

    // 是否插入到body元素上
    appendToBody: {
      type: Boolean,
      default: false
    },

    // 自定义css类名
    customClass: {
      type: String,
      default: ""
    }
  },

  mounted() {
    this.initMap();
  },

  methods: {
    initMap() {
      if (this.mapKey) {
        this.initXJSDK(this.options);
      } else {
        this.getMapConfig(this.url).then(data => {
          this.initXJSDK(data);
        });
      }
    },

    getMapConfig(url) {
      return new Promise((resolve, reject) => {
        axios
          .get(url)
          .then(res => {
            resolve(res.data);
          })
          .then(error => {
            reject(error);
          });
      });
    },

    initXJSDK(options) {
      return new Promise((resolve) => {
        if (this[`viewer${this.mapKey}`]) {
          resolve();
          return;
        }

        const viewer = xjsdk.createMap({
          id: `xj3d-container${this.mapKey ? `-${this.mapKey}` : ""}`,
          data: options.xj3d,
          serverURL: options.serverURL,
          ...this.options
        });

        //widget处理
        this.getMapConfig(this.widgetUrl).then(data => {
          this.initStaticWidget(viewer, data);
        });

        // Cesium 1.61以后默认关闭反走样对面端而言还是开启好，
        viewer.scene.postProcessStages.fxaa.enabled = true;

        //鼠标滚轮放大的步参
        viewer.scene.screenSpaceCameraController._zoomFactor = 2.0;

        //IE览器优化
        if (window.navigator.userAgent.toLowerCase().indexOf("msie") >= 0) {
          viewer.targetFrameRate = 20; //限制帧率
          viewer.requestRenderMode = true; //取消实时渲染
        }

        // 二三维切换不用动画
        if (viewer.sceneModePicker) {
          viewer.sceneModePicker.viewModel.duration = 0.0;
        }

        this[`viewer${this.mapKey}`] = viewer;

        // 挂载到全局对象下，所有组件通过this.$viewer访问
        app.config.globalProperties.$viewer = viewer

        this.$emit("onload", viewer);

        resolve();
      });
    },

    //初始化外部静态widget功能（兼容使用传统模式开发的一些widget）
    initStaticWidget(viewer, widget) {
      xjsdk.widget.init(viewer, widget);
      //绑定图层管理
      window.bindToLayerControl = function (options) {
        var layer = viewer.xjsdk.addOperationalLayer(options);
        var manageLayersWidget = xjsdk.widget.getClass(
          "widgets/manageLayers/widget.js"
        );
        if (manageLayersWidget) {
          manageLayersWidget.addOverlay(options);
        }
        return layer;
      };
      //取消绑定图层管理 ， 参数为bindToLayerControl返回的图层
      window.unbindLayerControl = function (layer) {
        viewer.xjsdk.removeOperationalLayer(layer.config.id);

        var manageLayersWidget = xjsdk.widget.getClass(
          "widgets/manageLayers/widget.js"
        );
        if (manageLayersWidget) {
          manageLayersWidget.removeLayer(layer.config.name);
        }
      };
    }
  }
};

