<template>
  <div :id="`mars3d-container${mapKey}`" class="mars3d-container" />
</template>
<script>
import Vue from 'vue'
var Cesium = require('../../../node_modules/mars3d-cesium/Build/Cesium/Cesium')
import 'mars3d/dist/mars3d.css'
import 'mars3d/dist/mars3d.js'
import * as mars3d from 'mars3d'
import axios from 'axios'
export default {
  name: 'Mars3dMap',
  props: {
    // 地图唯一性标识
    mapKey: {
      type: String,
      default: ''
    },
    basemap: {
      type: Number,
      default: 1113
    },
    // 自定义参数
    options: Object,
    // 是否插入到body元素上
    appendToBody: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      center: ['', ''] // 地图中心
    }
  },
  watch: {
    basemap(val) {
      this.changeBaseLayer(val)
    }
  },
  mounted() {
    if (this.appendToBody) {
      document.body.appendChild(this.$el)
    }
    if (this.mapKey) {
      axios.get('./config/mars3dConfig.json').then((result) => {
        this.center = [result.data.scene.center.lng, result.data.scene.center.lat]
        this.initMars3d(result.data)
      })
    }
  },

  beforeDestroy() {
    this[`map${this.mapKey}`].destroy()
    delete this[`map${this.mapKey}`]
  },

  methods: {
    initMars3d(options) {
      if (this[`map${this.mapKey}`]) {
        this[`map${this.mapKey}`].destroy()
      }
      const mapOptions = {
        ...options,
        ...this.options
      }
      // 创建三维地球场景
      Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0N2E2M2ZmYi1iMDhjLTQwN2QtODZmOC0zNDZjNTMxYjgyNWEiLCJpZCI6MzY5MDMsImlhdCI6MTYwNzMzMTE2Nn0.5xsFCB0dxpcNGUkJOEpsVhUW9bf66XZIwV3hkZl09UI'
      // window.viewer = new Cesium.Viewer('mars3dContainer', {
      //   geocoder: false, // 是否显示地名查找控件
      //   infoBox: false,
      //   animation: false, // 是否显示动画控件(左下方那个)
      //   timeline: false, // 是否显示时间线控件
      //   shadows: false, // 阴影是否被太阳投射
      //   showldAnimate: true, // 让场景中的动画自动播放
      //   sceneModePicker: false, // 是否显示投影方式控件
      //   fullscreenButton: false, // 全屏按钮不显示
      //   homeButton: false,
      //   navigationHelpButton: false, // 帮助按钮
      //   baseLayerPicker: false,
      //   imageryProvider: new Cesium.TileMapServiceImageryProvider({
      //     url: Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII')
      //   })
      // })
      // window.viewer.imageryLayers._layers[0].show = false
      // window.viewer.scene.globe.baseColor = Cesium.Color.WHITE
      // window.viewer._cesiumWidget._creditContainer.style.display = 'none' // 去除版权信息
      // window.map = new mars3d.Map(window.viewer, mapOptions)
      var map = new mars3d.Map(`mars3d-container${this.mapKey}`, mapOptions)
      map.basemap = this.basemap
      map.scene.screenSpaceCameraController.tiltEventTypes = [Cesium.CameraEventType.RIGHT_DRAG]
      map.scene.screenSpaceCameraController.zoomEventTypes = [Cesium.CameraEventType.MIDDLE_DRAG, Cesium.CameraEventType.WHEEL, Cesium.CameraEventType.PINCH]
      map.scene.screenSpaceCameraController.rotateEventTypes = [Cesium.CameraEventType.LEFT_DRAG]
      map.scene.screenSpaceCameraController.enableCollisionDetection = false
      map.on(mars3d.EventType.renderError, function(event) {
        window.location.reload()
      })
      this[`map${this.mapKey}`] = map
      // this.bloomEffect = new mars3d.effect.BloomEffect({
      //   enabled: true
      // })
      // map.addEffect(this.bloomEffect)
      // window.map.basemap.opacity = this.alpha / 100
      // 挂载到全局对象下，所有组件通过 this.map 访问
      Vue.prototype[`map${this.mapKey}`] = map
      // 抛出事件
      this.$emit('onload', map)
    },
    changeBaseLayer(basemap) {
      window.map.basemap = basemap
    }
  }

}
</script>

<style scoped>
.mars3d-container {
  height: 100%;
  overflow: hidden;
}
</style>