<template>
  <div class="home-right">
    <msg-card title="涉事车辆车内视角">
      <div style="height: 100%; width: 100%; display: flex;flex-direction: column;justify-content: space-between;">
        <local-camera v-for="(item,index) of videos" :video-data="item" :key="index" ref="videoItem" :border="true" class="videoItem"></local-camera>
      </div>
    </msg-card>
  </div>
</template>

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

let topViewer, bottomViewer;

export default {
  name: "homeRight",
  components: {LocalCamera, CameraVideo, MsgCard, CesiumMap},
  computed: {
    videos() {
      return situation_accident.videos.slice(1, 3);
    },
  },
  data() {
    return {
    };
  },
  mounted() {
  },
  methods: {
    startVideo(time) {
      console.log(this.$refs.videoItem);
      for (let item of this.$refs.videoItem) {
        item.setTime(time);
      }
    },
  },

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

<style lang='less' scoped>
.videoItem {
  width: 100%;
  height: 49%;
  position: relative;
}

.full-h {
  height: 100%;
}

::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 {
  z-index: 11;
  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(90deg, rgba(8, 20, 31, 0) 0%, rgba(6, 16, 26, 1) 100%);

  .cardInner {
    display: flex;
    flex-direction: column;
    height: 100%
  }

  .top {
    height: auto;
    position: relative;
    border: 1px solid rgba(24, 144, 255, 0.4);
    margin-bottom: 30px;
  }

  .bottom {
    height: auto;
    border: 1px solid rgba(24, 144, 255, 0.4);
    position: relative;
  }

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