<!--
 * @Author: ysh
 * @Date: 2024-10-11 16:41:17
 * @LastEditors: wrh
 * @LastEditTime: 2025-12-24 19:13:16
-->
<template>
  <div style="width:100%;" v-loading="loading">
    <div class="titles">项目统计</div>
    <div class="warpper">
      <div class="left">
        <div class="date-range">
          <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd HH:mm:ss" type="monthrange"
            range-separator="-" start-placeholder="开始月份" end-placeholder="结束月份" :default-time="['00:00:00', '23:59:59']"
            @change="queryList"></el-date-picker>
        </div>
        <!-- 年份/月度项目图表 -->
        <div class="bar" id="yearNumber"></div>
        <div class="pie-box" v-loading="dataLoading">
          <!-- 院内院外饼图 -->
          <div class="sourcePie" id="sourceNumber"></div>
          <!-- 部门饼图 -->
          <div class="deptPie" id="deptNumber"></div>
        </div>
      </div>
      <div class="middle" v-loading="dataLoading">
        <div class="typeBar" id="typeNumber"></div>
      </div>
      <div class="right">
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { disposeCharts, echartsSetoption, echartsInit } from '@/utils/echarts'
import { getProjectStatistic } from '@/api/oa/project/project'
let barYearChart, sourceChart, deptChart, typeChart
export default {
  props: {
    datas: {
      type: Object,
      require: true,
    }
  },
  data() {
    return {
      year: {},
      month: {},
      monthComplete: {},
      monthArchive: {},
      monthSettle: {},
      monthCheck: {},
      type: {},
      source: {},
      dept: {},
      archive:{},
      complete:{},
      settle:{},
      check:{},
      loading: true,
      activeYear: '',
      dataLoading: false,
      isYearView: true,
      mainChart: null,
      dateRange: [],
    }
  },
  watch: {
    year() {
      if (this.isYearView) {
        this.initChartBar();
      }
    },
    source() {
      this.initChartSource(this.activeYear);
    },
    dept() {
      this.initChartDept(this.activeYear);
    },
    type() {
      this.initTypeBar(this.activeYear);
    },
    datas: {
      handler(newVal) {
        if (newVal) {
          this.initDatas();
        }
      },
      immediate: true,  // 在绑定时立即执行一次  
      deep: true       // 深度监听对象的变化  
    }
  },
  created() {
    this.initDatas();
  },
  mounted() {

  },
  methods: {
    async initDatas() {
      this.loading = true;
      this.isYearView = true;
      if (Object.keys(this.datas).length !== 0) {
        this.year = this.datas.year[0];
        this.month = this.datas.month ? this.datas.month[0] : {};
        this.type = this.datas.type[0];
        this.source = this.datas.source[0];
        this.dept = this.datas.dept[0];
        this.archive = this.datas.archive[0];
        this.complete = this.datas.complete[0];
        this.settle = this.datas.settle[0];
        this.check = this.datas.check[0];
        this.loading = false;
      }

    },
    async queryList() {
      this.loading = true;
      let params = {};
      if (this.dateRange && this.dateRange.length === 2) {
        params.params = {
          beginTime: this.dateRange[0],
          endTime: this.dateRange[1]
        };
      }
      let res = await getProjectStatistic(params);
      if (this.dateRange && this.dateRange.length === 2) {
        this.year = res.data.month ? res.data.month[0] : {};
        this.month = res.data.month ? res.data.month[0] : {};
        this.archive = res.data.monthArchive ? res.data.monthArchive[0] : {};
        this.complete = res.data.monthComplete ? res.data.monthComplete[0] : {};
        this.settle = res.data.monthSettle ? res.data.monthSettle[0] : {};
        this.check = res.data.monthCheck ? res.data.monthCheck[0] : {};
      } else {
        this.year = res.data.year[0];
        this.month = res.data.month ? res.data.month[0] : {};
        this.archive = res.data.archive[0];
        this.complete = res.data.complete[0];
        this.settle = res.data.settle[0];
        this.check = res.data.check[0];
      }
      this.type = res.data.type[0];
      this.source = res.data.source[0];
      this.dept = res.data.dept[0];
      this.loading = false;
      this.initChartBar();
    },
    initChartBar() {
      let option = {
        title: {
          text: '项目个数统计',
          subtext: '项目数量：' + Object.values(this.year).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.year),
        },
        yAxis: {
          type: 'value',
          name: '单位：个'
        },
        series: [
          // {
          //   data: Object.values(this.year),
          //   type: 'bar',
          //   smooth: true,
          //   label: {
          //     show: true,
          //     position: 'top'
          //   }
          // },
          {
            name:'已归档',
            type: 'line',
            data: Object.values(this.archive),
            smooth: true,
            areaStyle: {},
            label: {
              show: true,
              position: 'top',
            },
            z:4
          },
          {
            name:'已完成',
            type: 'line',
            data: Object.values(this.complete),
            smooth: true,
            areaStyle: {},
            label: {
              show: true,
              position: 'top',
            },
            z:2
          },
          {
            name:'已结算',
            type: 'line',
            data: Object.values(this.settle),
            smooth: true,
            areaStyle: {},
            label: {
              show: true,
              position: 'top',
            },
            z:3
          },
          {
            name:'已核算',
            type: 'line',
            data: Object.values(this.check),
            smooth: true,
            areaStyle: {},
            label: {
              show: true,
              position: 'top',
            },
            z:5
          },
          {
            name:'总数',
            type: 'line',
            data: Object.values(this.year),
            smooth: true,
            areaStyle: {},
            label: {
              show: true,
              position: 'top',
            },
            z:1
          },
        ]
      };
      this.mainChart = echartsInit(barYearChart, 'yearNumber', option);
      this.clickYear(this.mainChart)
    },
    clickYear(charts) {
      let that = this;
      that.mainChart = charts;
      charts.off('click');
      charts.on('click', async function (event) {
        if (event) {
          if (event.name === '' || event.name === undefined) {
            that.initDatas();
            that.isYearView = true;
            that.activeYear = '';
          } else {
            that.activeYear = event.name;
            that.isYearView = false;
            that.dataLoading = true;
            let res = await getProjectStatistic({ projectNumber: event.name });
            that.year = res.data.year[0];
            that.month = res.data.month ? res.data.month[0] : {};
            that.monthComplete = res.data.monthComplete ? res.data.monthComplete[0] : {};
            that.monthArchive = res.data.monthArchive ? res.data.monthArchive[0] : {};
            that.monthSettle = res.data.monthSettle ? res.data.monthSettle[0] : {};
            that.monthCheck = res.data.monthCheck ? res.data.monthCheck[0] : {};
            that.type = res.data.type[0];
            that.source = res.data.source[0];
            that.dept = res.data.dept[0];
            that.archive = res.data.archive[0];
            that.complete = res.data.complete[0];
            that.settle = res.data.settle[0];
            that.check = res.data.check[0];
            that.dataLoading = false;
            that.initMonthChart();
          }
        }
      })
    },
    initMonthChart() {
      let option = {
        title: {
          text: this.activeYear + '月度项目个数统计',
          subtext: '项目数量：' + Object.values(this.month).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.month),
        },
        yAxis: {
          type: 'value',
          name: '单位：个'
        },
        series: [{
            name:'已归档',
            type: 'line',
            data: Object.values(this.monthArchive),
            smooth: true,
            areaStyle: {},
            label: {
              show: true,
              position: 'top',
            },
            z:4
          },
          {
            name:'已完成',
            type: 'line',
            data: Object.values(this.monthComplete),
            smooth: true,
            areaStyle: {},
            label: {
              show: true,
              position: 'top',
            },
            z:2
          },
          {
            name:'已结算',
            type: 'line',
            data: Object.values(this.monthSettle),
            smooth: true,
            areaStyle: {},
            label: {
              show: true,
              position: 'top',
            },
            z:3
          },
          {
            name:'已核算',
            type: 'line',
            data: Object.values(this.monthCheck),
            smooth: true,
            areaStyle: {},
            label: {
              show: true,
              position: 'top',
            },
            z:5
          },
          {
            name:'总数',
            type: 'line',
            data: Object.values(this.month),
            smooth: true,
            label: {
              show: true,
              position: 'top',
            },
          }
        ]
      };
      this.mainChart = echartsInit(barYearChart, 'yearNumber', option);
      this.clickYear(this.mainChart);
    },
    initChartSource(year) {
      let option = {
        title: {
          text: year + '项目来源分布',
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          top: 'bottom'
        },
        series: [
          {
            name: '占比',
            type: 'pie',
            radius: '40%',
            avoidLabelOverlap: false,
            data: Object.entries(this.source).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'
                }
              }
            },
          }
        ]
      };
      echartsInit(sourceChart, 'sourceNumber', option);
    },
    initChartDept(year) {
      let option = {
        title: {
          text: year + '部门承担项目情况',
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          bottom: '0',
          textStyle: {
            fontSize: 12
          }
        },
        series: [
          {
            name: '占比',
            type: 'pie',
            radius: '40%',
            center: ['50%', '40%'],
            data: Object.entries(this.dept).map(([key, value]) => {
              return { name: key, value: value }
            }),
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              alignTo: 'edge',
              formatter: '{name|{b}}\n{value|{c}个}',
              minMargin: 5,
              edgeDistance: 3,
              lineHeight: 15,
              rich: {
                time: {
                  fontSize: 10,
                  color: '#999'
                }
              }
            },
          }
        ]
      };
      echartsInit(deptChart, 'deptNumber', option);
    },
    initTypeBar(year) {
      let option = {
        title: {
          text: year + '项目类型统计'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        toolbox: {
          feature: {
            dataView: {
              show: true,
              optionToContent: function (opt) {
                var axisData = opt.yAxis[0].data;
                var series = opt.series;
                var table = '<table border="1" style="width:100%;text-align:center;border-collapse: collapse;"><tbody><tr>'
                  + '<td>项目类型</td>'
                  + '<td>数量</td>'
                  + '</tr>';
                for (var i = 0, l = axisData.length; i < l; i++) {
                  table += '<tr>'
                    + '<td>' + axisData[i] + '</td>'
                    + '<td>' + series[0].data[i] + '</td>'
                    + '</tr>';
                }
                table += '</tbody></table>';
                return table;
              }
            }
          }
        },
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 100,
            show: true,
            yAxisIndex: 0,
          }
        ],
        grid: {
          left: '3%',
          right: '8%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
        },
        yAxis: {
          type: 'category',
          data: Object.keys(this.type),
          axisLabel: {
            fontSize: 12,
            width: 130,
            overflow: 'truncate',
          }
        },
        series: [
          {
            type: 'bar',
            data: Object.values(this.type)
          }
        ]
      };
      echartsInit(typeChart, 'typeNumber', 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.5;
    position: relative;

    .date-range {
      position: absolute;
      right: 66px;
      top: 54px;
      z-index: 1;
    }

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

      .pie-box {
      width: 100%;
      height: 300px;
      display: flex;
    }

    .sourcePie {
      flex: 1;
      height: 300px;
      padding: 10px;
      border: 1px solid #ececec;
    }

    .deptPie {
      flex: 2;
      height: 300px;
      padding: 10px;
      border: 1px solid #ececec;
    }
  }

  .middle {
    flex: 1;

    .typeBar {
      width: 100%;
      height: 600px;
      padding: 10px;
      border: 1px solid #ececec;
    }
  }
}
</style>