<template>
  <div class="home-right">
    <div class="home-right-inner">
      <msg-card title="涉事车辆车内视角" style="height:40%;margin-bottom: 15px;">
        <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>
      <!-- <msg-card style="height:auto" class="m-b-10" title="涉事车辆车内视角">
        <div class="cardInner">
          <span class="top-left"></span>
          <span class="top-right"></span>
          <span class="bottom-left"></span>
          <span class="bottom-right"></span>
          <local-camera ref="dangerFirstViewVideo" class="videoItem" video-data="wxjs_5"/>
        </div>
      </msg-card> -->
      <msg-card style="height:auto" class="m-b-10" title="车辆跟踪记录">
        <el-table
            :header-cell-style="{backgroundColor:'rgba(1, 43, 83, 1)',color:'rgba(217, 237, 255, 1)'}"
            :row-class-name="userTab"
            :data="tableData"
            style="background-color: transparent; width: 100%;margin-top: 10px">
          <el-table-column
              show-overflow-tooltip
              align="center"
              prop="time"
              label="时间">
          </el-table-column>
          <el-table-column
              show-overflow-tooltip
              prop="location"
              align="center"
              label="位置">
          </el-table-column>
          <el-table-column
              show-overflow-tooltip
              prop="behavior"
              align="center"
              label="行为">
          </el-table-column>
        </el-table>
      </msg-card>
      <msg-card style="height:auto" class="m-b-10" title="车辆历史危险驾驶行为">
        <el-table
            :header-cell-style="{backgroundColor:'rgba(1, 43, 83, 1)',color:'rgba(217, 237, 255, 1)'}"
            :row-class-name="userTab"
            :data="tableData1"
            style="background-color: transparent; width: 100%;margin-top: 10px">
          <el-table-column
              align="center"
              show-overflow-tooltip
              prop="time"
              label="日期时间">
          </el-table-column>
          <el-table-column
              prop="startTime"
              show-overflow-tooltip
              align="center"
              label="开始时间">
          </el-table-column>
          <el-table-column
              prop="endTime"
              show-overflow-tooltip
              align="center"
              label="结束时间">
          </el-table-column>
          <el-table-column
              prop="behavior"
              show-overflow-tooltip
              align="center"
              label="危险驾驶行为">
          </el-table-column>
        </el-table>
      </msg-card>
    </div>
  </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 CrossControl from "../../../components/CrossControl/crossControl.vue";
import LocalCamera from "../../../components/Standard/localCamera.vue";

let topViewer, bottomViewer;

export default {
  name: "homeRight",
  components: {LocalCamera, CrossControl, CameraVideo, MsgCard, CesiumMap},
  computed: {
    videos() {
      return situation_dangerousDriving.videos.slice(1, 2);
    },
  },
  data() {
    return {
      tableData: [],
      tableData1: [],
    };
  },
  mounted() {
    this.tableData = situation_dangerousDriving.trackRecord
    this.tableData1 = situation_dangerousDriving.dangerDrivingBehaviors
  },
  methods: {
    startVideo(time) {
      console.log(this.$refs.videoItem);
      for (let item of this.$refs.videoItem) {
        item.setTime(time);
      }
    },
    userTab({row, rowIndex}) {
      if (rowIndex % 2 === 0) {
        return 'warning-row'
      } else if (rowIndex % 2 !== 0) {
        return 'pager-row'
      }
    },
    objectSpanMethod({row, column, rowIndex, columnIndex}) {
      if (columnIndex === 0) {
        if (rowIndex % 6 === 0) {
          return {
            rowspan: 6,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
      if (columnIndex === 1) {
        if (rowIndex % 2 === 0) {
          return {
            rowspan: 2,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    }
  },

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

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

.cardInner {
  height: 100%;
  position: relative;
  padding: 10px;
}

.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 {
  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%);

  .home-right-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
  }
}

.m-b-10 {
  margin-bottom: 10px;
}

::v-deep .cameraVideo {
  height: 100%;
}

// ::v-deep .el-table {
//   height: 85%;
//   overflow-y: auto;
// }

::v-deep .el-table--small td, .el-table--small th {
  padding: 4px 0;
}

::v-deep .el-table th {
  padding: 4px 0;
}

::v-deep .el-table {
  width: 440px;
  color: rgba(217, 229, 255, 1);
  font-size: 16px;
}

::v-deep .el-table td, .el-table th.is-leaf {
  border-bottom: none;
}

::v-deep .el-table th.is-leaf {
  border-bottom: none;
}

::v-deep .el-table tr {
  background-color: unset;
}

::v-deep .el-table .warning-row {
  background-color: transparent;
}

::v-deep .el-table tbody tr:hover > td {
  background-color: transparent !important;
}

::v-deep .el-table__body tr.current-row > td {
  background: transparent !important;
}

::v-deep .el-table .pager-row {
  background-color: rgba(53, 92, 166, 0.15);
}

::v-deep .el-table .cell .el-table th div {
  padding-right: 0;
}

::v-deep .el-table--border td {
  border-right: 1px solid rgba(62, 108, 150, 1);
  border-bottom: 1px solid rgba(62, 108, 150, 1);
  border-left: 1px solid rgba(62, 108, 150, 1);
}

::v-deep .el-table--border th {
  border: 1px solid rgba(62, 108, 150, 1);
}

::v-deep .el-table--border {
  border: none;
}

::v-deep .el-table--border::after {
  width: 0;
}

::v-deep .el-table--border::before {
  height: 0;
}

::v-deep .el-table::before {
  height: 0;
}
</style>