<template>
  <msg-card class="item item-targetTrack" title="目标轨迹">
    <div class="targetTrack">
      <div class="targetTrackInner">
        <div
          class="trackItem"
          v-for="(item, index) of targetTracks"
          :key="index"
        >
          <div class="leftType">
            <span class="circle4"></span>{{ item.eventLabel }}
          </div>
          <div class="rightValue">
            {{ item.eventNumber }}
            <!-- {{ nameUnitMap[item.eventType] }} -->
          </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 {
      targetTracks: [],
      nameUnitMap: {
        11: "人",
        16: "辆",
        24: "辆",
        10: "辆",
        606: "辆",
      },
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    async initData() {
      let req = await fetch("DATA.json");
      let allData = await req.json();
      let api = allData.intersectionGroups.apis.targetTrack.url;
      getData(api).then(res=>{
        this.targetTracks = res.content;
      })
    },
  },
};
</script>

<style lang="less" scoped>
.item-targetTrack {
  font-size: 14px;
  background-color: #030913;
  padding: 8px;
  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: 30px;
        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>
