<template>
  <div class="home-right">
    <msg-card title="事故现场监控">
      <div class="cardInner">
        <div class="top">
          <span class="top-left"></span>
          <span class="top-right"></span>
          <span class="bottom-left"></span>
          <span class="bottom-right"></span>
          <cesium-map class="cesium-map" ref="homeRightTop" c-id="home-right-top"/>
        </div>
        <div class="bottom">
          <span class="top-left"></span>
          <span class="top-right"></span>
          <span class="bottom-left"></span>
          <span class="bottom-right"></span>
          <cesium-map class="cesium-map" ref="homeRightBottom" c-id="home-right-bottom"/>
        </div>
      </div>

    </msg-card>

  </div>
</template>

<script>
import CesiumMap from "../../../components/Standard/mapCesium.vue";
import MsgCard from "../../../components/Standard/msg-card.vue";

let topViewer, bottomViewer;

export default {
  name: "homeRight",
  components: {MsgCard, CesiumMap},
  computed: {},
  data() {
    return {};
  },
  mounted() {
    topViewer = this.$refs.homeRightTop.loadMap()
    bottomViewer = this.$refs.homeRightBottom.loadMap()
    topViewer.timeline.container.style.visibility = 'hidden'
    bottomViewer.timeline.container.style.visibility = 'hidden'
    this.$nextTick(() => {
      this.playTracks()
    })
  },
  methods: {
    playTracks(){
      topViewer.entities.removeAll()
      let msg = []
      // 起始时间
      let start = Cesium.JulianDate.fromDate(new Date(msg[0].timeStamp));
      // 结束时间
      let stop = Cesium.JulianDate.fromDate(new Date(msg[msg.length - 1].timeStamp));
      // 设置始时钟始时间
      topViewer.timeline.zoomTo(start, stop);
      topViewer.clock.startTime = start.clone();
      // 设置时钟当前时间
      topViewer.clock.currentTime = start.clone();
      // 设置始终停止时间
      topViewer.clock.stopTime = stop.clone();
      // 时间速率，数字越大时间过的越快
      topViewer.clock.multiplier = 1;
      topViewer.clock.shouldAnimate = true
      // 循环执行,即为2，到达终止时间，重新从起点时间开始
      topViewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;
      this.currentEntity = this.addEntityProperty({
        topViewer: topViewer,
        data: msg,
        type: rowData.type,
        color: rowData.color,
        lineColor: rowData.color,
        start: start,
        stop: stop,
        pos: true,
        ori: true,
        speed: true,
        angle: true,
        path: true
      })
    }
  },

  beforeDestroy() {
  },
};
</script>

<style lang='less' scoped>
::v-deep .content {
  margin: 0
}


.top-left {
  position: absolute;
  left: -1px;
  top: -1px;
  padding: 10px;
  border-style: solid;
  border-color: rgba(24, 144, 255, 1);
  border-width: 3px 0 0 3px;
}

.top-right {
  position: absolute;
  right: -1px;
  top: -1px;
  padding: 10px;
  border-style: solid;
  border-color: rgba(24, 144, 255, 1);
  border-width: 3px 3px 0 0;
}

.bottom-left {
  position: absolute;
  right: -1px;
  bottom: -1px;
  padding: 10px;
  border-style: solid;
  border-color: rgba(24, 144, 255, 1);
  border-width: 0 3px 3px 0;
}

.bottom-right {
  position: absolute;
  left: -1px;
  bottom: -1px;
  padding: 10px;
  border-style: solid;
  border-color: rgba(24, 144, 255, 1);
  border-width: 0 0 3px 3px;
}

.home-right {
  position: absolute;
  right: 0;
  top: 0;
  padding: 15px 25px;
  height: 100%;
  width: 668px;

  background-color: rgba(3, 11, 25, 0.45);
  background-image: linear-gradient(270deg, rgba(0, 0, 0, 0.57) 0%, rgba(0, 0, 0, 0.01) 26.39%);

  .cardInner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%
  }

  .top {
    height: 49%;
    padding: 13px;
    position: relative;
    border: 1px solid rgba(24, 144, 255, 0.4);
  }

  .bottom {
    height: 49%;
    padding: 13px;
    border: 1px solid rgba(24, 144, 255, 0.4);

    position: relative;
  }

  .cesium-map {
    height: 100%;
  }
}
</style>