<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="80px">
      <el-form-item label="年份" prop="year">
        <el-date-picker
          v-model="queryParams.year"
          type="year"
          value-format="yyyy"
          placeholder="选择年份"
          style="width: 200px"
          @change="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        <el-button type="primary" icon="el-icon-download" size="mini" @click="report">上报</el-button>
      </el-form-item>
    </el-form>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>第三方施工汇总分析</span>
      </div>
      <div class="chart-container">
        <div ref="chart" class="echarts"></div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { summaryAnalysis } from "@/api/thirdbuild/project";
import { enterpriseLists } from "@/api/regulation/info";

export default {
  name: "SummaryAnalysis",
  data() {
    return {
      queryParams: {
        year: new Date().getFullYear().toString()
      },
      chartData: [],
      enterprises: [],
      chartInstance: null
    };
  },
  created() {
    this.getEnterpriseLists();
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart();
      this.getList();
    });
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    if (this.chartInstance) {
      this.chartInstance.dispose();
    }
    window.removeEventListener('resize', this.handleResize);
  },
  methods: {
    getEnterpriseLists() {
      const param = {};
      enterpriseLists(param).then(response => {
        this.enterprises = response.rows;
        this.getList();
      });
    },
    getList() {
      if (!this.queryParams.year) {
        this.queryParams.year = new Date().getFullYear().toString();
      }
      // 将年份转换为完整的日期格式传递给后端
      const params = {
        ...this.queryParams,
        fUpdateTime: this.queryParams.year + '-01-01 00:00:00'
      };
      summaryAnalysis(params).then(response => {
        this.chartData = response.data || [];
        this.updateChart();
      });
    },
    handleQuery() {
      this.getList();
    },
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.year = new Date().getFullYear().toString();
      this.getList();
    },
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.chart);
      this.updateChart();
    },
    updateChart() {
      if (!this.chartInstance) return;

      const enterpriseNames = this.enterprises.map(item => item.enterpriseName);

      const constructionCounts = [];
      const reportCounts = [];
      const supervisionCounts = [];
      const accidentCounts = [];

      this.enterprises.forEach(enterprise => {
        const enterpriseData = this.chartData.find(item => item.fCompanyInfoId === enterprise.enterpriseId);

        constructionCounts.push(enterpriseData ? enterpriseData.constructionCount : 0);
        reportCounts.push(enterpriseData ? enterpriseData.reportCount : 0);
        supervisionCounts.push(enterpriseData ? enterpriseData.supervisionCount : 0);
        accidentCounts.push(enterpriseData ? enterpriseData.accidentCount : 0);
      });

      const option = {
        title: {
          text: `${this.queryParams.year}年第三方施工统计分析`,
          left: 'center'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          data: ['施工数', '报备数', '旁站监督数', '发生意外情况数'],
          top: '30px'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
          top: '80px'
        },
        xAxis: {
          type: 'category',
          data: enterpriseNames,
          axisLabel: {
            interval: 0,
            rotate: 30
          }
        },
        yAxis: {
          type: 'value',
          name: '数量'
        },
        series: [
          {
            name: '施工数',
            type: 'bar',
            data: constructionCounts,
            itemStyle: {
              color: '#5470c6'
            }
          },
          {
            name: '报备数',
            type: 'bar',
            data: reportCounts,
            itemStyle: {
              color: '#91cc75'
            }
          },
          {
            name: '旁站监督数',
            type: 'bar',
            data: supervisionCounts,
            itemStyle: {
              color: '#fac858'
            }
          },
          {
            name: '发生意外情况数',
            type: 'bar',
            data: accidentCounts,
            itemStyle: {
              color: '#ee6666'
            }
          }
        ]
      };

      this.chartInstance.setOption(option);
    },
    handleResize() {
      if (this.chartInstance) {
        this.chartInstance.resize();
      }
    },
    report(row){
      this.$confirm('是否确认上报未主动报备的第三方施工企业', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        //暂无接口

      }).then(() => {
        this.msgSuccess("上报成功");
      }).catch(() => {});
    },
  }
};
</script>

<style scoped lang="scss">
.box-card {
  margin-top: 20px;
}

.chart-container {
  width: 100%;
  height: 600px;

  .echarts {
    width: 100%;
    height: 100%;
  }
}
</style>
