<template>
  <modulen>
    <template #title>单公里收入情况</template>
    <div class="dayToll-md">
      <div class="daytoll-head">
        <div class="cell-a"></div>
        <div class="cell-b">路段</div>
        <div class="cell-c">&nbsp;&nbsp;里程</div>
        <div class="cell-d">&nbsp;&nbsp;&nbsp;单公里收入</div>
        <div class="cell-e">&nbsp;&nbsp;&nbsp;同比</div>
      </div>
      <div class="listout"  id="incomeListouts" v-if="dataList.length>=7" :style="{overflow:auto}">
          <vue-seamless-scroll :data="dataList" >
          <div class="cell-list" v-for="(item,index) in dataList" :key="index" :class="'cell-list'+(index+1)">
            <div class="cell-a " >  
               <div class="cell-text1-bg">
            {{ index + 1 }}
           </div></div>
            <div class="cell-b ">{{item.orgName}}</div>
            <div class="cell-c ">{{(item.kilometersCount - 0).toFixed(2)}}Km</div>
            <div class="cell-d">{{(item.kilometersIncomeCount - 0).toFixed(2) }}万元</div>
             <div class="cell-e" :style="item.ratio.slice(0,1)=='-'?'color:#00e278':  'color: red ' ">
               {{item.ratio}}
             <i class="aaa"><img :src="item.ratio.slice(0,1)=='-'? url2:url1" alt=""></i>
            </div>
          </div>
          </vue-seamless-scroll>
      </div>
      <div class="listout" v-else>
          <div class="cell-list" v-for="(item,index) in dataList" :key="index" :class="'cell-list'+(index+1)">
            <div class="cell-a " >  
               <div class="cell-text1-bg">
            {{ index + 1 }}
           </div></div>
            <div class="cell-b ">{{item.orgName}}</div>
            <div class="cell-c ">{{ (item.kilometersCount - 0).toFixed(2) }}Km</div>
            <div class="cell-d">{{(item.kilometersIncomeCount - 0 ).toFixed(2)}}万元</div>
             <div class="cell-e" :style="item.ratio.slice(0,1)=='-'?'color:#00e278':  'color: red ' ">
              {{item.ratio}}
             <i class="aaa"><img :src="item.ratio.slice(0,1)=='-'? url2:url1" alt=""></i>
            </div>
          </div>
      </div>
    </div>
  </modulen>
</template>

<script>
import { formatThousand } from '@/utils/util'
import { GetKilometerIncome } from '@/api/manageGeneral.js'
import vueSeamlessScroll from '@/components/vueSeamlessScroll/index.vue'
import top from  "@/assets/images/manageGS/top.png"
import bottom from  "@/assets/images/manageGS/bottom.png"
import moment from 'moment'
export default {
  components: {
    vueSeamlessScroll
  },
  data() {
    return {
      dataList: [],
      query: {
        timemode:"year",
        timeflag:moment(new Date()).format('yyyy'),
        level: '0',
        dimension: ''
      },
      url1:top,
      url2:bottom,
    }
  },
  computed: {
       getDate() {
        this.query.timeflag =moment(this.$store.state.appDate).format("yyyy")
        return moment(this.$store.state.appDate).format("yyyyMM");
    },
    selectRoad() {
      return this.$store.state.road.selectRoadId
    },
    yearMoth(){
      return this.$store.state.yearMoth
    }
   
  },
  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()
    },
    yearMoth(val){
      if(val == 1){
         this.query.timemode="year",
         this.query.timeflag=moment(this.$store.state.appDate).format('yyyy')
         this.getData()
       }else{
         this.query.timemode="month",
         this.query.timeflag=moment(this.$store.state.appDate).format('yyyyMM') 
         this.getData()
       }
    },
    getDate(newVal){
    if(this.$store.state.yearMoth == 1) {
      this.query.timeflag = moment(newVal).format('yyyy')
      this.getData()
    }else{
      this.query.timeflag=moment(newVal).format('yyyyMM') 
      this.getData()
    }
  
    },
  },
  mounted() {
    this.getData()
    
  },
  methods: {
    formatThousand,
    async getData() {
      const res = await GetKilometerIncome(this.query)
      this.dataList = res.msgContent
    },
  },
}
</script>

<style lang="scss" scoped>
@import "~/styles/viewport-convert.scss";
.dayToll-md {
  width: 100%;
  height: 100%;
  .daytoll-head {
    width: 100%;
    display: flex;
    color: #9aa7bf;
  }
  .listout {
    width: 100%;
    height: vh(310);
      overflow:auto
  }
  .cell-list {
    width: 100%;
    display: flex;
    margin-bottom: 10px;
     background: rgba(73, 153, 255, 0.1);
    border: 1px solid rgba(73, 153, 255, 0.2);
    .cell-a {
     font-family: "DIN-Medium";
     color: #9aa7bf;
     font-weight: 400;
    
    }
    .cell-b {
      color: #9aa7bf;
    }
    .cell-A{
      background-image: url("@/assets/images/expressway/sort-icon1.png");
        background-size: cover;
    }
  }

  .cell-a,
  .cell-b,
  .cell-c,
  .cell-d,
  .cell-e {
    height: vh(39);
    line-height: vh(39);
    font-size: 14px;
  }
.aaa{
position: absolute;
margin-top: 10px;
margin-left: 10px;
}
  .cell-a {
    width: vw(35);
    text-align: center;
    // width: 16px;

  }
  .cell-b {
    width:vw(95) ;
    text-align: center;
  }
  .cell-c {
    width:vw(95) ;
    font-family: "DinNextRegular";
    text-align: center;    
  }
  .cell-d {
    width: vw(95) ;
    font-family: "DinNextRegular";
    text-align: center;
  }
  .cell-e {
    width: vw(100) ;
    font-family: "DinNextRegular";
    text-align: center;
  }
}
.cell-text1-bg {
    width: vw(28);
    height: vw(28);
    text-align: center;
    line-height: vw(28);
    background: url("@/assets/images/expressway/sort-icon4.png");
    background-size: 100% 100%;
  }
  .cell-list1{
    .cell-text1-bg {
      background: url("@/assets/images/expressway/sort-icon1.png");
      background-size: 100% 100%;
      color: #ffce5a;
    }
  }
  .cell-list2{
    .cell-text1-bg {
      background: url("@/assets/images/expressway/sort-icon2.png");
      background-size: 100% 100%;
      color: #26deff;
    }
  }
  .cell-list3 {
    .cell-text1-bg {
      background: url("@/assets/images/expressway/sort-icon3.png");
      background-size: 100% 100%;
      color: #1192ff;
    }
  }
</style>