<template>
  <modulen>
    <template #title>
      油品销售数据排行
      <span style="font-size: 12px">（ 万元 ）</span>
    </template>
    <template #end></template>
    <div v-if="list.length>0" class="serve-md-out">
      <vue-seamless-scroll :data="list" v-if="list.length">
        <div class="serve-md">
          <div
            class="ranke-cell"
            v-for="(item, index) in list"
            :key="index"
            :class="'ranke-cell' + (index + 1)"
          >
            <div class="cell-text1">
              <div class="cell-text1-bg">{{ index < 9 ? "0" + (index + 1) : index + 1 }}</div>
            </div>
            <div class="cell-text2">{{ item.areaName }}</div>
            <div class="cell-text3">{{ formatThousand(item.saleAmount) }}</div>
            <div class="cell-text4">
              <template v-if="index === 0">
                <progress-pool
                  boxbg="rgba(255, 206, 90, 0.05)"
                  bordercolor="rgba(255, 206, 90, 0.1)"
                  linebg="linear-gradient(90deg, #ff7e00, #ffb400)"
                  :percvalue="item.percvalue"
                  :decimvalue="item.saleAmountProportion"
                ></progress-pool>
              </template>
              <template v-else-if="index === 1">
                <progress-pool
                  boxbg="rgba(34, 212, 243, 0.05)"
                  bordercolor="rgba(38, 222, 255, 0.1)"
                  linebg="linear-gradient(90deg, #098BA2, #1FC9E8)"
                  :percvalue="item.percvalue"
                  :decimvalue="item.saleAmountProportion"
                ></progress-pool>
              </template>
              <template v-else-if="index === 2">
                <progress-pool
                  boxbg="rgba(34, 212, 243, 0.05)"
                  bordercolor="rgba(17, 146, 255, 0.1)"
                  linebg="linear-gradient(90deg, #046AC1, #1192FF)"
                  :percvalue="item.percvalue"
                  :decimvalue="item.saleAmountProportion"
                ></progress-pool>
              </template>
              <template v-else>
                <progress-pool :percvalue="item.percvalue" :decimvalue="item.saleAmountProportion"></progress-pool>
              </template>
            </div>
            <div class="cell-text5">{{ item.percvalue }}</div>
          </div>
        </div>
      </vue-seamless-scroll>
    </div>
    <Empty v-else />
  </modulen>
</template>

<script>
import progressPool from "@/components/progressPool.vue";
import { formatThousand } from "@/utils/util";
import { oilSaleRanking } from "@/api/expressway.js";
import vueSeamlessScroll from "@/components/vueSeamlessScroll/index.vue";
import moment from "moment";
export default {
  components: {
    progressPool,
    vueSeamlessScroll
  },
  data() {
    return {
      query: {
        level: 0,
        dimension: '',
        timeflag:''
      },
      list: []
    };
  },
  computed: {
    selectRoad() {
      return this.$store.state.road.selectRoadId;
    },
    getDate() {
    //   this.query.timeflag = moment(this.$store.state.appDate).subtract(1, "month").format("yyyyMM")
      this.query.timeflag = moment(this.$store.state.appDate).format("yyyyMM")
      return moment(this.$store.state.appDate).format('yyyyMM');
    },
  },
  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();
    },
    getDate(newVal) {
      console.log(101,newVal);
    //   this.query.timeflag=moment(newVal).subtract(1, "month").format('yyyyMM')
      this.query.timeflag=moment(newVal).format('yyyyMM')
      this.getData()
    },
  },
  mounted() {
    this.getData()
  },
  methods: {
    formatThousand,
    async getData() {
      console.log("109油品",this.query);
      const data = await oilSaleRanking(this.query);
      this.list = data.msgContent;
      this.list.forEach(item => {
        item.percvalue = (item.saleAmountProportion * 100).toFixed(2) + "%";
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "~/styles/viewport-convert.scss";
.serve-md-out {
  width: 100%;
  height: vh(250);
  overflow: auto;
}
.serve-md {
  width: 100%;
  padding-top: vh(12);
  .ranke-cell {
    margin-top: vh(8);
    padding: vh(5) vw(5);
    width: 100%;
    display: flex;
    align-items: center;
  }
  .cell-text1 {
    position: relative;
    width: 10%;
    font-size: vw(13);
    // font-family: "DinNextRegular";
    text-shadow: none;
  }
  .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-text2 {
    width: 40%;
    font-size: vw(13);
    color: #def2fe;
  }
  .cell-text3 {
    width: 25%;
    font-size: vw(16);
    color: #def2fe;
  }
  .cell-text4 {
    width: 30%;
  }
  .cell-text5 {
    width: 15%;
    font-size: vw(14);
    color: #def2fe;
    text-align: right;
  }
  .ranke-cell1 {
    .cell-text1-bg {
      background: url("@/assets/images/expressway/sort-icon1.png");
      background-size: 100% 100%;
      color: #ffce5a;
    }
    .cell-text5 {
      color: #fdcc58;
    }
  }
  .ranke-cell2 {
    .cell-text1-bg {
      background: url("@/assets/images/expressway/sort-icon2.png");
      background-size: 100% 100%;
      color: #26deff;
    }
    .cell-text5 {
      color: #22d4f3;
    }
  }
  .ranke-cell3 {
    .cell-text1-bg {
      background: url("@/assets/images/expressway/sort-icon3.png");
      background-size: 100% 100%;
      color: #1192ff;
    }
    .cell-text5 {
      color: #1192ff;
    }
  }
}
</style>