<template>
  <div ref="map" class="mapContainer"/>
</template>

<script>
export default {
  props: {
    detail: {
      type: Object,
      required: true
    }
  },
  created() {
    this.handleCreateView()
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        let viewer = Freedo.FdApp.createDefaultViewer(
          'freedoContainer',
          {},
        )
        let imageryManager = new Freedo.FdTools.FdImageryLayersManager(viewer);
        var mm = new Freedo.FdModel.FdModelManager(viewer);
        mm.add('Label', {
          id: 219,
          text: this.detail.fieldintro,
          image: 'static/images/well/pos.png',
          show: true,
          position: [this.detail.lng, this.detail.lat, 0],
          offset: 10,
          labelOption: {
            font: '18px sans-serif',
            fillColor: Freedo.Color.WHITE,
            outlineColor: Freedo.Color.RED,
            horizontalOrigin: Freedo.HorizontalOrigin.LEFT, //LEFT|CENTER|RIGHT, 文字水平方向的焦点
            verticalOrigin: Freedo.VerticalOrigin.BOTTOM,  //TOP|CENTER|BOTTOM, 文字竖直方向的焦点
            pixelOffset: new Freedo.Cartesian2(24, -5),  //文字的像素偏移量
            distanceDisplayCondition: new Freedo.DistanceDisplayCondition(0, 5000), //文字可显示的相机距离区间
            show: true, //文字显示与否
          },
          billboardOption: {
            //disableDepthTestDistance: Number.POSITIVE_INFINITY
            horizontalOrigin: Freedo.HorizontalOrigin.CENTER, //LEFT|CENTER|RIGHT, 图片水平方向的焦点
            verticalOrigin: Freedo.VerticalOrigin.BOTTOM,  //TOP|CENTER|BOTTOM, 图片竖直方向的焦点
            width: 32, //图片显示宽度, 默认为图片本身的像素宽度
            height: 32, //图片显示高度, 默认为图片本身的像素高度
            pixelOffset: new Freedo.Cartesian2(0, 0), //图片的像素偏移量
          },
          maxDistance: 5000000
        });

        imageryManager.add({
          name: "高德影像",
          type: "Amap",
          providerOptions: {
            crs: "WGS84",
            maximumLevel: 18,
            url: "https://webst{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}"
          }
        });
        Freedo.FdCamera.goToByCameraInfo(viewer.scene.camera, [this.detail.lng, this.detail.lat, 800.0, 0.0, -90.0, 0.0])
        this.$refs.map.appendChild(document.querySelector('#freedoContainer'))
      }, 1000)
    })
  },
  methods: {
    handleCreateView() {
      const div = document.createElement('div');
      div.id = 'freedoContainer'
      div.classList.add('full-size')
      document.body.appendChild(div)
    }
  }
}
</script>

<style lang="scss">
body {
  overflow: hidden;
}

.mapContainer {
  width: 100%;
  height: 550px;
}

.full-size {
  display: block;
  position: relative;
  width: 100% !important;
  height: 100% !important;
  border: none;
  display: block;
  z-index: 1000;
}
</style>