<template>
  <div class="layer-group">
    <div class="content fz12">
      <div class="c9">
        畅通率
        <span class="c4 fz18">{{ ctl }}%</span>
      </div>
      <div class="cflex">
        <div>
          <i class="el-icon-caret-right c9" />
          <span class="ft fz12" style="margin: 0 20px">畅通路里程/KM（双向）</span>
          <i class="el-icon-caret-left c9" />
        </div>
        <span class="amount fexo">{{ ctKm }}km</span>
      </div>
      <div class="c9">
        拥堵率
        <span class="c4 fz18">{{ ydl }}%</span>
        <!-- <div>
          <span>入口车流量 </span>
          <span class="fexo c4 fz18">16,102</span> 辆
        </div>
        <span>出口车流量 </span>
        <span class="fexo c4 fz18">14,494</span> 辆-->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ctKm: 0,
      ctl: 0,
      ydl: 0
    };
  },
  computed: {
    getTrafficMileage() {
      return this.$store.state.trafficMileage;
    }
  },
  watch: {
    getTrafficMileage: {
      handler(newVal, oval) {
        if (newVal && newVal.mileage) {
          let milist = {};
          const allmileage = newVal.mileage;
          const roads = this.$store.state.road.selectRoadId;

          if (roads && roads.length > 0) {
            //选择的省、管理中心、路段
            let newCurmil = {};
            for (let key in allmileage) {
              if (roads.length == 3 && allmileage[key].id == roads[2]) {
                newCurmil[key] = allmileage[key];
                //具体某条高速
              }
              if (roads.length == 2 && allmileage[key].level2 == roads[1]) {
                newCurmil[key] = allmileage[key];
                //具体某条高速
              }
              if (roads.length == 1 && allmileage[key].level1 == roads[0]) {
                newCurmil[key] = allmileage[key];
                //具体某条高速
              }
            }
            milist = newCurmil;
          } else {
            //全国
            milist = allmileage;
          }
          let lastmil = {
            m: 0,
            m0: 0,
            m1: 0,
            m2: 0,
            m3: 0,
            m4: 0
          };
          for (let key in milist) {
            if (milist[key].level2) {
              //有level2就是具体高速
              lastmil.m0 += milist[key].m0;
              lastmil.m1 += milist[key].m1;
              lastmil.m2 += milist[key].m2;
              lastmil.m3 += milist[key].m3;
              lastmil.m4 += milist[key].m4;
              lastmil.m =
                lastmil.m +
                milist[key].m0 +
                milist[key].m1 +
                milist[key].m2 +
                milist[key].m3 +
                milist[key].m4;
            }
          }
          let allyd = lastmil.m0 + lastmil.m2 + lastmil.m3 + lastmil.m4; //所有拥堵里程
          lastmil.m1 = lastmil.m - allyd; // 畅通里程 = 总里程 - 所有拥堵里程
          this.ctKm = lastmil.m1.toFixed(2); //畅通里程
          this.ydl = ((allyd / lastmil.m) * 100).toFixed(2); //拥堵率
          this.ctl = ((lastmil.m1 / lastmil.m) * 100).toFixed(2); //畅通率
        }
      },
      deep: true,
      immediate: true
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~/styles/viewport-convert.scss";
.layer-group {
  width: 965px;
  height: 140px;
  background: url("@/assets/images/operationOverview_top_bg.png") no-repeat;
  background-size: 100%, 100%;
  padding: 0 200px;
  margin-top: 20px;
}
.content {
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cflex {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.amount {
  color: #fff;
  font-size: 36px;
}
.fexo {
  // font-family: "Exo2";
}
.fz12 {
  font-size: 12px;
}
.c9 {
  color: #94a8c6;
}
.c4 {
  color: #499aff;
}
.fz18 {
  font-size: 18px;
}
.ft {
  font-family: "TRENDS";
}
</style>