<!--
 * @Author: sjl
 * @Date: 2021-09-08 16:19:24
 * @Descripttion: 
-->
<template>
  <div>
    <div id="mapDiv">
      <mapTool
        :remove="remove"
        :drawline="drawline"
        :drawPolygon="drawPolygon"
        :drawText="drawText"
      />
      <img
        src="../../../assets/images/riverIcon.png"
        alt=""
        style="position: absolute; top: 64px; left: 69px; z-index: 100"
        @click="getRiver"
      />
      <img
        src="../../../assets/images/drawRiver.png"
        alt=""
        style="position: absolute; top: 45px; left: 50px; z-index: 99"
        @click="getRiver"
      />
      <img
        src="../../../assets/images/drawstart.png"
        alt=""
        style="position: absolute; top: 85px; left: 50px; z-index: 99"
        @click="getstart"
      />
      <img
        src="../../../assets/images/drawend.png"
        style="position: absolute; top: 125px; left: 50px; z-index: 99"
        alt=""
        @click="getEnd"
      />
      <!-- <a-button @click="getstart">获取起点</a-button> -->
    </div>
  </div>
</template>
<script>
  import { map } from 'lodash-es';
  import { defineComponent } from 'vue';
  import mapTool from './mapTool.vue';
  let dzdxInfoList = null;
  // let gcInfoList = null;
  export default defineComponent({
    name: 'Map',
    components: { mapTool },
    emits: ['postGeojson', 'toolCallBack'],

    setup() {
      return {};
    },

    data() {
      return {
        markerAddType: true,
        startPosition: null,
        endPositon: null,
        geojsonData: {},
        // url:'../../../assets/images/drawstart.png'
      };
    },

    mounted() {
      this.init();
      // this.controlMarker();
      // this.addHL();
      // map.event.wheel(() => this.controlMarker());
    },

    methods: {
      init() {
        window.map = new TFMap.Map('mapDiv', window.mapConfig);
        // map.viewer.scene.screenSpaceCameraController.maximumZoomDistance = 500000; //相机的高度的最小值
        // this.addMapElement();
        console.log(window.map.viewer, 'initmap');
        // const targetOrientation = new Cesium.HeadingPitchRoll(0.16954818003539618, -90, 0);
        // window.map.viewer.camera.flyTo({
        //   destination: { x: 95.18047976746081, y: 29.511101815545775, z: 791255.7497327928 },
        //   orientation:targetOrientation,
        //   duration: 3
        // });
        const tempData = {
          destination: { x: 94.77066857601297, y: 26.55104492171595, z: 426896.88999354467 },
          orientation: {
            heading: 6.283185307179586,
            pitch: -1.0182023771170687,
            roll: 6.283185307179586,
          },
        };
        window.map.setView(tempData);
        console.log('飞过去了');
        // var status = false;
        // window.map.components.showCompass = status;
        // window.map.components.showBottom = status;
        // window.map.components.showPrint = status;
        // window.map.components.showFullscreen = status;
        // window.map.components.showHome = status;
        // window.map.components.showLayerControl = status;
        // window.map.components.showSceneMode = status;
        // window.map.components.showScale = true;

        // this.setLingth();
        // map.customAnimation(() => {
        //   map.flyTo({
        //     destination: {
        //       x: 94.98257421055244,
        //       y: 29.612744429598017,
        //       z: 227165.17294726646,
        //     },
        //     orientation: {
        //       heading: 0.0554566617903518,
        //       pitch: -1.5635041977028257,
        //       roll: 0,
        //     },
        //   });
        // });
      },
      getRiver() {
        console.log('drawline');
        console.log('remove');
        window.map.measure('measure_length', (e) => {
          console.log('绘制河段:', e);
          this.geojsonData = this.dataToGeojson(e);
          console.log('this.geojsonData', this.geojsonData);
          this.$emit('postGeojson', this.geojsonData);
        });
      },

      dataToGeojson(data) {
        const geojson = {
          type: 'Feature',
          geometry: {
            type: 'LineString',
            coordinates: data.positions.map((position) => [position.x, position.y]),
          },
          properties: {
            // 其他属性...
          },
        };

        return geojson;
      },
      getstart() {
        console.log(window.map.event, 'map');
        let leftclick = window.map.event.click((i) => {
          console.log(i, '触发了起点回调？');
          this.startPosition = i.position;
          console.log(
            this.startPosition,
            'this.startPosition',
            this.startPosition.x,
            this.startPosition.y
          );

          let marker = new TFMap.Marker(
            {
              x: this.startPosition.x,
              y: this.startPosition.y,
              z: this.startPosition.z,
            },
            '../../../src/assets/images/starts.png'
          )
            .init()
            .setClassify('marker*')
            .flyTo();
          console.log('marker:', marker);
          window.map.addOverlay(marker);

          let parm = {
            position: this.startPosition,
            type: 'start',
          };
          this.$emit('toolCallBack', parm);
          leftclick();
          console.log('点击事件销毁了?');
        });
      },
      getEnd() {
        console.log(window.map.event, 'map');
        let leftclick = window.map.event.click((i) => {
          console.log(i, '触发了终点回调？');
          this.endPositon = i.position;
          console.log(this.endPositon, 'this.startPosition', this.endPositon.x, this.endPositon.y);

          let marker = new TFMap.Marker(
            {
              x: this.endPositon.x,
              y: this.endPositon.y,
              z: this.endPositon.z,
            },
            '../../../src/assets/images/ends.png'
          )
            .init()
            .setClassify('marker*')
            .flyTo();
          if (this.startPosition) {
            this.addLine(this.startPosition, this.endPositon);
          }
          console.log('marker:', marker);
          window.map.addOverlay(marker);
          let parm = {
            position: this.endPositon,
            type: 'end',
          };
          this.$emit('toolCallBack', parm);
          leftclick();
        });
      },
      addLine(par1, par2) {
        // var dot = [{
        //     x: 120.214585,
        //     y: 30.237884,
        //     z: 70,
        // }, {
        //     x: 120.112106,
        //     y: 30.594539,
        //     z: 70,
        // }];
        var dot = [par1, par2];
        let line = new TFMap.Line(dot, '#FFFF00', 10).init().setClassify('line*');
        window.map.addOverlay(line);
      },
      remove() {
        console.log('remove');
      },
      drawline() {
        console.log('drawline');
        console.log('remove');
        window.map.measure('measure_length', (e) => {
          console.log('返回的测量主对象:', e);
        });
      },
      drawPolygon() {
        console.log('drawPolygon111');

        window.map.measure('measure_area', (e) => {
          console.log('返回的测量主对象:', e);
        });
      },
      drawText(lon, lat, text) {
        console.log('drawText');

        var p = {
          x: lon,
          y: lat,
        };
        let word = new TFMap.Word(p, text, '#ffffff', '#00b7ee', '30px sans-serif')
          .init()
          .setClassify('unit*')
          .flyTo();
        window.map.addOverlay(word);
        console.log('文字加载完成');
      },

      controlMarker() {
        const level = map.getLevel();
        if (level > 8) {
          if (this.markerAddType) {
            this.markerAddType = false;
            if (dzdxInfoList) this.dzdxInfoMarker(dzdxInfoList);
            // if (gcInfoList) this.gcInfoMarker(gcInfoList);
          }
        } else {
          this.markerAddType = true;
          map.removeOverlay('dzdmarker*');
        }
      },

      setLingth() {
        // 获取 Scene 实例
        const scene = map.viewer.scene;
        // 开启深度测试和光照漫反射
        scene.globe.depthTestAgainstTerrain = true;
        scene.globe.enableLighting = true;
        // 配置光照效果
        // scene.lightingModel = Cesium.LightingModel.PBR;
        // scene.light.direction = new Cesium.Cartesian3.fromArray([
        //   -1.0, -1.0, -1.0,
        // ]);
        scene.light.color = new Cesium.Color.fromBytes(255, 255, 255, 255);
        scene.light.intensity = 2.0;
      },
    },
  });
</script>
<style lang="less">
  :deep(.cesium-roller-blind) {
    z-index: 0;
  }

  #mapDiv2 {
    background: url('../../assets/images/map.jpg') no-repeat;
  }

  .mapMfasking {
    height: 100vh;
    width: 100vw;
    position: absolute;
    pointer-events: none;
    z-index: 1;
  }

  .mfasking1 {
    box-shadow: inset 420px 100px 100px rgba(0, 0, 0, 0.5);
  }

  .mfasking2 {
    opacity: 1;
    box-shadow: inset -420px -100px 100px rgba(0, 0, 0, 0.5);
    background: url('../../assets/images/bj.png') no-repeat center center;
    background-size: 100% 100%;
  }

  .mfasking3 {
    background: rgba(0, 0, 0, 0);
  }

  #mapDiv {
    height: 529px;
  }
</style>
