<!-- 20250417 拆分核验数据汇总展示-->
<template>
  <div class="top_div-stat">
    <el-form :inline="true" :model="formInline" label-position="right"  class="demo-form-inline" style="width:100%;height: 100%">
      <el-form-item label="日期："   class="s_el_row">
        <el-date-picker
            v-model="rpTime"
            type="datetimerange"
            range-separator="To"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            value-format="YYYY-MM-DD"
            format="YYYY-MM-DD"
            @calendar-change="calendarChange"
        />
      </el-form-item>
      <el-form-item label="" style="width:8%;margin-right:5px" class="s_el_row">
        <div  style="display:flex;text-align: left; height:100%; position: relative;margin:0;padding:0">
          <el-button type="primary" style="margin-top: 0px;" @click="search" class="query_button" size="default" :icon="searchButton">查询</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
<div class="contain-div-stat">
    <div class="div_left" >
         <div style="width:100%;padding-bottom: 20px;height: 10%" >
          <p style="font-size: 20px">应收：{{feeTotal}}&nbsp;元</p>
        </div>
        <div  id="statPie" style="width:100%;height: 40%"  v-loading="tableloading">

        </div>
        <div  id="vehicleclassRate" style="width:100%;height: 44%" v-loading="tableloading">

        </div>
    </div>
    <div class="middle-div-stat">
        <div style="width:100%;padding-bottom: 20px;height: 10%" >
          <p style="font-size: 20px">拆分金额：{{divfeeTotal}}&nbsp;元</p>
        </div>
        <div  id="statdivfeePie" style="width:100%;height: 40%"  v-loading="tableloading">
        </div>
        <div  id="vehicleclassdivFlow" style="width:100%;height: 44%" v-loading="tableloading">
        </div>
    </div>
    <div class="middle-div-right-stat" style="height: 870px;overflow-y: auto">
      <echatsTotalLineShow ref="echatsTotalLineShow"></echatsTotalLineShow>
    </div>
</div>
</template>
<style >
html{
  height: 98% !important;
  width: 100% !important;
}
body{
  height: 100% !important;
  width: 99% !important;
}
#app{
  height: 100% !important;
  width: 100% !important;
}
.contain-div-stat{
  height: 95%;
  width: 100%;
  display: flex;
}
.top_div-stat{
  height: 5%;
  width: 100%;
  border-bottom: #c9c6c6 1px solid;
  top: 0;
  /*z-index: 1000; /* 确保它在其他内容之上 */
}
.middle-div-stat{
  height: 100%;
  width: 30%;
   border-right: #c9c6c6 1px solid;
   display: block;
 }
 .div_left{
   height: 100%;
   width: 30%;
   /*border-right: #c9c6c6 solid;*/
  position:relative;
}
.middle-div-right-stat{
  height: 100%;
  width: 40%;
  position:relative;
}

</style>
<script >
import {
Search
} from '@element-plus/icons-vue'
import {getFeeShowTotal, getStatusToal, getVehicleClassToal} from "@/util/api/api";
import echatsTotalLineShow from "@/views/dev/echarts/echatsTotalLineShow.vue";
import tool from '@/util/tool';
var _this;
export default {
name: "divfeeShowStat",
data() {
  return {
    tableloading:false,
    rpTime:[tool.DayDec(new Date(),-1),tool.DayDec(new Date(),-1)],
    feeTotal:"0",
    divfeeTotal:"0",
    begindate:"",
    enddate:"",
    searchButton:Search,

  }
},
methods: {
  search() {//查询
      if(this.rpTime){
        this.begindate=this.rpTime[0];
        this.enddate=this.rpTime[1];
        this.tableloading=true;
      }else{
        alert("请选择日期");
        return ;
      }
    var params={
      "queryStartTime":this.begindate,
      "queryEndTime":this.enddate,
    }
    getFeeShowTotal(params).then(res=>{
        if(res.count>0 && (res.data)[0] !== null && (res.data)[0] !== undefined  && (res.data)[0] !== 'null' ){
          this.feeTotal=(res.data)[0].feeTotal;
          this.divfeeTotal=(res.data)[0].divfeeTotal;
        }

                //获取饼图数据并且展示
                var params={
                  "queryStartTime":this.begindate,
                  "queryEndTime":this.enddate,
                }
                getStatusToal(params).then(res=>{
                  let feeStatusTotal=res.data.feeStatusTotal;
                  if(feeStatusTotal !== null && feeStatusTotal !==undefined){
                    this.initEcharts('status',feeStatusTotal,'statPie','各状态金额','单位:元');
                  }
                  let divfeeStatusTotal=res.data.divfeeStatusTotal;
                  if(divfeeStatusTotal !== null && divfeeStatusTotal !==undefined){
                    this.initEcharts('status',divfeeStatusTotal,'statdivfeePie','各状态金额','单位:元');
                  }
                  var params={
                    "queryStartTime":this.begindate,
                    "queryEndTime":this.enddate,
                  }
                  getVehicleClassToal(params).then(res=>{
                    let vehicleClassTotal=res.data.vehicleClassTotal;
                    if(vehicleClassTotal !== null && vehicleClassTotal !==undefined){
                      this.initEcharts('classmoney',vehicleClassTotal,'vehicleclassRate','车种占比','');
                    }
                    let vehicleClassFlowTotal=res.data.vehicleClassFlowTotal;
                    if(vehicleClassFlowTotal !== null && vehicleClassFlowTotal !==undefined){
                      this.initEcharts('classflow',vehicleClassFlowTotal,'vehicleclassdivFlow','车种流量','单位：辆');
                    }
                  })
                })
      this.tableloading=false;
    })
    this.$refs["echatsTotalLineShow"].refreshData(this.begindate,this.enddate);
  },calendarChange (val) {
    this.firstChooseDate = val[0].getTime() //点击第一次选中日期
    if (val[1]) {
      const timeRange = 1 * 24 * 60 * 60 * 1000;
      let diffDay=(val[1].getTime() -val[0].getTime())/timeRange  ;
      this.diffDate =  (diffDay==0?1:diffDay+1)//天数差值
      this.firstChooseDate = "" // 选中后必须清空
    }
  },initOption(data,echartsId,title,subtext) {
    let myChart = this.$echarts.init(document.getElementById(echartsId))
    // 绘制图表
    this.option = {
      title: {
        text: title,
        subtext: subtext,
        left: 'center'
      },
      tooltip: {
        trigger: 'item',
        left:'left'
      },
      legend: {
        orient: 'horizontal',  //  vertical  水平
        top: 'bottom',
        fontSize:'5px'
      },
      series: [
        {
          type: 'pie',
          avoidLabelOverlap: true,   // 是否启用防止标签重叠策略
          radius: '50%',//饼图大小，55  最大,不要加中括号，否则 label不生效
          //radius: ['50%','70%'],//饼图大小，55  最大,不要加中括号，否则 label不生效
          center: ['50%', '50%'],//饼图 X Y 坐标
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          },
          label: {
            show: true,
            formatter: echartsId==='vehicleclassRate'?'{b}:{c}%':'{b}:{c}'
          },
          labelline:{
            show: true
          },
          //鼠标移动上去后饼图区域的样式改变
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          data: data
        }
      ]
    };
    myChart.setOption(this.option);
  }, initEcharts(dataType,echartsData,echartsId,title,subtext) {//初始化图形
    var data = [];
    if (echartsData != null && echartsData.length > 0) {
      for (var i=0;i<echartsData.length;i++) {
        let item = echartsData[i];
        switch (dataType) {
          case "status":
            data.push({
              value: item.feeTotal,
              name: item.statusName
            });
            break;
          case "classmoney":
            if(this.feeTotal !==undefined && this.feeTotal !=="0" && this.feeTotal !=="null"){
              data.push({
                value: Number.parseFloat(((item.feeTotal*100 )/(this.feeTotal*100)) *100).toFixed(2),
                name: item.statusName
              });
            }
            break;
          case "classflow":
            data.push({
              value: item.feeTotal,
              name: item.statusName
            });
            break;
        }
      }
    }else{
      data.push(
          {value:0,name:"无数据"}	)
    }
    this.initOption(data,echartsId,title,subtext)
  },
},
components: {
  echatsTotalLineShow
},
mounted() {
  _this=this;
 this.search();

}
}

function getCurrentDate(){
  var myDate = new Date(); //获取今天日期
  myDate.setDate(myDate.getDate() - 1);
  // dateTemp = myDate.getFullYear()+"/"+(c)+"/"+myDate.getDate();
  return myDate.getFullYear()+"-"+((myDate.getMonth()+1) >9?(myDate.getMonth()+1):"0"+(myDate.getMonth()+1))+"-"+(myDate.getDate() >9?myDate.getDate():"0"+myDate.getDate());
}
</script>