<template>
  <div class="center-reven-model">
    <div>
      <div class="reve-text1">本月超市</div>
      <div class="reve-text2">
        <span>{{ formatThousand(infoData.bycs) }}</span>
        <span class="reve-text2-unit">万元</span>
      </div>
      <div class="reve-text3">
        <span class="eve-text3-l">昨日</span>
        <span class="eve-text3-r">
          {{
          formatThousand(infoData.zrcs) || "-"
          }}
        </span>
      </div>
    </div>
    <div class="center-text">
      <div class="center-text-unit1">总营收额</div>
      <span>{{ formatThousand(infoData.ze) }} <span class="center-text-unit">万元</span></span>
     
    </div>
    <div>
      <div class="reve-text1">本月餐饮</div>
      <div class="reve-text2">
        <span>{{ formatThousand(infoData.bycy) }}</span>
        <span class="reve-text2-unit">万元</span>
      </div>
      <div class="reve-text3">
        <span class="eve-text3-l">昨日</span>
        <span class="eve-text3-r">
          {{
          formatThousand(infoData.zrcy) || "-"
          }}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import { formatThousand } from "@/utils/util";
import { serviceareaCyCssum, serviceareaSaleMonth } from "@/api/expressway.js";
import moment from "moment";
export default {
  data() {
    return {
      query: {
        level: "0",
        dimension: "",
        timemode: "month",
        timeflag: moment(new Date()).format("yyyyMM")
        // storeclass: ''
      },
      infoData: {
        bycs: "", // 本月超市、
        zrcs: "", // 昨日超市
        bycy: "", // 本月餐饮
        zrcy: "", // 昨日餐饮
        ze: "" // 总额
      }
    };
  },
  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 dataAmount = await serviceareaSaleMonth(this.query);
      this.infoData.ze = dataAmount.msgContent[0]?.saleAmountSum;

      // 本月超市 餐饮
      const data = await serviceareaCyCssum(this.query);
      if (data.msgContent.length > 0) {
        data.msgContent.forEach(ele => {
          if (ele.storeClass == "超市") {
            this.infoData.bycs = ele.saleAmountSum;
          }
          if (ele.storeClass == "餐饮") {
            this.infoData.bycy = ele.saleAmountSum;
          }
        });
      } else {
        this.infoData.bycs = "-";
        this.infoData.bycy = "-";
      }

      // 昨日超市 餐饮
      const zrQuery = Object.assign({}, this.query);
      zrQuery.timemode = "day";
      let befordays = new Date().getDate() - 1;
      befordays = befordays > 9 ? befordays : "0" + befordays;
      zrQuery.timeflag = this.query.timeflag + befordays;
      const data1 = await serviceareaCyCssum(zrQuery);
      if (data1.msgContent.length > 0) {
        data1.msgContent.forEach(ele => {
          if (ele.storeClass == "超市") {
            this.infoData.zrcs = ele.saleAmountSum || "-";
          }
          if (ele.storeClass == "餐饮") {
            this.infoData.zrcy = ele.saleAmountSum || "-";
          }
        });
      } else {
        this.infoData.zrcs = "-";
        this.infoData.zrcy = "-";
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~/styles/viewport-convert.scss";
.center-reven-model {
  width: 100%;
  height: 100%;
  background: url("@/assets/images/expressway/ssbg.png");
  background-size: 100% 100%;
  padding: vh(60) vw(133);
  display: flex;
  justify-content: space-between;
  .reve-text1 {
    font-size: vw(14);
    color: #94a8c6;
  }
  .reve-text2 {
    margin-top: vh(8);
    display: flex;
    justify-content: space-between;
    width: vw(110);
    align-items: flex-end;
    font-size: vw(20);
    // font-family: "YouSheBiaoTiHei";
    font-family: "SairaRegular";
  }
  .reve-text2-unit {
    position: relative;
    top: vh(-2);
    font-size: vw(13);
    font-family: "YouSheBiaoTiHei";
  }
  .reve-text3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: vw(110);
    margin-top: vh(8);
    // border: 0.01rem solid #446790;
  }
  .eve-text3-l {
    position: relative;
    top: vh(2);
    font-size: vw(12);
    color: #94a8c6;
  }
  .eve-text3-r {
    font-size: vw(14);
    font-family: "SairaRegular";
    // font-family: "DinNextRegular";
  }
  .center-text {
    font-size: vw(40);
    font-family: "SairaRegular";
  }
  .center-text-unit {
    font-size: vw(26);
    font-family: "YouSheBiaoTiHei";
    margin-left: vw(10);
 
  }
  .center-text-unit1 {
    font-size: vw(20);
    font-family: "YouSheBiaoTiHei";
    margin-left: vw(40);
    margin-top: vh(10);
    color: #94a8c6;
  }
}
</style>