<template>
  <div class="layer-group">
    <modulen>
      <template #title>路况信息</template>

      <div class="w-full pb-2 pt-2" id="electro-lists" style="height: 260px; overflow: auto">
        <vue-seamless-scroll :data="list" v-if="list && list.length" :limitMoveNum="3">
          <div class="electro-list" v-for="(item, index) in list" :key="`electro_${index}`">
            <div class="electro-top">
              <div class="electro-title">
                <span class="num">
                  {{
                  `${String(index + 1).padStart(2, "0")}`
                  }}
                </span>
                <span class="electro-title-content">{{ item.name }}</span>
              </div>
              <span class="right-action">畅通率：{{ item.ctl }}%</span>
            </div>
            <div class="electro-content">
              <div class="electro-content_default">
                {{
                `畅通:${item.m1}km；缓慢:${item.m2}km；拥堵:${item.m3}km；严重拥堵:${item.m0}km；交通管制:${item.m4}km`
                }}
              </div>
              <div class="electro-content_info">
                <span class="time">{{ item.date }}</span>
                <!-- <span class="time name">{{ item.pushuser }}</span> -->
              </div>
            </div>
          </div>
        </vue-seamless-scroll>
        <empty v-else />
      </div>
    </modulen>
  </div>
</template>

<script>
import vueSeamlessScroll from "@/components/vueSeamlessScroll/index.vue";
import { formatYearMonth } from "@/utils/util";
import { mapState } from "vuex";
export default {
  components: {
    vueSeamlessScroll
  },
  data() {
    return {
      list: {},
      newList: {},
      live_interval: null
    };
  },
  computed: {
    ...mapState({
      getTrafficMileage: state => state.trafficMileage
    })
  },
  watch: {
    getTrafficMileage: {
      handler(newVal, oval) {
        let list = [];
        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 list = [];
          for (let key in milist) {
            if (milist[key].level2) {
              let allyd =
                milist[key].m0 +
                milist[key].m2 +
                milist[key].m3 +
                milist[key].m4; //所有拥堵里程
              milist[key].m1 = milist[key].m - allyd; // 畅通里程 = 总里程 - 所有拥堵里程
              let ctl = ((milist[key].m1 / milist[key].m) * 100).toFixed(2); //畅通率
              list.push({
                name: key,
                ctl: ctl,
                m: milist[key].m,
                m0: milist[key].m0.toFixed(3),
                m1: milist[key].m1.toFixed(3),
                m2: milist[key].m2.toFixed(3),
                m3: milist[key].m3.toFixed(3),
                m4: milist[key].m4.toFixed(3)
              });
            }
          }
          this.list = list;
          this.newList = list;
        }
      },
      deep: true,
      immediate: true
    }
  },

  mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
  },

  beforeUnmount() {
    window.addEventListener("scroll", this.handleScroll, false);
    if (this.live_interval) {
      clearInterval(this.live_interval);
    }
  },
  methods: {
    // 滚动条
    handleScroll(e) {
      let scrollTops = document.getElementById("electro-lists").scrollTop;
      console.log(137, document.getElementById("electro-lists").scrollTop);
      if (scrollTops >= 750) {
        // 回到顶部
        // 回到顶部，数据重新渲染
        this.live_interval = setTimeout(() => {
          this.list = [];
        }, 1000);
        this.live_interval = setTimeout(() => {
          document.getElementById("electro-lists").scrollTop = 0;
          this.list = this.newList;
        }, 1000);
      }
    }
  }
};
</script>

<style lang="postcss" scoped>
.layer-group {
  width: 100%;
  height: 300px;
}
.electro-list {
  margin-bottom: 5px;
}
.electro-top {
  height: 28px;
  width: 100%;
  padding-left: 8px;
  padding-right: 6px;
  border: 2px solid transparent;
  border-image: url(@/assets/images/newLayerContrl/driver.png) 0 0 100% 0
    stretch;
  @apply flex items-center justify-between;
}
.electro-title {
  width: 150px;
  height: 100%;
  background: url(@/assets/images/newLayerContrl/little.png) no-repeat;
  background-size: 100% 100%;
  /* @apply flex items-center justify-center; */
  font-size: 13px;
  line-height: 24px;
  white-space: nowrap;
}
.num {
  display: inline-block;
  margin-right: 10px;
  color: #b1dfff;
  /* transform: scale(0.7); */
}
.electro-title-content {
  transform: scale(0.83);
}
.right-action {
  color: #ffce5a;
  font-size: 12px;
  transform: scale(0.9);
}
.right-action-orange {
  color: #fe801b;
  font-size: 12px;
  transform: scale(0.9);
}
.right-action-green {
  color: green;
  font-size: 12px;
  transform: scale(0.9);
}
.electro-content {
  padding: 8px;
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.1),
    rgba(61, 165, 255, 0.2),
    rgba(0, 0, 0, 0.1)
  );
  cursor: pointer;
}
.electro-content_default {
  color: #def2fe;
  font-size: 12px;
}
.electro-content_info {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* margin-top: 10px; */
}
.time {
  transform: scale(0.83);
  color: #94a8c6;
  margin-left: -10px;
}
.name {
  margin-left: 20px;
}
.blue {
  color: #3da5ff;
}
.pb-2 {
  padding: 0 !important;
}
::v-deep(.module-content) {
  z-index: 0 !important;
}
</style>
