<template>
  <modulen>
    <template #title>入服务区车流量占比</template>
    <template #end></template>
    <div class="car-flow-ex">
      <div class="car-flow-cell">
        <div>
          [
          <span class="c-f-text1">{{ formatThousand(totalrq) }}</span> 辆 ]
        </div>
        <div>
          [
          <span class="c-f-text1">{{ formatThousand(total) }}</span> 辆 ]
        </div>
      </div>
      <div class="c-f-lineout">
        <div class="c-f-line-left" :style="{ width: bl + '%' }"></div>
        <div class="c-f-line-right" :style="{ width: sy + '%' }"></div>
      </div>
      <div class="car-flow-cell">
        <div>
          入区车流量
          <span class="c-f-text2">{{ bl }}%</span>
        </div>
        <div>总车流量</div>
      </div>
      <div class="car-flow-cell">
        <div class="fgx-left"></div>
        <div class="fgx-right"></div>
      </div>
    </div>
  </modulen>
</template>

<script>
import { formatThousand } from "@/utils/util";
import { serviceareaFlow } from "@/api/expressway.js";
import moment from "moment";
export default {
  data() {
    return {
      query: {
        level: "0",
        dimension: "",
        timemode: "month",
        timeflag: moment(new Date()).format("yyyyMM")
      },
      total: 0,
      totalrq: 0,
      bl: 0,
      sy: 0
    };
  },
  computed: {
    getAppDate() {
      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() {},
  methods: {
    formatThousand,
    async getData() {
      const data = await serviceareaFlow(this.query);
      this.total = data.msgContent[0]?.totalAll;
      this.totalrq = data.msgContent[0]?.totalVan;
      if (this.total > 0) {
        this.bl = ((this.totalrq / this.total) * 100).toFixed(2);
        this.sy = (((this.total - this.totalrq) / this.total) * 100).toFixed(2);
      } else {
        this.bl = 0;
        this.sy = 100;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~/styles/viewport-convert.scss";
.car-flow-ex {
  width: 90%;
  margin: auto;
  margin-top: vh(15);
  .car-flow-cell {
    margin-top: vh(10);
    width: 100%;
    display: flex;
    justify-content: space-between;
    color: #def2fe;
    font-size: vw(12);
  }
  .c-f-text1 {
    font-size: vw(22);
    font-family: "DinNextRegular";
  }
  .c-f-text2 {
    font-size: vw(18);
    font-family: "DinNextRegular";
  }
  .c-f-lineout {
    display: flex;
    width: 100%;
    height: vh(16);
    margin-top: vh(15);
  }
  .c-f-line-left {
    width: 70%;
    height: 100%;
    background: linear-gradient(90deg, #4ca0ff, #a3f8ff);
  }
  .c-f-line-right {
    width: 30%;
    height: 100%;
    background: linear-gradient(90deg, #8699af, #becfd0);
  }
  .fgx-left {
    width: vw(50);
    height: vh(1);
    background: linear-gradient(90deg, #4ca0ff, #a3f8ff);
  }
  .fgx-right {
    width: vw(50);
    height: vh(1);
    background: linear-gradient(90deg, #8699af, #becfd0);
  }
}
</style>