<template>
    <date-switcher
        class="switcher"
        :type="2"
        v-model="selectType"
        @change="getType"
    ></date-switcher>
    <div class="Rental_box">
        <div class="center_box">
            <div class="profitRental-text">
                利润总额<i class="money_rental"
                    >{{ formatThousand(totalProfitCount) }} </i
                >&nbsp;&nbsp;&nbsp; 万元
            </div>
            <div class="detail">
                <span class="left_text">
                    <div class="center-left">&nbsp;主要业务收入</div>
                    <i class="number_money">{{ formatThousand(sumupMoney) }}</i
                    >&nbsp; 万元
                </span>

                <span class="right_text">
                    <div class="center-rigin">非主营业务收入</div>
                    <i class="number_money"
                        >&nbsp;&nbsp;{{ formatThousand(nonMainIncome) }}</i
                    >&nbsp; 万元
                </span>
            </div>
            <div class="detail_text">
                <div class="text_left">
                    <span class="text">付现成本</span>
                    <div class="number_text">
                        {{ formatThousand(payCashCost)
                        }}<span class="unit">万元</span>
                    </div>
                </div>
                <div class="text_right">
                    <span class="text">非付现成本</span>
                    <div class="number_text">
                        {{ formatThousand(nonCashCost)
                        }}<span class="unit">万元</span>
                    </div>
                </div>
            </div>
            <div class="footerImg">
                <span class="imgLeft"><i>成本</i></span>
                <span class="imgRight"><i>收入</i></span>
            </div>
        </div>
    </div>
</template>
<script>
import {
    GetQingfenNextmonth,
    GetRunCostStateNon,
    GetTotalCostStatet,
} from "@/api/manageGeneral";

import { qingfenNext } from "@/api/tollManage";
import { formatThousand } from "@/utils/util";
import moment from "moment";
import { mapState } from "vuex";
export default {
    data() {
        return {
            selectType: "1",
            query: {
                timemode: "year",
                timeflag: moment(new Date()).format("yyyy"),
                level: 0,
                dimension: "",
            },
            nonMainIncome: "", // 非主营业收入
            payCashCost: "", // 付现成本
            specialCost: "", //专项成本
            totalProfitCount: "", //利润总额
            MianIncome: "",
            qingfenList: [],
            nonCashCost: "",
            sumupMoney: "",
        };
    },
    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;
        },
        ...mapState({
            appDate: (state) => state.appDate,
            selectLevel: (state) => state.road.selectLevel,
            selectRoadId: (state) => state.road.selectRoadId,
        }),
    },
    watch: {
        // 右上角监听选择器的时间，参数为时间
        getDate(newVal) {
            if (this.selectType == 1) {
                this.query.timeflag = moment(newVal).format("yyyy");
                this.getData();
            } else {
                this.query.timeflag = moment(newVal).format("yyyyMM");
                this.getData();
            }
        },
        // 监听左上角选择地址的值
        selectRoad(newVal) {
            const level = this.$store.state.road.selectLevel; // 获取当前选择的值的下标
            const Id = newVal ? newVal[level - 1] : ""; //  下标-1
            this.query.level = level;
            this.query.dimension = Id;
            this.getData(); //值变化就更新echarts图
        },
    },
    // mounted() {
    //   this.getData();
    // },
    methods: {
        formatThousand,
        getType(val) {
            this.selectType = val;
            if (this.selectType == 1) {
                this.$store.commit("changeyearMoth", this.selectType);
                (this.query.timemode = "year"),
                    (this.query.timeflag = moment(
                        this.$store.state.appDate
                    ).format("yyyy"));
                this.getData();
            } else {
                this.$store.commit("changeyearMoth", val);
                (this.query.timemode = "month"),
                    (this.query.timeflag = moment(
                        this.$store.state.appDate
                    ).format("yyyyMM"));
                this.getData();
            }
        },

        async getData() {
            const resMoney = await GetRunCostStateNon(this.query);
            if (resMoney.msgContent[0]?.nonCashCost == undefined) {
                this.nonCashCost = "0.00";
            } else {
                this.nonCashCost =
                    (
                        resMoney.msgContent[0]?.nonCashCost.replaceAll(
                            ",",
                            ""
                        ) -
                        0 +
                        0.0001
                    ).toFixed(2) || 0;
            }

            const Lists = await GetQingfenNextmonth(this.query); //主营业务收入
            if (Lists.msgContent.length == 0) {
                Lists.msgContent.push({
                    qingfenAmount: 0,
                });
            }
            if (Lists.msgContent[0]?.qingfenAmount == 0) {
                this.sumupMoney = "0.00";
            } else {
                this.sumupMoney =
                    (
                        Lists.msgContent[0]?.qingfenAmount.replaceAll(",", "") -
                        0
                    ).toFixed(2) || 0;
            }

            // 利润总额
            const res = await GetTotalCostStatet(this.query);
            // console.log(106,res)
            this.totalProfitCount =
                (res.msgContent[0]?.totalProfitCount == undefined
                    ? (0.001).toFixed(2)
                    : res.msgContent[0]?.totalProfitCount) || 0;
            this.specialCost = res.msgContent[0]?.specialCost || 0;
            if (res.msgContent[0]?.payCashCost == undefined) {
                this.payCashCost = "0.00";
            } else {
                this.payCashCost =
                    (
                        res.msgContent[0]?.payCashCost.replaceAll(",", "") -
                        0 +
                        0.0001
                    ).toFixed(2) || 0;
            }
            if (res.msgContent[0]?.nonMainIncome == undefined) {
                this.nonMainIncome = "0.00";
            } else {
                this.nonMainIncome =
                    (
                        res.msgContent[0]?.nonMainIncome.replaceAll(",", "") -
                        0 +
                        0.0001
                    ).toFixed(2) || 0;
            }

            //   //  总和
            //   const res_qingfen = await qingfenNext({
            //     level: this.selectLevel,
            //     dimension: this.selectRoadId[this.selectLevel - 1],
            //     timeflag: this.showDate,
            //   });
            //   this.qingfenList = res_qingfen.msgContent
            //   let qingfenMoeny = this.qingfenList.map(res => res.qingfenAmount)
            //   // 最终需要拿到的清分数据
            //   let qingfen = qingfenMoeny
            //   this.MianIncome = 0
            //   for (let i = 0; i < qingfen.length; i++) {
            //     this.MianIncome += qingfen[i]
            //   }
            //   this.MianIncome = (this.MianIncome - 0).toFixed(2)
        },
    },
};
</script>

<style lang="scss" scoped>
@import "~/styles/viewport-convert.scss";

.Rental_box {
  position: relative;
  display: flex;
  justify-content: center;
  width: vw(940);
  height: vh(640);
  padding-top: vh(28);
  margin: auto;
  background: url("@/assets/images/manageGS/subject.png") center no-repeat;
  background-size: 1253px 600px;
}

.center_box {
  position: relative;
  width: vw(940);
}

.workbench {
  position: absolute;
  top: -37px;
  right: vh(-190);
  width: vw(90);
  height: vh(30);
  line-height: vh(28);
  text-align: center;
  background-color: #2b5d99;
  border: 1px solid #418dd6;
  border-radius: 15px;
  z-index: 999;
  cursor: pointer;
}

.profitRental-text {
  width: 100%;
  height: vh(110);
  font-size: 20px;
  line-height: vh(110);
  font-weight: 500;
  text-align: center;
  background: url("@/assets/images/manageGS/profitBCK.png") no-repeat;
  background-size: 100% 100%;

  .money_rental {
    margin-left: 15px;
    font-size: 28px;
    font-family: "SairaRegular";
    text-shadow: 0 0 10px #0090ff
  }
}

.detail {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: vh(70);
  margin-top: vh(50);

  .left_text {
    color: #ABBCDB;
    font-size: 12px;

    .center-left {
      font-size: 14px;
      margin-left: 10px;
      font-size: 16px;
    }

  }

  .right_text {
    color: #ABBCDB;
    font-size: 12px;

    .center-rigin {
      font-size: 14px;
      margin-right: 20px;
    }
  }

  .number_money {
    font-size: 20px;
    color: #fff;
    text-shadow: 0 0 10px #0090ff;
    font-family: "SairaRegular";
  }

}

.detail_text {
  display: flex;
  // justify-content:space-around;
  width: 100%;
  height: vh(80);

  .text_left {
    width: vw(130);
    height: vh(50);
    color: #ABBCDB;
    font-size: 14px;
    margin-left: vw(280);

    .text {
      padding-left: 20px;
    }

  }

  .text_right {
    width: vw(130);
    height: vh(50);
    color: #ABBCDB;
    font-size: 14px;
    margin-left: vw(130);

  }

  .text {
    padding-left: 20px;
  }

  .number_text {
    font-family: "SairaRegular";
    font-size: 20px;
    color: aqua;
  }

  .unit {
    font-size: 12px;
    color: #ABBCDB;
  }
}

.footerImg {
  display: flex;
  width: 100%;
  height: vh(80);
  margin-top: 140px;

  .imgLeft {
    width: vw(190);
    height: vh(75);
    line-height: 65px;
    font-family: "YouSheBiaoTiHei";
    font-weight: 900;
    padding-left: vw(50);
    margin-left: vw(40);
    background: url("@/assets/images/manageGS/L-arrows.png") no-repeat;
  }

  .imgRight {
    width: vw(190);
    height: vh(75);
    line-height: 65px;
    font-family: "YouSheBiaoTiHei";
    font-weight: 900;
    padding-left: vw(110);
    margin-left: vw(460);
    background: url("@/assets/images/manageGS/R-arrows.png") no-repeat;
  }
}

.switcher {
  position: absolute;
  width: 82px;
  border: 1px solid #068eed;
  border-radius: 3px;
  margin-right: vw(500);
  right: vw(10);
  top: vh(100);
  z-index: 100;
}
</style>
