<!--
 * @Author: ysh
 * @Date: 2024-10-18 11:17:48
 * @LastEditors: wrh
 * @LastEditTime: 2025-12-26 14:47:09
-->
<template>
  <div style="width:100%;" v-loading="loading">
    <div class="titles">结算和核算统计</div>
    <div class="warpper">
      <div class="left">
        <div class="left-top" id="settleBar"></div>
        <div class="left-top" id="settleTypePie" v-loading="dataLoading"></div>
      </div>
      <div class="middle">
        <div class="middle-top" id="settleLine"></div>
        <div class="middle-top" id="settleProject"></div>
      </div>
    </div>
  </div>
</template>

<script>
import { ehcartsInit } from '@/utils/echarts'
import { getSettleStatistic } from '@/api/oa/settle/settle';
let settleYearChart, settleAmountChart, settleTypeChart, settleProjectChart
export default {
  props: {
    settleData: {
      type: Object,
      require: true,
    },
    checkData: {
      type: Object,
      require: true,
    },
  },
  watch: {
    settleType() {
      this.initSettleTypePie(this.activeYear)
    },
    settleData() {
      this.initSettleDatas();
    },
    checkData() {
      this.initCheckDatas();
    }
  },
  data() {
    return {
      loading: false,
      settleType: {},
      settleTypeAmount: {},
      settleYear: {},
      settleAmount: {},
      yearSettleProjectAmount: {},
      yearSettleProjectCount: {},
      yearCheckProjectAmount: {},
      yearCheckProjectCount: {},
      sumSettleAmount: 0,
      sumCheckAmount: 0,
      checkYear: {},
      checkAmount: {},
      dataLoading: false,
      activeYear: ''
    }
  },
  created() {
    this.loading = true;
    this.initSettleDatas();
    this.initCheckDatas();
  },
  mounted() {
    this.initSettleYearBar();
    this.initSettleAmountLine();
    this.initSettleTypePie('');
    // this.initSettleTypeAmountPie('');
    this.initSettleProjectLineBar();
  },
  methods: {
    initSettleDatas() {
      if (Object.keys(this.settleData).length !== 0) {
        this.settleAmount = this.settleData.amount[0];
        this.settleType = this.settleData.type[0];
        this.settleTypeAmount = this.settleData.typeAmount[0];
        this.settleYear = this.settleData.year[0];
        this.yearSettleProjectAmount = this.settleData.yearProjectAmount[0];
        this.yearSettleProjectCount = this.settleData.yearProjectCount[0];
        let sum = Object.values(this.settleAmount).reduce((accumulator, currentValue) => accumulator + currentValue, 0);
        this.sumSettleAmount = (sum / 10000).toFixed(1)
        this.loading = false;
      } else {
        this.loading = true;
      }
    },
    initCheckDatas() {
      if (Object.keys(this.checkData).length !== 0) {
        this.checkAmount = this.checkData.amount[0];
        this.checkYear = this.checkData.year[0];
        this.yearCheckProjectAmount = this.checkData.yearProjectAmount[0];
        this.yearCheckProjectCount = this.checkData.yearProjectCount[0];
        let sum = Object.values(this.checkAmount).reduce((accumulator, currentValue) => accumulator + currentValue, 0);
        this.sumCheckAmount = (sum / 10000).toFixed(1)
        this.loading = false;
      } else {
        this.loading = true;
      }
    },
    clickYear(charts) {
      let that = this;
      charts.on('click', function (event) {
        if (event) {
          that.activeYear = event.name;
          let year = event.name + '-01-01'
          if (event.name == "") {
            year = ''
          }
          that.dataLoading = true
          getSettleStatistic({ gmTime: year }).then(res => {
            that.settleType = res.data.type[0];
            that.settleTypeAmount = res.data.typeAmount[0];
            that.dataLoading = false
          })
        }
      })
    },
    initSettleYearBar() {
      let option = {
        title: {
          text: '各年结算次数',
          subtext: '共计结算次数：' + Object.values(this.settleYear).reduce((accumulator, currentValue) => accumulator + currentValue, 0) + '次'
        },
        grid: {
          left: '1%',
          right: '1%',
          bottom: '0%',
          height: '60%',
          containLabel: true
        },
        legend: {},
        graphic: [
          {
            type: 'text',
            name: '',
            right: '0',
            top: '20%',
            style: {
              text: '全部年份',
              fill: '#000', // 文本颜色  
              fontSize: 12, // 文本大小  
              fontWeight: '' // 文本粗细  
            }
          }
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        xAxis: {
          name: '年',
          type: 'category',
          data: Object.keys(this.settleYear),
        },
        yAxis: {
          type: 'value',
          name: '单位：次'
        },
        series: [
          {
            name: "结算",
            data: Object.values(this.settleYear),
            type: 'bar',
            smooth: true,
            label: {
              show: true,
              position: 'top'
            },
            itemStyle: {
              color: '#3498DB'
            }
          },
          {
            name: "核算",
            data: Object.values(this.checkYear),
            type: 'bar',
            smooth: true,
            label: {
              show: true,
              position: 'top'
            },
            itemStyle: {
              color: '#46CB2B'
            }
          }
        ]
      };
      let charts = ehcartsInit(settleYearChart, 'settleBar', option);
      this.clickYear(charts)
    },
    initSettleAmountLine() {
      let option = {
        title: {
          text: '各年结算金额',
          subtext: '结算总额：' + (Object.values(this.settleAmount).reduce((accumulator, currentValue) => {return accumulator + currentValue}, 0)).toFixed(2) + '元' +
            '（约' + this.sumSettleAmount + '万元）' +
            "\n" + 
            '核算总额：' + (Object.values(this.checkAmount).reduce((accumulator, currentValue) => {return accumulator + currentValue}, 0)).toFixed(2) + '元' +
            '（约' + this.sumCheckAmount + '万元）'
        },
        grid: {
          left: '1%',
          right: '1%',
          bottom: '0%',
          height: '60%',
          containLabel: true
        },        
        legend: {
          right: '0%',
          orient: 'vertical'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'none',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        xAxis: {
          type: 'category',
          data: Object.keys(this.settleAmount),
        },
        yAxis: {
          type: 'value',
          name: '单位：元'
        },
        series: [
          {
            name: "结算",
            data: Object.values(this.settleAmount),
            type: 'line',
            smooth: true,
            label: {
              show: true,
              position: 'top',
              formatter: function (params) {
                let value = params.value;
                if (value >= 10000) {
                  return '约' + (value / 10000).toFixed(1) + '万元'
                }
              }
            }
          },
          {
            name: "核算",
            data: Object.values(this.checkAmount),
            type: 'line',
            smooth: true,
            label: {
              show: true,
              position: 'top',
              formatter: function (params) {
                let value = params.value;
                if (value >= 10000) {
                  return '约' + (value / 10000).toFixed(1) + '万元'
                }
              }
            }
          }
        ]
      };
      ehcartsInit(settleAmountChart, 'settleLine', option);
    },
    initSettleTypePie(year) {
      let option = {
        title: {
          text: year + '结算类型占比',
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          top: 'bottom'
        },
        series: [
          {
            name: '占比',
            type: 'pie',
            radius: '30%',
            center: ['25%', '50%'],
            avoidLabelOverlap: false,
            data: Object.entries(this.settleType).map(([key, value]) => {
              return { name: key, value: value }
            }),
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              alignTo: 'none',
              formatter: '{name|{b}}\n{value|{c}个}',
              minMargin: 5,
              edgeDistance: 8,
              lineHeight: 15,
              rich: {
                time: {
                  fontSize: 10,
                  color: '#999'
                }
              }
            },
          },
          {
            name: '占比',
            type: 'pie',
            radius: '30%',
            center: ['65%', '50%'],
            avoidLabelOverlap: false,
            data: Object.entries(this.settleTypeAmount).map(([key, value]) => {
              return { name: key, value: value }
            }),
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              alignTo: 'none',
              formatter: '{name|{b}}\n{value|{c}元}',
              minMargin: 5,
              edgeDistance: 8,
              lineHeight: 15,
              rich: {
                time: {
                  fontSize: 10,
                  color: '#999'
                }
              }
            },
          },
        ]
      };
      ehcartsInit(settleTypeChart, 'settleTypePie', option);
    },
    initSettleProjectLineBar(year) {
      let option = {
        title: {
          text: '项目结算金额',
        },
        tooltip: {
          trigger: 'axis',
        },
        grid: {
          left: '1%',
          right: '1%',
          bottom: '0%',
          containLabel: true
        },
        legend: {
          right: '0%',
          orient: 'vertical'
        },
        xAxis: [
          {
            type: 'category',
            data: Object.keys(this.yearSettleProjectAmount),
            axisPointer: {
              type: 'shadow'
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '单位：元',
          }
        ],
        series: [
          {
            name: "结算",
            type: 'line',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' 元';
              }
            },
            smooth: true,
            data: Object.values(this.yearSettleProjectAmount),
            label: {
              show: true,
              position: 'top',
              formatter: function (params) {
                let value = params.value;
                if (value >= 10000) {
                  return '约' + (value / 10000).toFixed(1) + '万元'
                }
              }
            }
          },
          {
            name: "核算",
            type: 'line',
            tooltip: {
              valueFormatter: function (value) {
                return value + ' 元';
              }
            },
            smooth: true,
            data: Object.values(this.yearCheckProjectAmount),
            label: {
              show: true,
              position: 'top',
              formatter: function (params) {
                let value = params.value;
                if (value >= 10000) {
                  return '约' + (value / 10000).toFixed(1) + '万元'
                }
              }
            }
          }
        ]
      };
      ehcartsInit(settleProjectChart, 'settleProject', option);
    },
  },
}
</script>

<style lang="scss" scoped>
.titles {
  font-family: 'puhuiti';
  font-size: 16px;
  margin-bottom: 16px;
}

.warpper {
  width: 100%;
  height: 100%;
  display: flex;

  .left {
    flex: 1;

    .left-top {
      width: 100%;
      height: 300px;
      padding: 10px;
      border: 1px solid #ececec;
    }
  }

  .middle {
    flex: 1;

    .middle-top {
      width: 100%;
      height: 300px;
      padding: 10px;
      border: 1px solid #ececec;
    }
  }

  .right {
    // flex: 1;

    .right-top {
      width: 100%;
      height: 300px;
      padding: 10px;
      border: 1px solid #ececec;
    }
  }
}
</style>