<template>
  <div class="boxes">
    <div class="over_data">
      <div class="over_item">
        <div class="number comm">
          {{ overDatas.inWayVehicleNum }}<span>辆</span>
        </div>
        <div class="title comm">机动车</div>
      </div>
      <div class="over_item">
        <div class="number comm">
          {{ overDatas.maxQueueLength }}<span>米</span>
        </div>
        <div class="title comm">最大排队</div>
      </div>
      <div class="over_item">
        <div class="number comm">
          {{ overDatas.maxStopNumber }}<span>次</span>
        </div>
        <div class="title comm">平均停车次数</div>
      </div>
      <div class="over_item">
        <div class="number comm">
          {{ overDatas.maxTravelTime }}<span>分钟</span>
        </div>
        <div class="title comm">最大行程时间</div>
      </div>
      <div class="over_item">
        <div class="number comm">
          {{ overDatas.avgTravelSpeed }}<span>Km/h</span>
        </div>
        <div class="title comm">平均行程速度</div>
      </div>
    </div>
    <div class="left_box aside" :class="[{ hide_left: !show }]">
      <target-track />
      <traffic-flow />
      <traffic-signal />
    </div>
    <div class="right_box aside" :class="[{ hide_right: !show }]">
      <conflict-monitor />
      <traffic-event />
      <warning-data />
    </div>
  </div>
</template>

<script>
import targetTrack from "./msgLeft/targetTrack.vue";
import trafficFlow from "./msgLeft/trafficFlow.vue";
import trafficSignal from "./msgLeft/trafficSignal.vue";
import conflictMonitor from "./msgRight/conflictMonitor.vue";
import trafficEvent from "./msgRight/trafficEvent.vue";
import warningData from "./msgRight/warningData.vue";
import msgCard from "../../components/Standard/msg-card.vue";
import { getData } from "../../dao/requestByUrl.js";

export default {
  props: ["show"],
  components: {
    msgCard,
    targetTrack,
    trafficFlow,
    trafficSignal,
    conflictMonitor,
    trafficEvent,
    warningData,
  },
  data() {
    return {
      flag: 0,
      timers: [],
      overDatas: {},
      indexesUrl: "",
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.initData();
  },
  methods: {
    async initData() {
      let req = await fetch("DATA.json");
      let allData = await req.json();
      this.indexesUrl = allData.intersectionGroups.apis.floatIndexes.url;
      this.getFiveIndexes();
      let timer = setInterval(() => {
        this.getFiveIndexes();
      }, 1000);
      this.timers.push(timer);
    },
    getFiveIndexes() {
      getData(this.indexesUrl).then((res) => {
        this.overDatas = res.content;
      });
    },
  },
  beforeDestroy() {
    for (let timer of this.timers) {
      clearInterval(timer);
    }
  },
};
</script>

<style lang="less" scoped>
.full-h {
  height: 100%;
}

.boxes {
  font-size: 12px;

  .aside {
    z-index: 11;
    position: absolute;
    top: 0;
    height: 100%;
    display: flex;
    width: 521px;
    flex-direction: column;
    justify-content: space-evenly;
    background-color: rgba(3, 11, 25, 0.45);

    .item {
      flex: 0 0 calc(100% / 3);
      overflow: hidden;
    }
  }

  .left_box {
    left: 0;
    padding-left: 15px;
    padding-right: 10px;
    transition: 0.5s all ease;
    /* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
    // box-shadow: 30px 0px 30px 0px #030b19;
  }

  .hide_left {
    left: -100%;
    transition: 0.5s all ease;
  }

  .right_box {
    right: 0;
    padding-right: 15px;
    padding-left: 10px;
    transition: 0.5s all ease;
    /* x 偏移量 | y 偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
    // box-shadow: -30px 0px 30px 0px #030b19;
  }

  .hide_right {
    right: -100%;
    transition: 0.5s all ease;
  }

  .over_data {
    position: absolute;
    left: 50%;
    top: 25px;
    z-index: 12;
    transform: translate(-50%, 0);
    width: 1221px;
    height: 98px;
    display: flex;
    justify-content: space-between;

    .over_item {
      width: 177px;
      height: 100%;

      .comm {
        display: flex;
        color: white;
        justify-content: center;
        align-items: center;
      }

      .number {
        height: 65px;
        font-size: 30px;
        font-weight: bold;
        background-image: url("../../assets/images/holo/topDataBackG.png");
        background-size: 100% auto;
        background-repeat: no-repeat;
      }

      .title {
        height: calc(100% - 65px);
        font-size: 18px;
        white-space: nowrap;
      }
    }
  }
}
</style>
