<script>
export default {
  name: "AppThreeMap",
  label: "3D地图",
  data() {
    return {
      geoMap: null,
      layers: [],
      font: null,
      geoJson: null
    }
  },
  computed: {
    search: v => v.$marketBoard.search
  },
  methods: {
    loadLib() {
      const {$waitFor, THREE, $loadScript} = window
      return $waitFor(THREE).then(() => Promise.all([
        `http://10.0.97.209/presource/datascreen/js/three/js/controls/OrbitControls.js`,
        `http://10.0.97.209/presource/datascreen/js/three/js/renderers/CSS3DRenderer.js`,
        `http://10.0.97.209/presource/datascreen/js/three/js/loaders/FontLoader.js`,
        `http://10.0.97.209/presource/datascreen/js/three/js/geometries/TextGeometry.js`,
        '/presource/datascreen/js/turf.min.js'
      ].map(e => $loadScript('js', e))))
    },
    initMap() {
      const {THREE, d3, TWEEN, turf} = window
      const rootEl = this.$el
      const root = this
      const scale = 8

      class GeoMap {
        constructor() {
          this.cameraPosition = {x: 40, y: 0, z: 80}; // 相机位置
          this.scene = null; // 场景
          this.camera = null; // 相机
          this.renderer = null; // 渲染器
          this.CSS3DRenderer = null; // css渲染器
          this.controls = null; // 控制器
          this.mapGroup = new THREE.Group(); // 组
          this.mouse = new THREE.Vector2();
          this.font = null;
          this.tips = new THREE.Group()
          this.loop = 0
          this.markers = new THREE.Group();
          this.center = turf.center(root.geoJson).geometry.coordinates
        }

        /**
         * @desc 初始化
         * */
        init() {
          this.setScene();
          this.setCamera();
          // this.setAxes();
          this.setRenderer();
          this.setControl();
          this.setMapData(root.geoJson)
          this.setHoverPanel()
          this.animation();
          this.bindMouseEvent()
        }

        /**
         * @desc 动画循环
         * */
        animation() {
          requestAnimationFrame(this.animation.bind(this));
          this.loop = (this.loop * 100 + 2) % 100 * 0.01
          this.markers.children.forEach(e => {
            if (e.data.bakeStockAmt <= 0) {
              e.scale = {
                x: Math.asin(this.loop) + 1,
                y: Math.asin(this.loop) + 1,
                z: Math.asin(this.loop) + 1
              };
            }
          })
          TWEEN.update();
          this.controls.update();
          this.renderer.render(this.scene, this.camera);
          this.CSS3DRenderer.render(this.scene, this.camera);
        }

        /**
         * @desc 绘制地图
         * @params geojson
         * */
        setMapData(data) {
          const that = this
          const getLnglat = (arr, cb) => {
            arr?.map(e => {
              if (e.length === 2 && typeof e[0] === 'number' && typeof e[1] === 'number') {
                cb(e)
              } else {
                getLnglat(e, cb)
              }
            })
          }
          let vector3json = [],
              vector3border = []
          const maxBoundaryPoints = turf.union(data)
          getLnglat(maxBoundaryPoints.geometry.coordinates, p => {
            const lnglat = that.lnglatToVector3(p);
            const vector3 = new THREE.Vector3(lnglat[0], lnglat[1], lnglat[2]).multiplyScalar(1.2);
            vector3border.push(vector3)
          })
          data.features.forEach(function (features, featuresIndex) {
            const areaItems = features.geometry.coordinates;
            features.properties.cp = that.lnglatToVector3(turf.center(features).geometry.coordinates);
            vector3json[featuresIndex] = {
              data: features.properties,
              mercator: []
            };
            areaItems.forEach(function (item, areaIndex) {
              vector3json[featuresIndex].mercator[areaIndex] = [];
              getLnglat(item, cp => {
                const lnglat = that.lnglatToVector3(cp);
                const vector3 = new THREE.Vector3(lnglat[0], lnglat[1], lnglat[2]).multiplyScalar(1.2);
                vector3json[featuresIndex].mercator[areaIndex].push(vector3)
              })
            })
          });
          this.drawMap(vector3json, vector3border)
        }

        /**
         * @desc 绘制图形
         * @param data
         * */
        drawMap(data, border) {
          let that = this;
          this.mapGroup.position.y = 0;
          const extrudeSettings = {
            depth: 0.1,
            steps: 1,
            bevelSegments: 0,
            curveSegments: 1,
            bevelEnabled: false,
          };
          const canvas = document.createElement('canvas');
          canvas.width = 256;
          canvas.height = 256;
          const ctx = canvas.getContext('2d');

          const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
          gradient.addColorStop(0, 'rgba(61,127,255,0.35)');
          gradient.addColorStop(1, '#09E2F8');
          // gradient.addColorStop(0, 'rgba(61,127,255,0.01)'); // 结束颜色
          ctx.fillStyle = gradient;
          ctx.fillRect(0, 0, canvas.width, canvas.height);
          const blockMaterial = new THREE.MeshBasicMaterial({
            map: new THREE.CanvasTexture(canvas),
            transparent: true, wireframe: false
          });
          const lineMaterial = new THREE.LineBasicMaterial({color: '#97CAE6'});
          data.forEach(function (areaData) {
            let areaGroup = new THREE.Group();
            areaGroup.name = 'area';
            areaGroup._groupType = 'areaBlock';
            areaData.mercator.forEach(function (areaItem) {
              // Draw Line
              let lineGeometry = new THREE.BufferGeometry().setFromPoints(areaItem);
              let lineMesh = new THREE.Line(lineGeometry, lineMaterial);
              lineMesh.position.z = 0.101;
              areaGroup.add(lineMesh);
            });
            const {name, cp} = areaData.data
            that.setTips(name, cp[0], cp[1])
            // areaGroup.add(that.tipsSprite(areaData));
            that.mapGroup.add(areaGroup);
          });
          that.mapGroup.add(that.tips)
          const shape = new THREE.Shape(border);
          const areaGeometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);
          const borderMaterial = new THREE.MeshBasicMaterial({color: "#1B4C92", transparent: true, opacity: 0.8});
          const mesh = new THREE.Mesh(areaGeometry, [blockMaterial, borderMaterial]);
          that.mapGroup.add(mesh)
        }

        transLayer(item = {}) {
          let {bakeStockAmt, longitude, latitude} = item
          longitude = Number(longitude || 0).toFixed(6);
          latitude = Number(latitude || 0).toFixed(6);
          const markerGeometry = new THREE.CircleGeometry(0.015, 32);
          const markerMaterial = new THREE.MeshBasicMaterial({
            wireframe: false,
            color: bakeStockAmt > 0 ? "#66FFFF" : "#FFD15C",
          });
          const marker = new THREE.Mesh(markerGeometry, markerMaterial);
          const lnglat = this.lnglatToVector3([longitude, latitude]);
          let v3 = new THREE.Vector3(lnglat[0], lnglat[1], lnglat[2]).multiplyScalar(1.2);
          marker.data = item
          marker.position.set(v3.x, v3.y, 0.11)
          return marker
        }

        addMarkers() {
          root.layers.map(layer => {
            const marker = this.transLayer(layer)
            this.markers.add(marker)
          })
          this.mapGroup.add(this.markers)
        }

        lnglatToVector3(lnglat = []) {
          if (!this.projection) {
            this.projection = d3.geoMercator().center(this.center).scale(100).translate([0, 0]);
          }
          const [x, y] = this.projection([lnglat[0], lnglat[1]])
          const z = 0;
          return [y, x, z]
        }

        /**
         * @desc 创建场景
         * */
        setScene() {
          this.scene = new THREE.Scene();
          this.mapGroup.scale.set(scale, scale, scale)
          this.mapGroup.position.set(0, 0, 0)
          this.scene.add(this.mapGroup);
        }

        /**
         * @desc 创建相机
         * */
        setCamera() {
          this.camera = new THREE.PerspectiveCamera(10, rootEl.offsetWidth / rootEl.offsetHeight, 1, 2000);
          this.camera.up.x = 0;
          this.camera.up.y = 0;
          this.camera.up.z = 1;
          this.camera.lookAt(0, 0, 0);
          this.scene.add(this.camera);
        }

        /**
         * @desc 创建渲染器
         * */
        setRenderer() {
          this.renderer = new THREE.WebGLRenderer({antialias: true});
          this.renderer.setPixelRatio(window.devicePixelRatio);
          this.renderer.sortObjects = true; // 渲染顺序
          this.renderer.setClearColor(0xffffff, 0);
          this.renderer.setSize(rootEl.offsetWidth, rootEl.offsetHeight);
          rootEl.appendChild(this.renderer.domElement);
          this.CSS3DRenderer = new THREE.CSS3DRenderer();
          this.CSS3DRenderer.setSize(rootEl.offsetWidth, rootEl.offsetHeight);
          this.CSS3DRenderer.domElement.style.position = 'absolute';
          this.CSS3DRenderer.domElement.style.top = '0';
          this.CSS3DRenderer.domElement.style.left = '0';
          rootEl.appendChild(this.CSS3DRenderer.domElement);

          function onWindowResize() {
            this.camera.aspect = rootEl.offsetWidth / rootEl.offsetHeight;
            this.camera.updateProjectionMatrix();
            this.renderer.setSize(rootEl.offsetWidth, rootEl.offsetHeight);
            this.CSS3DRenderer.setSize(rootEl.offsetWidth, rootEl.offsetHeight);
          }

          rootEl.addEventListener('resize', onWindowResize.bind(this), false);
        }

        /**
         * @desc 创建控制器
         * */
        setControl() {
          this.controls = new THREE.OrbitControls(this.camera, rootEl);
          this.controls.enableRotate = false
          this.camera.position.set(this.cameraPosition.x, this.cameraPosition.y, this.cameraPosition.z);
        }

        /**
         * @desc 创建一个xyz坐标轴
         * */
        setAxes() {
          const axes = new THREE.AxesHelper(100);
          this.scene.add(axes);
        }

        setTips(text, x, y) {
          const textGeometry = new THREE.TextGeometry(text, {
            font: root.font,
            size: 0.04,
            height: 0.02
          });
          textGeometry.center()
          textGeometry.rotateZ(Math.PI / 2)
          textGeometry.rotateY(Math.PI / 6)
          textGeometry.translate(x, y, 0.15)
          const textMaterial = new THREE.MeshBasicMaterial({color: 0xffffff, transparent: true, opacity: 0.8});
          const textMesh = new THREE.Mesh(textGeometry, textMaterial);
          this.tips.add(textMesh)
        }

        setHoverPanel() {
          this.hoverPanelElement = document.createElement('div')
          Object.entries({
            background: 'linear-gradient( 90deg, rgba(9,63,107,0.79) 0%, rgba(13,58,99,0.03) 100%)',
            borderRadius: '2px',
            color: '#fff',
            fontSize: '10px',
            lineHeight: '14px',
            position: 'absolute',
            top: 0,
            padding: '8px',
            opacity: 0,
          }).forEach(([key, value]) => {
            this.hoverPanelElement.style[key] = value
          })
          this.hoverPanel = new THREE.CSS3DObject(this.hoverPanelElement)
          this.scene.add(this.hoverPanel)
        }

        bindMouseEvent() {
          const raycaster = new THREE.Raycaster();

          const onPointerMove = (event) => {
            const {offsetWidth: width, offsetHeight: height} = rootEl, {left, top} = rootEl.getBoundingClientRect();
            this.mouse.x = ((event.clientX - left) / width) * 2 - 1; //标准设备横坐标
            this.mouse.y = -((event.clientY - top) / height) * 2 + 1; //标准设备纵坐标
            raycaster.setFromCamera(this.mouse, this.camera);
            const intersects = raycaster.intersectObjects(this.markers.children)
            intersects.forEach(e => {
              if (e.object?.data) {
                this.showHoverPanel(e.object)
              }
            })
            if (intersects?.length <= 0) {
              this.hoverPanelElement.style.opacity = '0'
            }
          }
          const onClick = () => {
            // const {x, y} = this.mouse
            // const standardVector = new THREE.Vector3(x, y, 0.5); //标准设备坐标
            // //标准设备坐标转世界坐标
            // const worldVector = standardVector.unproject(this.camera);
            // const ray = worldVector.sub(this.camera.position).normalize();
            // 创建一个射线投射器
            raycaster.setFromCamera(this.mouse, this.camera);
            const intersects = raycaster.intersectObjects(this.markers.children)
            intersects.forEach(e => {
              if (e.object?.data) {
                const marker = e.object?.data
                root.$storeBoard.search.storeCode = marker.storeCode
                root.$marketBoard.screenId = 'a90522ef-869b-40ea-8542-d1fc9674a1e8'
              }
            })
          }
          rootEl.addEventListener('pointermove', onPointerMove);
          rootEl.addEventListener('click', onClick);
        }

        showHoverPanel({data: marker, position} = {}) {
          this.hoverPanelElement.style.opacity = '1'
          this.hoverPanelElement.innerHTML = [marker.storeName, `现烤库存金额：${marker.bakeStockAmt}`, `现烤销售机会：${marker.bakeStockAmt}`].join('<br/>')
          this.hoverPanel.scale.set(...Array(3).fill(0.04))
          this.hoverPanel.rotation.z = Math.PI / 2
          this.hoverPanel.rotation.y = Math.PI / 6
          this.hoverPanel.position.set(position.x * scale, position.y * scale, position.z * scale)
        }
      }

      return new GeoMap()
    },
    getData() {
      const {$http, $waitFor} = window
      const {groupCodeList, currentDate} = this.search
      return $waitFor($http).then(() => Promise.all([
        $http.post("/data-boot/la/screen/marketBoard/storeReport", {
          groupCodeList, currentDate
        }).then(res => {
          if (res?.data) {
            return this.layers = res.data || []
          }
        }),
        axios.get('http://10.0.97.209/blade-visual/map/data?id=1456').then(res => {
          if (res?.data) {
            return this.geoJson = res.data
          }
        })
      ]))
    }
  },
  watch: {
    search: {
      deep: true, handler() {
        this.getData().then(() => this.geoMap.addMarkers())
      }
    }
  },
  mounted() {
    this.loadLib().then(() => new Promise(resolve => {
      const loader = new THREE.FontLoader();
      loader.load("/presource/datascreen/js/three/fonts/HarmonyOS Sans SC_Regular.json", font => {
        this.font = font
        resolve()
      })
    })).then(() => {
      return !this.geoJson && this.getData()
    }).then(() => {
      this.geoMap = this.initMap();
      this.geoMap.init();
      this.geoMap.addMarkers()
    })
  }
}
</script>
<template>
  <section class="AppThreeMap"/>
</template>
<style>
.AppThreeMap {
  width: 900px;
  height: 500px;
  position: relative;
}
</style>
