<template>
    <modulen>
        <template #title
            >总营业收入
            <span class="sumMoney"
                ><span style="font-size: 20px">{{ formatThousand(sumUp) }}</span
                >/万元</span
            ></template
        >
        <div class="mistake">
            <span class="mistakeText">通行费</span>
            <div class="numText">
                总和: <span>{{ formatThousand(sumupMoney) }}</span
                >/万元
            </div>
        </div>
        <div class="title-icome">通行费收入（万元)</div>
        <Ect :options="ectOpts" class="Icome-echarts" />
    </modulen>
</template>

<script>
import { qingfenAmount } from "@/api/chargeInfo";
import {
    GetQingfenNextmonth,
    GetQingfenNextmonthChild,
    GetRunIncomeState,
} from "@/api/manageGeneral";
import { yearFlowNext } from "@/api/tollManage";

import { formatThousand } from "@/utils/util";
import moment from "moment";
import { mapState } from "vuex";

export default {
    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;
        },
        yearMoth() {
            return this.$store.state.yearMoth;
        },
        ...mapState({
            appDate: (state) => state.appDate,
            selectLevel: (state) => state.road.selectLevel,
            selectRoadId: (state) => state.road.selectRoadId,
        }),
    },
    data() {
        return {
            ectOpts: {},
            dataList: [],
            query: {
                timemode: "year",
                level: "1",
                dimension: "",
                timeflag: moment(new Date()).format("YYYY"),
            },

            feeSum: "",
            planData: [],
            qingfenList: [],
            sumupMoney: "", //总和
            sumUp: "", //总收入
        };
    },
    // async created() {
    //  this.getData()
    // },

    watch: {
        // 监听左上角选择地址的值
        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图
        },
        yearMoth(val) {
            if (val == 1) {
                (this.query.timemode = "year"),
                    (this.query.timeflag = moment(
                        this.$store.state.appDate
                    ).format("yyyy"));
                this.getData();
            } else {
                (this.query.timemode = "month"),
                    (this.query.timeflag = moment(
                        this.$store.state.appDate
                    ).format("yyyyMM"));
                this.getData();
            }
        },
        getDate(newVal) {
            if (this.$store.state.yearMoth == 1) {
                this.query.timeflag = moment(newVal).format("yyyy");
                this.getData();
            } else {
                this.query.timeflag = moment(newVal).format("yyyyMM");
                this.getData();
            }
        },
    },
    // mounted() {
    //   this.getData();
    // },
    methods: {
        formatThousand,
        async getData() {
            // 月查询
            // console.log(87,this.query);

            //这是数额总和接口
            const Lists = await GetQingfenNextmonth(this.query);
            if (Lists.msgContent.length == 0) {
                this.sumupMoney = (0.0001).toFixed(2);
            } else {
                this.sumupMoney = Lists.msgContent[0]?.qingfenAmount;
            }

            const MoneyList = await GetQingfenNextmonthChild(this.query);
            const resList = await GetRunIncomeState(this.query);
            // const { msgContent } = await GetTollRevenueMonth(this.query)
            // // console.log(88,msgContent);
            // this.feeSum = msgContent[0].feeSum   //收入总额
            //   const res = await yearFlowNext(this.query)   //echarts图的数据
            // this.dataList = res.msgContent;
            console.log(120, MoneyList);
            // 取出来给echarts图的名称
            let dataAxis = MoneyList.msgContent.map((res) => res.orgName);
            let delAnhuidataAxis;
            let newDataAxis;
            if (dataAxis[0] == "安徽") {
                delAnhuidataAxis = dataAxis.slice(1);
                newDataAxis = dataAxis.slice(0, 1);
                delAnhuidataAxis.push(...newDataAxis);
                dataAxis = delAnhuidataAxis;
            }

            //  let qingfens = this.dataList.map(res => res.feeSum)
            const xAxisItemWidth = dataAxis.length
                ? (document.querySelector(".Icome-echarts").clientWidth * 0.7) /
                  dataAxis.length
                : 0;
            // 百分比（完成占比）
            this.qingfenList = MoneyList.msgContent;
            // console.log(120,this.qingfenList);  //全国时，重庆数据
            let qingfenMoeny = this.qingfenList.map((res) => res.qingfenAmount);
            // 最终需要拿到的清分数据
            let qingfen = qingfenMoeny;
            // console.log(121,this.qingfenList );
            // if(this.sumupMoney == 0){
            //   this.sumUp = ((this.sumupMoney- 0) + ((resList.msgContent[0]?.manageIncome .replaceAll(',' , '') - 0)||0)).toFixed(2)
            // }else{
            //   this.sumUp = ((this.sumupMoney.replaceAll(',' , '') - 0) + ((resList.msgContent[0]?.manageIncome .replaceAll(',' , '') - 0)||0)).toFixed(2)
            // }
            if (this.sumupMoney == 0) {
                this.sumUp = (
                    this.sumupMoney -
                    0 +
                    (resList.msgContent[0]?.manageIncome - 0 || 0)
                ).toFixed(2);
            } else {
                this.sumUp = (
                    this.sumupMoney.replaceAll(",", "") -
                    0 +
                    (resList.msgContent[0]?.manageIncome - 0 || 0)
                ).toFixed(2);
            }

            if (this.sumUp == "NaN") {
                this.sumUp = "0.00";
            }
            this.ectOpts = {
                // 距离边框，类似于内边距
                grid: {
                    left: "%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true,
                },
                color: ["#4999FF"],
                textStyle: {
                    fontSize: 10, //字体大小
                    color: "#909FAC", //字体颜色
                },
                xAxis: {
                    type: "category",
                    axisLabel: {
                        inside: false,
                        color: "#fff",
                        interval: 0,
                        formatter: function (value) {
                            const left = 10 * value.length - xAxisItemWidth;
                            if (left > 0) {
                                return (
                                    value.substr(
                                        0,
                                        Math.ceil(xAxisItemWidth / 12) - 2
                                    ) + "..."
                                );
                            }
                            return value;
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                    z: 10,
                    data: dataAxis,
                },
                yAxis: {
                    type: "value",
                    splitLine: {
                        //设置条纹显示 柱状图默认yAxis(true)
                        show: true,
                        //设置lineStyle即可写入样式即可
                        lineStyle: {
                            // 背景条纹颜色
                            color: "#1b2b3b",
                            // 背景条纹细虚线
                            type: "dashed",
                        },
                    },
                },
                series: [
                    {
                        type: "bar",
                        stack: "Total",
                        barWidth: 6,
                        label: {
                            show: true,
                            position: "top", // 汉字位于上方
                            color: "#fff",
                        },
                        itemStyle: {
                            normal: {
                                color: function (params) {
                                    return {
                                        type: "linear",
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [
                                            {
                                                offset: 0,
                                                color: "#3caeff",
                                            },
                                            {
                                                offset: 0.5,
                                                color: "#3CAEFF",
                                            },
                                            {
                                                offset: 1,
                                                color: "#0f2a41",
                                            },
                                        ],
                                    };
                                },
                            },
                        },
                        // 数据数量的内容
                        data: qingfen,
                        // 开启有虚淡背景
                        showBackground: true,
                        backgroundStyle: {
                            color: "rgba(59, 152, 219, 0)",
                            borderWidth: 35,
                            borderColor: "rgba(59, 152, 219, 0.2)",
                        },
                    },
                    {
                        //顶部的白色横杠
                        type: "pictorialBar",
                        symbol: "rect",
                        symbolSize: [10, 2],
                        symbolOffset: [0, -2],
                        symbolPosition: "end",
                        // 数据数量的内容
                        data: qingfen,
                        itemStyle: {
                            color: "#FFFFFF",
                        },
                    },
                ],
            };
        },
    },
};
</script>


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

.income-header {
  width: 100%;
  height: vh(25);
  display: flex;
  margin-left: 12px;
  margin-top: 50px;
  margin-bottom: 20px;
}

.general-income {
  display: flex;
  width: vw(220);
  height: vh(25);
  line-height: vh(25);
  font-size: 12px;
  color: #B1DFFF;
  padding-left: 10px;
  margin-right: vw(37);
  background-image: url("@/assets/images/manageGS/planMoeny.png");

  .money {
    font-family: "DINMedium";
    font-size: 18px;
    color: #fff;
    padding-left: 20px;
  }

}

.general-state {
  display: flex;
  width: vw(120);
  height: vh(25);
  line-height: vh(25);
  color: #B1DFFF;
  font-size: 12px;
  padding-left: 10px;
  background-image: url("@/assets/images/manageGS/planMoeny.png");
}

.percentage {
  font-size: 16px;
  color: #fff;
  padding-left: 10px;
}

.Icome-echarts {
  margin-top: vh(35);
}

.title-icome {
  position: absolute;
  top: vh(50);
  font-size: 12px;
  color: #909fac;
}
 .mistake{
      position: absolute;
      top: -10px;
      width: 100%;
      font-size:12px;
      height: vh(12);
      line-height: vh(14);
      margin-top:vh(28);
      background: url("@/assets/images/manageGS/long-Bj.png") ;
      background-size: 100%;
    .mistakeText{
        margin-left: vh(25);
       }
    }
    
    .sumMoney{
      position: absolute;
      right: vh(10);
      font-size: 12px;
      color: #ABBCDB;
      span{
        font-size: 16px;
        color: #fff;
        padding-right: 5px;
        font-family: "SairaRegular";
      }
    }

        .numText{
        position: absolute;
        width: vh(190);
        height: vh(32);
        text-align: center;
        line-height: vh(28);
        color: #ABCBDB;
        right: vw(20);
        top: vh(-8);
        // background-color: #264978;
        // border-radius: 3px ;
        // border: 1px solid #3e87cd;
        font-size: 12px;
        span{
          font-size: 16px;
          font-weight: 800;
          color: #fff;
          font-family: "SairaRegular";
        }
       }

</style>
