<template>
  <modulen>
    <template #title>
      服务区{{ query.ptype == "1" ? "客车" : "货车" }}流量排行
      <span style="font-size: 12px">（ 辆 ）</span>
      <span class="title-samll" @click="orderby">{{ query.ptype == "1" ? "货车" : "客车" }}流量排行</span>
    </template>
    <template #end></template>
    <div v-if="list.length>0" class="serve-md-out" id="servemdout">
      <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">{{ index < 9 ? "0" + (index + 1) : index + 1 }}</div>
            <div class="cell-text2">{{ item.saname }}</div>
            <div class="cell-text3">{{ formatThousand(item.cnt) }}</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.decimvalue"
                ></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.decimvalue"
                ></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.decimvalue"
                ></progress-pool>
              </template>
              <template v-else>
                <progress-pool :percvalue="item.percvalue" :decimvalue="item.decimvalue"></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 { serviceareaVansum } from "@/api/expressway.js";
import vueSeamlessScroll from "@/components/vueSeamlessScroll/index.vue";
import moment from "moment";

export default {
  components: {
    progressPool,
    vueSeamlessScroll
  },
  data() {
    return {
      list: [],
      query: {
        level: "0",
        dimension: "",
        timemode: "month",
        timeflag: moment(new Date()).subtract(1, "month").format('yyyyMM'),
        ptype: "1" //1客车 2货车
      }
    };
  },
  computed: {
    getAppDate() {
      this.query.timeflag = moment(this.$store.state.appDate).format("yyyyMM")
      return moment(this.$store.state.appDate).format("yyyyMM");
    },
    selectRoad() {
      return this.$store.state.road.selectRoadId;
    }
  },
  watch: {
    getAppDate(newVal) {
      this.query.timeflag = newVal;
      this.getData();
    },
    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.getData()
  },
  methods: {
    formatThousand,
    async getData() {
      console.log("111服务区",this.query)
      const data = await serviceareaVansum(this.query);
      this.list = data.msgContent;
      this.list.forEach(ele => {
        ele.decimvalue = (ele.cnt / ele.total).toFixed(2);
        ele.percvalue = Math.round(ele.decimvalue * 100) + "%";
      });
    },
    orderby() {
      this.query.ptype = this.query.ptype == "1" ? "2" : "1";
      this.getData();
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~/styles/viewport-convert.scss";
.title-samll {
  color: #b4c7d8;
  display: inline-block;
  margin-left: 20px;
  font-size: 13px;
  cursor: pointer;
}
.serve-md-out {
  width: 100%;
  height: vh(300);
  overflow: auto;
}
.serve-md {
  width: 100%;
  padding-top: vh(12);
  .ranke-cell {
    margin-top: vh(8);
    padding: vh(8) vw(17);
    width: 100%;
    display: flex;
    align-items: center;
    background: rgba(35, 62, 92, 0.35);
    border: 1px solid rgba(84, 122, 164, 0.5);
    border-radius: 2px;
  }
  .cell-text1 {
    position: relative;
    top: vh(-3);
    width: 15%;
    font-size: vw(17);
    font-family: "DinNextRegular";
    font-style: italic;
    font-weight: bolder;
    text-shadow: none;
    background-image: -webkit-linear-gradient(#899cb9, #def2fe, #def2fe);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .cell-text2 {
    width: 35%;
    font-size: vw(13);
    color: #def2fe;
  }
  .cell-text3 {
    width: 25%;
    font-size: vw(16);
    color: #def2fe;
  }
  .cell-text4 {
    width: 35%;
  }
  .cell-text5 {
    width: 15%;
    font-size: vw(14);
    color: #def2fe;
    text-align: right;
  }
  .ranke-cell1 {
    .cell-text1 {
      background-image: -webkit-linear-gradient(#a07000, #ffce5a, #ffce5a);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .cell-text5 {
      color: #fdcc58;
    }
  }
  .ranke-cell2 {
    .cell-text1 {
      background-image: -webkit-linear-gradient(#007287, #26deff, #26deff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .cell-text5 {
      color: #22d4f3;
    }
  }
  .ranke-cell3 {
    .cell-text1 {
      background-image: -webkit-linear-gradient(#005eae, #1192ff, #1192ff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .cell-text5 {
      color: #1192ff;
    }
  }
}
</style>