<template>
  <modulen>
    <template #title>当日通行费/量排行</template>
    <div class="dayToll-md">
      <div class="daytoll-head">
        <div class="cell-a"><span class="top" @click="top">顶部</span></div>
        <div class="cell-b">门架/路段</div>
        <div class="cell-c">&nbsp;&nbsp;金额（元）</div>
        <div class="cell-d">&nbsp;&nbsp;&nbsp;数量（辆）</div>
      </div>
      <div class="listout" id="listout" ref="mian">
        <vue-seamless-scroll :data="List">
          <div class="cell-list" v-for="(item, index) in List" :key="index">
            <div class="cell-a">{{ index + 1 }}</div>
            <!-- 数据Length过长字体调小，添加title鼠标移入显示文本全部内容 -->
            <template v-if="item.gantryName.length > 10">
              <div class="cell-b" :title='item.gantryName'
                style="font-size:12px;padding: 0; overflow: hidden;text-overflow: ellipsis; white-space: nowrap;">
                {{ item.gantryName }}
              </div>
            </template>
            <template v-else>
              <div class="cell-b" :title='item.gantryName'>{{ item.gantryName }}</div>
            </template>
            <div class="cell-c">{{ formatThousand(Math.trunc(item.oldFeeSum)) }}</div>
            <div class="cell-d">{{ formatThousand(Math.trunc(item.oldFlowCount)) }}</div>
          </div>
        </vue-seamless-scroll>

      </div>
    </div>
  </modulen>
</template>

<script >
import { formatThousand } from '@/utils/util'
import { GettodayGateFlowfee } from '@/api/chargeInfo.js'
import vueSeamlessScroll from './slideList.vue'
export default {
  components: {
    vueSeamlessScroll
  },
  data() {
    return {
      dataList: [],
      List:[],
      timer: null,
      numLength: null,
      Toll_interval:null,
      query: {
        // startDate: moment(new Date()).format('yyyyMMDD') - 1,
        // endDate: moment(new Date()).format('yyyyMMDD'),
        level: '0',
        dimension: ''
      },
    }
  },
  computed: {
    selectRoad() {
      return this.$store.state.road.selectRoadId
    },
  },
  watch: {
    selectRoad(newVal) {
      const level = this.$store.state.road.selectLevel
      const roadId = newVal ? newVal[level - 1] : ''
      this.query.level = level
      this.query.dimension = roadId
      this.getData()
    }
  },
  mounted() {
    this.Toll_interval= setInterval(() => {
            this.getData();
        }, 1000 * 30);
    window.addEventListener("scroll", this.handleScrolls, true);
  },
  beforeUnmount() {
    if (this.Toll_interval) {
            clearInterval(this.Toll_interval);
        }
    clearInterval(this.timer)
    window.addEventListener("scroll", this.handleScrolls, false);
  },

  methods: {
    formatThousand,
    async getData() {
      const data = await GettodayGateFlowfee(this.query)
      this.dataList = data.msgContent
      this.numLength = (this.dataList.length * 32)
       this.List = this.dataList.map((item,index)=>{
         item.oldFeeSum =Math.trunc(item.oldFeeSum+(item.feeSum - item.oldFeeSum))
         item.oldFlowCount =Math.trunc (item.oldFlowCount+(item.flowCount - item.oldFlowCount))
         return item
      })
    },
    // 滚动条
    handleScrolls(e) {
      let scrollTops = document.getElementById('listout').scrollTop;
      if (scrollTops >= this.numLength) {
        // 回到顶部
        document.getElementById('listout').scrollTops = 2
        // 回到顶部，数据重新渲染
        this.List =[]
        this.getData()
      }
    },
    top() {
      document.getElementById('listout').scrollTops = 0
      console.log(112, document.getElementById('listout').scrollTops);
      this.List =[]
      this.getData()
    }
  },
}
</script>

<style lang="scss" scoped>
@import "~/styles/viewport-convert.scss";

.top {
  display: inline-block;
  border-radius: 5px;
  height: 25px;
  width: 40px;
  line-height: 25px;
  color: #3d74ff;
  cursor: pointer;
}

.dayToll-md {
  width: 100%;
  height: 100%;

  .daytoll-head {
    width: 100%;
    display: flex;
    color: #9aa7bf;

  }

  .listout {
    width: 100%;
    height: vh(273);
    overflow: auto;

  }

  .cell-list {
    width: 100%;
    display: flex;

    .cell-a {
      font-family: "Exo2";
      color: #9aa7bf;
      font-weight: bold;
    }

    .cell-b {
      color: #9aa7bf;
    }
  }

  .cell-list:nth-child(even) {
    background: rgba(73, 153, 255, 0.1);
    border: 1px solid rgba(73, 153, 255, 0.2);
  }

  .cell-a,
  .cell-b,
  .cell-c,
  .cell-d {
    height: vh(39);
    line-height: vh(39);
    padding: 0 12px;
  }

  .cell-a {
    width: 60px;
    text-align: right;

  }

  .cell-b {
    width: calc(50% - 30px);
    text-align: center;

  }

  .cell-c {
    width: calc(50% - 120px);
    font-family: "DinNextRegular";
    text-align: center;
    white-space: nowrap;
    overflow: hidden;


  }

  .cell-d {
    width: 120px;
    padding: 0 12px;
    font-family: "DinNextRegular";
    text-align: center;
  }

}
</style>