<template>
  <div class="full-w-h" style="display: flex; flex-direction: column">
    <div class="custom-tab-header">
      <div
          @click="clickTab(item)"
          class="c-tab-item"
          :class="`${activeTab === Object.keys(item)[0] ? 'active' : ''}`"
          v-for="item of tabs"
      >
        {{ item[Object.keys(item)[0]] }}
      </div>
    </div>
    <div class="custom-tab-content">
      <div class="tab-item" v-if="activeTab === '0'">
        <RealTimeData ref="tab0" :crossData="crossData"/>
      </div>
      <div class="tab-item" v-if="activeTab === '1'">
        <cycle-data ref="tab1" :crossData="crossData"/>
      </div>
      <div class="tab-item" v-if="activeTab === '2'">
        <snapshot-data ref="tab2" :crossData="crossData"/>
      </div>
      <div class="tab-item" v-if="activeTab === '3'">
        <event-data ref="tab3" :crossData="crossData"/>
      </div>
    </div>
  </div>
</template>

<script>
import {getLanePeriodTurnData, getLaneTrafficIndex} from "@/dao/optApi";
import {noDataTitle} from "@/utils/chartStyle";
import {getFontSize} from "@/config/holo/fontSize";
import RealTimeData from "@/views/dataQueries/rightForm/RealTimeData.vue";
import CycleData from "@/views/dataQueries/rightForm/cycleData.vue";
import SnapshotData from "@/views/dataQueries/rightForm/snapshotData.vue";
import EventData from "@/views/dataQueries/rightForm/eventData.vue";

export default {
  name: "rightForm",
  components: {RealTimeData, EventData, SnapshotData, CycleData},
  props: ["crossData"],
  data() {
    return {
      activeTab: "0",
      tabs: [{0: "实时数据"}, {1: "周期数据"}, {2: "快照数据"},
        // { 3: "事件数据" }
      ],
    };
  },
  computed: {},
  mounted() {
  },
  methods: {
    clickTab(item) {
      // if(Object.keys(item)[0]==='3') return
      this.activeTab = Object.keys(item)[0];
    },
    getData() {
      let queue = [];
      let needDicts = ["Direction"];
      for (let item of needDicts) {
        queue.push(
            this.$store.dispatch("QUERY_DICT", {
              type: item,
            })
        );
      }
      Promise.all(queue).then(() => {
        this.$refs[`tab${this.activeTab}`].getData();
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../../assets/less/elementTable.less");

::v-deep .el-input__inner,
::v-deep .el-range-input {
  color: white;
  background-color: transparent;
}

.custom-tab-header {
  height: 45px;
  display: flex;
  width: 100%;
  background: linear-gradient(90deg, #043a70 0%, rgba(4, 59, 113, 0.2) 100%);

  .c-tab-item {
    width: 140px;
    cursor: pointer;
    margin-right: 6px;
    background-color: #0b549a;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
  }

  .active {
    background-color: #1f93ff;
  }
}

.custom-tab-content {
  height: calc(100% - 45px);

  .tab-item {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
  }
}
</style>
