<template>
  <div class="cross-kipData">
    <div class="kip-box">
      <div class="kip-item">
        <div class="kip-title k-cell">
          路口名称
        </div>
        <div class="kip-title k-cell">
          协调相位不停车通过率
        </div>
        <div class="kip-title k-cell">
          非协调相位二次排队
        </div>
        <div class="kip-title k-cell">路段行程时间</div>
      </div>
      <div v-for="item in crossKipData" :key="item.id" class="kip-item">
        <div class="k-cell">{{ item.crossName }}</div>
        <div class="k-cell">
          <div class="index-box">{{ item.noparkPassRate }}%</div>
        </div>
        <div class="k-cell">
          <div class="index-box">{{ item.uncoordinatePhaseQueue }}m</div>
        </div>
        <div class="k-cell">
          <div class="index-box">{{ item.trvalTime }}s</div>
        </div>
      </div>
    </div>
    <timeline @time-selected="timeSelected" :selected="true"></timeline>
  </div>
</template>

<script>
import {greenwaveCrossMetrics} from "@/common/api/signalOp.js";

export default {
  data() {
    return {
      crossKipData: [
        {
          name: "相城大道与朱径支路",
          race: "91",
          queue: "25",
          time: "12",
        },
        {name: "相城大道与南天成路", race: "91", queue: "25", time: "12"},
        {
          name: "相城大道与朱径支路",
          race: "91",
          queue: "25",
          time: "12",
        },
        {
          name: "相城大道与朱径支路",
          race: "91",
          queue: "25",
          time: "12",
        },
      ],
    };
  },
  props: ["greenwaveId"],
  components: {
    timeline: (resolve) => require(["./timeline.vue"], resolve),
  },
  mounted() {
    console.log(this.greenwaveId);
  },
  methods: {
    timeSelected(time) {
      greenwaveCrossMetrics({
        greenwaveId: this.greenwaveId,
        timeStamp: time,
      }).then((res) => {
        if (res && res.data) {
          this.crossKipData = res.data.content;
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.cross-kipData {
  height: 225px;

  .kip-box {
    display: flex;

    .kip-item {
      height: 180px;
      //padding: 0 26px;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      align-items: center;
      flex-grow: 1;
      //border-left: 1px dashed #d1d1d1;
      p {
        margin-bottom: 0;
      }

      &:nth-last-child(1) {
        //border-right: 1px dashed #d1d1d1;
      }

      div:nth-child(odd) {
        background-color: #133260;
      }
      div:nth-child(even) {
        background-color: #112b4e;
      }

      .k-cell {
        height: 32px;
        width: calc(100% - 5px);
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .index-box {
        //margin-top: 20px;
        width: 45px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        color: #01bbd6;
        background: #0c416a;
        border: 1px solid #0a588a;
      }
    }

    .kip-item:first-child {
      width: 180px;
      flex-grow: 0;

      .k-cell {
        width: 170px;
      }
    }
  }

  .time-line {
    margin-left: 130px;
    width: calc(92% - 120px);
    //position: absolute;
    //bottom: 20px;
  }
}
</style>
