<template>
  <!-- 尾基线、图层控制及漫游效果 -->
  <div class="TailBaseLineDiv" style="position: relative; padding-left: 20px">
    <a-checkbox style="padding-right: 10px" v-model:checked="checkValue" @change="actionChange(checkValue)"></a-checkbox>
    河流流向
  </div>
</template>

<script>
import { PolylineTrailLinkMaterialProperty } from '/@/utils/util.ts';

import trailPng from '/@/assets/images/trail.png';
import { ref } from 'vue';
import ybjJson from './ybj.json';
import eventBus from '/@/utils/eventBus';
export default {
  name: 'tailBaseLine',
  setup() {
    // const imgPath='/@/assets/images/trail.png';
    let map = null;
    let roloadData = null;
    let trailData = null;
    let checkValue = ref(true);
    // getData();
    // const ybjJsonTemp=ybjJson;
    // ybjJson.
    //确保map已加载完成
    const tempEvent = window.setInterval((e) => {
      if (window.map) {
        map = window.map;
        window.clearInterval(tempEvent);
        addHL();
        startTrail();
      }
    }, 200);

    function getData() {
      
      for (let i = 0; i < ybjJson.features.length; i++) {
        if (ybjJson.features[i].geometry.coordinates[0][0] instanceof Array) {
          for (let j = 0; j < ybjJson.features[i].geometry.coordinates.length; j++) {
            ybjJson.features[i].geometry.coordinates[j].reverse();
          }
        } else {
          ybjJson.features[i].geometry.coordinates.reverse();
        }
      }
    }

    function startTrail() {
      //开启尾际线
      if (roloadData || trailData) {
        stopTrail();
      }
      addTrail();
    }

    function stopTrail() {
      //关闭尾际线
      if (roloadData) {
        map.viewer.dataSources.remove(roloadData);
        roloadData = null;
      }
      if (trailData) {
        map.viewer.dataSources.remove(trailData);
        trailData = null;
      }
    }

    function addRoad() {
      //加载道路
      let viewer = map.viewer;
      let promise = Cesium.GeoJsonDataSource.load(ybjJson, {
        clampToGround: true, //贴地设置
      }); //geojson面数据
      promise.then(function (dataSource) {
        roloadData = dataSource;
        viewer.dataSources.add(dataSource);
        var entities = dataSource.entities.values;
        for (var o = 0; o < entities.length; o++) {
          var r = entities[o];
          r.polyline.width = 10; //添加默认样式
          (r.polyline.material = new Cesium.PolylineGlowMaterialProperty({
            glowPower: 0.3, //一个数字属性，指定发光强度，占总线宽的百分比。
            color: Cesium.Color.DARKBLUE.withAlpha(0.5),
          })),
            10;
        }
      });
    }

    function addTrail() {
      //添加尾迹线
      if (!map) return;
      let viewer = map.viewer;
      let trailLineColor = null;
      trailLineColor = new Cesium.Color(0, 2.88, 23.9, 1.0); //初始化尾迹线颜色
      Cesium.Math.setRandomNumberSeed(0); //设置随机数种子
      let promise2 = Cesium.GeoJsonDataSource.load(ybjJson, {
        clampToGround: true, //贴地设置
      }); //geojson面数据
      promise2.then(function (dataSource) {
        trailData = dataSource;
        viewer.dataSources.add(dataSource);
        var entities = dataSource.entities.values;
        for (var o = 0; o < entities.length; o++) {
          var r = entities[o];
          r.polyline.width = 40; //添加默认样式
          r.polyline.material = new PolylineTrailLinkMaterialProperty(trailLineColor, trailPng, 1800000);
        }
      });
    }

    eventBus.on('TailBaseLine', (data) => {
      // checkValue.value = data;
      console.log('流向：', checkValue);
      if (checkValue.value) {
        if (data) {
          startTrail();
        } else {
          stopTrail();
        }
      }
      if (data) {
        map.showOverlay('hlgeojson', true);
      } else {
        map.showOverlay('hlgeojson', false);
      }
    });

    function addHL() {
     
      var hl = new TFMap.GeoPolyline(ybjJson, 5, 'rgba(0,63,255,1)').setClassify('hlgeojson');
      map.addOverlay(hl);
    }

    function actionChange(data) {
      if (data) {
        startTrail();
      } else {
        stopTrail();
      }
    }

    return {
      actionChange,
      checkValue,
    };
  },
};
</script>

<style lang="less" scoped>
[data-theme='dark'] .TailBaseLineDiv {
  /deep/.ant-checkbox-inner {
    border: 1px solid white;
  }
}
</style>
