<template>
  <msg-card class="item item-signal" title="交通信号">
    <div class="targetTrack">
      <div class="targetTrackInner">
        <div
          class="trackItem"
          v-for="(item, index) of signalArray"
          :key="index"
        >
          <div class="leftType" :title="item.label">
            <span class="circle4"></span
            ><span class="typeText">{{ item.label }}</span>
          </div>
          <div class="rightValue">{{ item.value }}{{ item.unit }}</div>
        </div>
      </div>
    </div>
  </msg-card>
</template>

<script>
import msgCard from "../../../components/Standard/msg-card.vue";
import { getData } from "../../../dao/requestByUrl.js";
export default {
  components: { msgCard },
  data() {
    return {
      signalArray: [],
      signalUnitMap: {
        avgDelay: "s",
        oncePassRate: "%",
        redNoClearRate: "%",
        noStopRate: "%",
        pedestrianAvgPassTime: "s",
        greenEmptyRate: "%",
        greenUseRate: "%",
        capacity: "pcu/h",
      },
      signalLabelMap: {
        avgDelay: "路口平均延误",
        oncePassRate: "路口一次通过率",
        redNoClearRate: "红灯间隔未清空率",
        noStopRate: "路口不停车通过率",
        pedestrianAvgPassTime: "行人平均通过时长",
        greenEmptyRate: "绿灯空放率",
        greenUseRate: "绿灯利用率",
        capacity: "路口通行能力",
      },
      signalArr: [
        "avgDelay",
        "oncePassRate",
        "redNoClearRate",
        "noStopRate",
        "pedestrianAvgPassTime",
        "greenEmptyRate",
        "greenUseRate",
        "capacity",
      ],
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    async initData() {
      let req = await fetch("DATA.json");
      let allData = await req.json();
      let api = allData.intersectionGroups.apis.trafficSignal.url;
      let data = allData.intersectionGroups.apis.trafficSignal.data
      getData(api,{},data).then((res) => {
        for (let key in res.content) {
          if (this.signalArr.includes(key)) {
            let unit = this.signalUnitMap[key];
            let value = res.content[key];
            if (unit === "%") {
              value = (res.content[key] * 100).toFixed(2);
            }
            this.signalArray.push({
              label: this.signalLabelMap[key],
              value: value,
              unit: unit,
            });
          }
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
.item-signal {
  height: 100%;
  padding: 8px;
  font-size: 14px;
  color: rgba(155, 177, 212, 1);

  .targetTrack {
    height: 100%;
    overflow: hidden;
    border: 1px solid #0f2745;
    padding: 18px;
    background-color: #010613;
    display: flex;
    flex-direction: column;

    .targetTrackInner {
      height: 100%;
      overflow-y: auto;

      .trackItem {
        margin-bottom: 12px;
        height: 34px;
        width: 100%;
        background-color: #000e27;
        display: flex;
        align-items: center;
        padding: 0 12px;
        justify-content: space-between;

        .leftType {
          display: flex;
          align-items: center;

          .circle4 {
            display: inline-block;
            width: 10px;
            height: 10px;
            text-align: center;
            margin: 0 18px 0 8px;
            background-image: url("../../../assets/images/holo/textMarker.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
          }
        }

        .rightValue {
          color: rgba(0, 159, 238, 1);
        }
      }
    }
  }
}
</style>
