<template>
  <div class="roadContanier">
    <div class="btn" v-if="infoData.visibility">
      <el-switch v-model="roadVisible" :active-text="tipText" @change="change"></el-switch>
    </div>
    <div class="detail" v-if="roadVisible">
      <div class="detail-item" v-for="(item, index) in roadList" :key="index">
        <div class="name">
          <div class="icon" :style="{ background: item.color }"></div>
          <span>{{ item.name }}</span>
        </div>
        <span class="val">{{ item.value }}km</span>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
  data () {
    return {
      roadVisible: false,
      roadList: [
        { name: "畅通", value: "0km", color: "#3fff00" },
        { name: "缓慢", value: "0km", color: "#fff700" },
        { name: "拥堵", value: "0km", color: "#ffa500" },
        { name: "严重拥堵", value: "0km", color: "#ff0000" },
        { name: "交通管制", value: "0km", color: "#710505" }
      ],
      tipText: "显示当前路况(双向)",
      infoData: {},
      selectRoadId: []
    };
  },
  computed: {
    ...mapState({
      map: state => state.map.map,
      getTrafficMileage: state => state.trafficMileage
    })
    // getTrafficMileage() {
    //   return this.$store.state.trafficMileage
    // }
  },
  watch: {
    getTrafficMileage: {
      handler (newVal, oval) {
        this.infoData = newVal;
        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;
              lastmil.m = lastmil.m + milist[key].m
            }
          }
          let allyd = lastmil.m0 + lastmil.m2 + lastmil.m3 + lastmil.m4; //所有拥堵里程
          lastmil.m1 = lastmil.m - allyd; // 畅通里程 = 总里程 - 所有拥堵里程
          this.roadList[0].value = lastmil.m1.toFixed(2);
          this.roadList[1].value = lastmil.m2.toFixed(2);
          this.roadList[2].value = lastmil.m3.toFixed(2);
          this.roadList[3].value = lastmil.m0.toFixed(2);
          this.roadList[4].value = lastmil.m4.toFixed(2);

          if (this.$route.name == "operationOverview") {
            this.roadVisible = true;
          }
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    change (val) {
      //找出所有路段图层
      const _that = this;
      const layers = this.map.getAllLayers();
      let trafficlayer = [];
      for (let key in layers) {
        if (key.indexOf("trafficlayer") > -1) {
          trafficlayer.push(key);
        }
      }
      if (val) {
        this.infoData.visibility = "visible";
        trafficlayer.forEach(ele => {
          _that.map.setLayoutProperty(ele, "visibility", "visible");
        });
        this.tipText = "隐藏当前路况(双向)";
      } else {
        this.infoData.visibility = "none";
        trafficlayer.forEach(ele => {
          _that.map.setLayoutProperty(ele, "visibility", "none");
        });
        this.tipText = "显示当前路况(双向)";
      }
      this.$store.commit("changeTrafficMileage", this.infoData);
    },
    getRoadId (data) {
      this.selectRoadId = data;
    }
  }
};
</script>
<style lang="postcss" scoped>
.roadContanier {
  width: 180px;
}
.detail {
  margin-top: 10px;
}
.detail-item {
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.name {
  display: flex;
  align-items: center;
}
.icon {
  width: 5px;
  height: 5px;
  margin-right: 10px;
}
::v-deep(.el-switch__label) {
  color: #fff;
}
::v-deep(.el-switch__core) {
  background: #5c6476;
  border-color: #868b97;
}
::v-deep(.el-switch__core .el-switch__action) {
  background-color: #bdc2cb;
}
</style>