<template>
  <!-- cesium模型底图-水科院 -->
  <div class="modalMapIndex">
    <div style="width: 1px; height: 1px">
      <vc-viewer @cesiumReady="initMap"></vc-viewer>
    </div>
    <!-- 加载地图 -->
    <div id="mapContainer">
      <Popup></Popup>
    </div>
  </div>
</template>

<script>
import { createApp, nextTick, onBeforeUnmount, onMounted, reactive, ref, toRefs } from 'vue';
import bus from '@/utils/util';
import blue_vector from './modal/mapboxStyle.js';
import NewFiberMapUtils from '@/utils/gis/NewfiberMap.js';
import Popup from './Popup.vue';
import axios from 'axios';

export default {
  name: 'Mapbox',
  components: { Popup },
  setup(props) {
    const allData = reactive({});

    function loadJs() {
      function PolylineTrailLinkMaterialProperty(color, trailImage, duration) {
        this._definitionChanged = new Cesium.Event();
        this._color = undefined;
        this._colorSubscription = undefined;
        this.color = color;
        this.duration = duration;
        this.trailImage = trailImage;
        this._time = new Date().getTime();
      }

      function _getPolylineShader() {
        var materail =
          'czm_material czm_getMaterial(czm_materialInput materialInput)\n\
                              {\n\
                                    czm_material material = czm_getDefaultMaterial(materialInput);\n\
                                    vec2 st = materialInput.st;\n\
                                    vec4 colorImage = texture2D(image, vec2(fract(st.s - time), st.t));\n\
                                    material.alpha = colorImage.a * color.a;\n\
                                    material.diffuse = (colorImage.rgb+color.rgb)/2.0;\n\
                                    return material;\n\
                              }';

        return materail;
      }

      Object.defineProperties(PolylineTrailLinkMaterialProperty.prototype, {
        isConstant: {
          get: function () {
            return false;
          },
        },
        definitionChanged: {
          get: function () {
            return this._definitionChanged;
          },
        },
        color: Cesium.createPropertyDescriptor('color'),
      });

      var MaterialType = 'polylineType' + parseInt(Math.random() * 1000);
      PolylineTrailLinkMaterialProperty.prototype.getType = function (time) {
        return MaterialType;
      };

      PolylineTrailLinkMaterialProperty.prototype.getValue = function (time, result) {
        if (!Cesium.defined(result)) {
          result = {};
        }
        result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color);
        result.image = this.trailImage;
        result.time = ((new Date().getTime() - this._time) % this.duration) / this.duration;
        return result;
      };

      PolylineTrailLinkMaterialProperty.prototype.equals = function (other) {
        return (
          this === other ||
          (other instanceof PolylineTrailLinkMaterialProperty &&
            Cesium.Property.equals(this._color, other._color) &&
            Cesium.Property.equals(this._image, other._image))
        );
      };

      Cesium.Material._materialCache.addMaterial(MaterialType, {
        fabric: {
          type: MaterialType,
          uniforms: {
            color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),
            image: Cesium.Material.DefaultImageId,
            time: -20,
          },
          source: _getPolylineShader(),
        },
        translucent: function (material) {
          return true;
        },
      });
      Cesium.PolylineTrailLinkMaterialProperty = PolylineTrailLinkMaterialProperty;

      function Spriteline1MaterialProperty(duration, image) {
        this._definitionChanged = new Cesium.Event();
        this.duration = duration;
        this.image = image;
        this._time = performance.now();
      }
      Object.defineProperties(Spriteline1MaterialProperty.prototype, {
        isConstant: {
          get: function () {
            return false;
          },
        },
        definitionChanged: {
          get: function () {
            return this._definitionChanged;
          },
        },
        color: Cesium.createPropertyDescriptor('color'),
        duration: Cesium.createPropertyDescriptor('duration'),
      });
      Spriteline1MaterialProperty.prototype.getType = function (time) {
        return 'Spriteline1';
      };
      Spriteline1MaterialProperty.prototype.getValue = function (time, result) {
        if (!Cesium.defined(result)) {
          result = {};
        }
        result.image = this.image;
        result.time = ((performance.now() - this._time) % this.duration) / this.duration;
        return result;
      };
      Spriteline1MaterialProperty.prototype.equals = function (e) {
        return this === e || (e instanceof Spriteline1MaterialProperty && this.duration === e.duration);
      };
      Cesium.Spriteline1MaterialProperty = Spriteline1MaterialProperty;
      Cesium.Material.Spriteline1Type = 'Spriteline1';
      Cesium.Material.Spriteline1Source = `
czm_material czm_getMaterial(czm_materialInput materialInput)
{
czm_material material = czm_getDefaultMaterial(materialInput);
vec2 st = materialInput.st;
vec4 colorImage = texture2D(image, vec2(fract(st.s*10.0-time), st.t));
material.alpha = colorImage.a  ;
material.diffuse = colorImage.rgb * 1.5 ;
return material;
}
`;
      // st :二维纹理坐标
      // czm_material：保存可用于照明的材质信息
      Cesium.Material._materialCache.addMaterial(Cesium.Material.Spriteline1Type, {
        fabric: {
          type: Cesium.Material.Spriteline1Type,
          uniforms: {
            color: new Cesium.Color(1, 0, 0, 0.5),
            image: '',
            transparent: true,
            time: 20,
          },
          source: Cesium.Material.Spriteline1Source,
        },
        translucent: function (material) {
          return true;
        },
      });
    }
    function transCoordinate(tileset, ltd, lat, hei) {
      let position = Cesium.Cartesian3.fromDegrees(ltd, lat, hei);
      let m = Cesium.Transforms.eastNorthUpToFixedFrame(position);
      // 旋转
      const rx = 0,
        ry = 0,
        rz = 0;
      var mx = Cesium.Matrix3.fromRotationX(Cesium.Math.toRadians(rx));
      var my = Cesium.Matrix3.fromRotationY(Cesium.Math.toRadians(ry));
      var mz = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(rz));
      var rotationX = Cesium.Matrix4.fromRotationTranslation(mx);
      var rotationY = Cesium.Matrix4.fromRotationTranslation(my);
      var rotationZ = Cesium.Matrix4.fromRotationTranslation(mz);
      //旋转、平移矩阵相乘
      Cesium.Matrix4.multiply(m, rotationX, m);
      Cesium.Matrix4.multiply(m, rotationY, m);
      Cesium.Matrix4.multiply(m, rotationZ, m);
      tileset && (tileset.root.transform = m);
    }
    function onReady0(tileset, viewer) {
      transCoordinate(tileset, 114.229731, 30.669991, -20.0);
      // debugger;
      viewer.zoomTo(tileset);
    }
    function onReady1(tileset, viewer) {
      transCoordinate(114.22546, 30.647908, -20.0);
      // debugger;
    }
    function onReady2(tileset, viewer) {
      transCoordinate(tileset, 114.280809, 30.633398, -20.0);
      // debugger;
    }
    function onReady3(tileset, viewer) {
      transCoordinate(tileset, 114.30179, 30.662891, -20.0);
      // debugger;
    }
    function onReady4(tileset, viewer) {
      transCoordinate(tileset, 114.300507, 30.673361, -20.0);
      // debugger;
      // 缩放视图以查看 Tileset
    }
    // 地图初始化
    function initMap() {
      loadJs();
      Cesium.RequestScheduler.maximumRequests = 200;
      Cesium.RequestScheduler.maximumRequestsPerServer = 200;

      //let interVal = setInterval(() => {
      let mapDom = document.getElementById('mapContainer');
      //if (!!!window.NewFiberMap || !!!mapDom) return;
      //clearInterval(interVal);
      //window.newfiberMap = new NewFiberMap('mapContainer');
      window.newfiberMap = new NewFiberMapUtils({
        container: 'mapContainer',
      });
      newfiberMap.map.scene.screenSpaceCameraController.minimumZoomDistance = 2500;
      newfiberMap.map.scene.screenSpaceCameraController.maximumZoomDistance = 100000;
      // //设置视窗位置
      newfiberMap.setView({
        lon: 114.264596,
        lat: 30.500028,
        heading: 2.281299097855777,
        zoom: 5358.12942752382,
        pitch: -25.2508969308367,
        roll: 0.005453465256790101,
      });

      newfiberMap.addMVTImageryProvider({
        style: blue_vector,
      });

      // 建筑模型文件加载
      // newfiberMap.loadCesium3DTileSet({
      //   id: 'jianzhu5',
      //   url: '/models-rest/rest/models/preview/CIM3-5/tileset.json',
      // });
      // newfiberMap.loadCesium3DTileSet({
      //   id: 'jianzhu7',
      //   url: '/models-rest/rest/models/preview/CIM3-7/tileset.json',
      // });
      // newfiberMap.loadCesium3DTileSet({
      //   id: 'jianzhu8',
      //   url: '/models-rest/rest/models/preview/CIM3-8/tileset.json',
      // });

      //厂站模型加载
      newfiberMap.loadCesium3DTileSet({
        id: 'CQLTXC',
        url: '/3dtiles/与数公基平台对接3dtiles/东渠钢坝闸/tileset.json',
      });
      newfiberMap.loadCesium3DTileSet({
        id: 'CQLBZ',
        url: '/3dtiles/与数公基平台对接3dtiles/常青花园调蓄池/tileset.json',
      });
      newfiberMap.loadCesium3DTileSet({
        id: 'XQGBZ',
        url: '/3dtiles/与数公基平台对接3dtiles/西渠钢坝闸/tileset.json',
        callback: onReady1,
      });
      newfiberMap.loadCesium3DTileSet({
        id: 'TLQBZ',
        url: '/3dtiles/与数公基平台对接3dtiles/常青路泵站/tileset.json',
        callback: onReady0,
      });
      // 铁路桥泵站，目前地址为172.16.238.79，待更改！！
      newfiberMap.loadCesium3DTileSet({
        id: 'TLQBZ',
        url: 'http://172.16.238.79/3dtiles/%E4%B8%8E%E6%95%B0%E5%85%AC%E5%9F%BA%E5%B9%B3%E5%8F%B0%E5%AF%B9%E6%8E%A53dtiles/%E9%93%81%E8%B7%AF%E6%A1%A5%E6%B3%B5%E7%AB%99/tileset.json',
        callback: onReady2,
      });
      newfiberMap.loadCesium3DTileSet({
        id: 'HXHCSO',
        url: '/3dtiles/与数公基平台对接3dtiles/黄孝河CSO/tileset.json',
        callback: onReady3,
      });
      newfiberMap.loadCesium3DTileSet({
        id: 'HXHQHCLSS',
        url: '/3dtiles/与数公基平台对接3dtiles/黄孝河强化处理设施/tileset.json',
        callback: onReady4,
      });
      newfiberMap.loadCesium3DTileSet({
        id: 'HXHGBZ',
        url: '/3dtiles/与数公基平台对接3dtiles/黄孝河钢坝闸/tileset.json',
      });
      newfiberMap.loadCesium3DTileSet({
        id: 'HXHGBZOUT',
        url: '/3dtiles/与数公基平台对接3dtiles/黄孝河钢坝闸——out/tileset.json',
      });
    }

    onMounted(() => {
      // initMap();
    });
    onBeforeUnmount(() => {});
    return {
      ...toRefs(allData),
      initMap,
    };
  },
};
</script>

<style lang="less" scoped>
.modalMapIndex {
  width: 100%;
  height: 100%;
  #mapContainer {
    width: 100%;
    height: 100%;
  }
}
::v-deep(.mapboxgl-ctrl-logo) {
  display: none !important;
}
</style>