<template>
    <div style="wight:100%;height:100%;position: relative;">
      <div :id="`mars3d-container${mapKey}`"
      :class="['mars3d-container', customClass, { 'mars3d-container-compare-rh' : compare }]"></div>
  
      <div class="infoview">
        <div style="display: inline-block;color:red;font-weight:bolder;">每次只允许提交保存一个关键点</div>
      </div>
  
    </div>
  
  </template>
  
  <script>
  import Vue from 'vue'
  import { Tools, HttpReq, CAMap} from '@/assets/js/common.js';
  
  // 使用免费开源版本
  import 'mars3d/dist/mars3d.css'
  import * as mars3d from 'mars3d'
  import * as Cesium from 'mars3d-cesium/Build/Cesium/Cesium'
  import  { initGraphicManager,initLayerManager,bindLayerContextMenu } from './js/graphicManager'
  
  
  // 导入插件(其他插件类似，插件清单访问：http://mars3d.cn/dev/guide/start/install.html)
  // echarts插件
  // import 'mars3d-echarts'
  
  // 为了方便使用,绑定到原型链，在其他vue文件，直接 this.mars3d 来使用
  Vue.prototype.mars3d = mars3d
  Vue.prototype.Cesium = mars3d.Cesium
  
  var map;
  export default {
    name: 'mars3dViewer',
  
    created(){
      this.getCoordinate();
    },
  
    data(){
      return{
        zuobianData:[],
        toJavaCoordinates:[],
        weilanName:[],
      }
    },
  
    props: {
      // 初始化配置参数
      url: String,
  
      // 地图唯一性标识
      mapKey: {
        type: String,
        default: ''
      },
  
      // 自定义参数
      options: Object,
  
      // 是否分屏显示
      compare: {
        type: Boolean,
        default: false
      },
  
      // 是否插入到body元素上
      appendToBody: {
        type: Boolean,
        default: false
      },
  
      // 自定义css类名
      customClass: {
        type: String,
        default: ''
      }
    },
  
    destroy() {
      this[`map${this.mapKey}`].destroy()
      delete this[`map${this.mapKey}`]
    },
  
    methods: {
      //后台获取数据
      getCoordinate() {
        let that = this;
        // HttpReq.truckDispatching.screenMapSetUpQuery({size:9999}).then((res) => {
              // 	if(true){;
              // 		//console.log(res);
        //     let data1 = [];
        //     for(let key  in res){
        //       that.weilanName.push(key);
        //       let arrays = [];
        //       res[key].forEach(function(item){
        //         var arr = [];
        //         arr[0] = item.lon;
        //         arr[1] = item.lat;
        //         arr[2] = "500";
        //         arrays.push(arr);
        //       })
        //       data1.push(arrays)
        //     }
        //     that.zuobianData = data1
            //console.log("zuobianData",that.zuobianData);
            //console.log("weilanName",that.weilanName);
  
            if (this.appendToBody) {
              document.body.appendChild(this.$el)
            }
  
            if (this.mapKey) {
              this.initMars3d(this.options)
            } else {
              mars3d.Resource.fetchJson({ url: this.url }).then((data) => {
                this.initMars3d(data.map3d)// 构建地图
              })
            }
              // 	}
              // })
      },
      //上传关键点数据
      uploaded(text,color){
        let newData = [...this.toJavaCoordinates];
        newData.pop();
          let allObj = {};
          allObj.name = text;
          allObj.zuobiao = newData;
          allObj.color = color;
          this.toJavaCoordinates = [];
          //console.log(allObj);
          //发送添加电子围栏请求
          HttpReq.truckDispatching.screenMapSetUpAdd(allObj).then((res) => {
            this.$notify({
              title: '区域信息上传成功，即将重新加载！',
              type: 'success',
              duration: 2500
            });
            setTimeout(function (){
              window.location.reload();
            },2000);
          }).catch(function(error) { });
      },
      //创建地图
      initMars3d(options) {
        let that = this;
        if (this[`map${this.mapKey}`]) return
  
        const mapOptions = {
          ...options,
          ...this.options,
          control: {
            defaultContextMenu: false, //右键菜单
          },
        }
  
        // 创建三维地球场景
        map = new mars3d.Map(`mars3d-container${this.mapKey}`, mapOptions)
        this[`map${this.mapKey}`] = map
        
        //围栏回显
        // that.zuobianData.forEach(function(item,index){
        //   var graphicLayer = new mars3d.layer.GraphicLayer();
        //   map.addLayer(graphicLayer);
        //   initLayerManager(graphicLayer,that.weilanName[index]);
        //   that.addGraphic_01(graphicLayer,item,that.weilanName[index]);
        // })

        // 抛出事件
        this.$emit('onload', map)
      },
      //关键点设置
      btnStartDraw(){
        this.toJavaCoordinates = [];
        let that = this;
        var graphicLayer3 = new mars3d.layer.GraphicLayer();
        graphicLayer3.on(mars3d.EventType.click, function (event) {
          var mpt = mars3d.LatLngPoint.fromCartesian(event.cartesian);
          that.toJavaCoordinates.push(mpt.toString().split(','));
          console.log(that.toJavaCoordinates);
        });
        map.addLayer(graphicLayer3);
        initLayerManager(graphicLayer3);
        graphicLayer3.startDraw({
          type: "point",
          style: {
            color: "red",
            outline: true,
            outlineColor: "red",
            outlineWidth: 10,
            label: {
              text: '新增关键点',
              font_size: 18,
              color: "blue",
              distanceDisplayCondition: true,
              distanceDisplayCondition_far: 500000,
              distanceDisplayCondition_near: 0,
              pixelOffset: new Cesium.Cartesian2(10, -25), //偏移量
            },
          },
        });
      },
     
    }
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style >
  .cesium-viewer-toolbar{
    
    display: none !important;
  }
  .mars3d-compass{
    display: none !important;
  }
  .mars3d-locationbar{
    display: none !important;
  }
  .mars3d-distance-legend{
    display: none !important;
  }
  .mars3d-container {
    height: 100%;
    width: 100vw;
    overflow: hidden;
  }
  
  /* 重写Cesium的css */
  
  /**cesium按钮背景色*/
  .cesium-button {
    background-color: #3f4854;
    color: #e6e6e6;
    fill: #e6e6e6;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    line-height: 32px;
  }
  
  .cesium-viewer-geocoderContainer .cesium-geocoder-input {
    background-color: rgba(63, 72, 84, 0.7);
  }
  
  .cesium-viewer-geocoderContainer .cesium-geocoder-input:focus {
    background-color: rgba(63, 72, 84, 0.9);
  }
  
  .cesium-viewer-geocoderContainer .search-results {
    background-color: #3f4854;
  }
  
  .cesium-geocoder-searchButton {
    background-color: #3f4854;
  }
  
  .cesium-infoBox-title {
    background-color: #3f4854;
  }
  
  .cesium-infoBox {
    background: rgba(63, 72, 84, 0.9);
  }
  
  .cesium-toolbar-button img {
    height: 100%;
  }
  
  .cesium-performanceDisplay-defaultContainer {
    top: auto;
    bottom: 35px;
    right: 50px;
  }
  .cesium-performanceDisplay-ms,
  .cesium-performanceDisplay-fps {
    color: #fff;
  }
  
  /**cesium工具栏位置*/
  .cesium-viewer-toolbar {
    top: auto;
    left: auto;
    right: 12px;
    bottom: 35px;
  }
  
  .cesium-viewer-toolbar > .cesium-toolbar-button,
  .cesium-navigationHelpButton-wrapper,
  .cesium-viewer-geocoderContainer {
    margin-bottom: 5px;
    float: right;
    clear: both;
    text-align: center;
  }
  
  .cesium-baseLayerPicker-dropDown {
    bottom: 0;
    right: 40px;
    max-height: 700px;
    margin-bottom: 5px;
  }
  
  .cesium-navigation-help {
    top: auto;
    bottom: 0;
    right: 40px;
    transform-origin: right bottom;
  }
  
  .cesium-sceneModePicker-wrapper {
    width: auto;
  }
  
  .cesium-sceneModePicker-wrapper .cesium-sceneModePicker-dropDown-icon {
    float: left;
    margin: 0 3px;
  }
  
  .cesium-viewer-geocoderContainer .search-results {
    left: 0;
    right: 40px;
    width: auto;
    position: absolute;
    z-index: 999;
  }
  
  .cesium-infoBox-title {
    background-color: #3f4854;
  }
  
  .cesium-infoBox {
    top: 50px;
    background: rgba(63, 72, 84, 0.9);
  }
  
  /**左下工具栏菜单*/
  .toolbar-dropdown-menu-div {
    background: rgba(43, 44, 47, 0.8);
    border: 1px solid #2b2c2f;
    z-index: 999;
    position: absolute;
    right: 60px;
    bottom: 40px;
    display: none;
  }
  
  .toolbar-dropdown-menu {
    min-width: 110px;
    padding: 0;
  }
  .toolbar-dropdown-menu > li {
    padding: 0 3px;
    margin: 2px 0;
  }
  .toolbar-dropdown-menu > li > a {
    color: #edffff;
    display: block;
    padding: 4px 10px;
    clear: both;
    font-weight: normal;
    line-height: 1.6;
    white-space: nowrap;
    text-decoration: none;
  }
  
  .toolbar-dropdown-menu > li > a:hover,
  .dropdown-menu > li > a:focus {
    color: #fff;
    background-color: #444d59;
  }
  
  .toolbar-dropdown-menu > .active > a,
  .dropdown-menu > .active > a:hover,
  .dropdown-menu > .active > a:focus {
    color: #fff;
    background-color: #444d59;
  }
  
  .toolbar-dropdown-menu i {
    padding-right: 5px;
  }
  
  .infoview{
    position: absolute;
    top: 10px;
    left: 10px;
    width: 50vw;
    z-index: 1000;
  }
  </style>
  