<template>
  <div :id="`mars3d-container${mapKey}`" class="mars3d-container" />
</template>
<script>

import Vue from 'vue'
import * as Cesium from 'mars3d-cesium'
import 'mars3d/dist/mars3d.css'
import 'mars3d-cesium/Build/Cesium/Widgets/widgets.css'
import * as mars3d from 'mars3d'

// 为了方便使用,绑定到原型链，在其他vue文件，直接 this.mars3d 来使用
Vue.prototype.mars3d = mars3d
Vue.prototype.Cesium = Cesium

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
    },
    // 是否需要加光
    needBloomEffect: {
      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()
      })

      // const handler = new Cesium.ScreenSpaceEventHandler(map.viewer.canvas)
      // handler.setInputAction(function(evt) {
      //   var cartesian = map.viewer.camera.pickEllipsoid(evt.position, map.viewer.scene.globe.ellipsoid)
      //   var cartographic = Cesium.Cartographic.fromCartesian(cartesian)
      //   var lng = Cesium.Math.toDegrees(cartographic.longitude)// 经度值
      //   var lat = Cesium.Math.toDegrees(cartographic.latitude)// 纬度值
      //   console.log(' {point: [' + lng + ',' + lat + ',0]},')
      // }, Cesium.ScreenSpaceEventType.LEFT_CLICK)

      this[`map${this.mapKey}`] = map
      if (this.needBloomEffect) {
        const bloomEffect = new mars3d.effect.BloomEffect({
          enabled: true
        })
        map.addEffect(bloomEffect)
      }

      const graphicLayer = new mars3d.layer.GraphicLayer()
      map.addLayer(graphicLayer)

      // 挂载到全局对象下，所有组件通过 this.map 访问
      Vue.prototype[`map${this.mapKey}`] = map
      // 抛出事件
      const that= this
      map.on(mars3d.EventType.load, function(event) {
        that.$emit('onload', map, that.center)
      })
    },
    changeBaseLayer(basemap) {
      window.map.basemap = basemap
    }
  }
}
</script>

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