<template>
  <el-row :gutter="20">
    <!-- 工时分类统计柱状图 -->
    <el-col :span="12" v-if="showBarChart">
      <div class="chart-container floating-card">
        <div ref="barChart" class="chart"></div>
      </div>
    </el-col>
    <!-- 班组成员工分分布饼图 -->
    <el-col :span="12" v-if="showPieChart">
      <div class="chart-container floating-card">
        <div ref="pieChart" class="chart"></div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import * as echarts from 'echarts';
import { getChartData } from '@/api/system/dashboard';

export default {
  name: 'ChartsGroupOne',
  props: {
    postType: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      barChart: null,
      pieChart: null,
      showBarChart: true, // 控制工时分类统计图表的显示
      showPieChart: true, // 控制班组成员工分分布饼图的显示
    }
  },
  watch: {
    postType: {
      handler(newVal, oldVal) {
        if (newVal !== oldVal) {
          // 当 postType 变化时重新获取数据
          this.fetchChartData();
        }
      },
      immediate: true
    }
  },
  mounted() {
    this.initCharts()
  },
  beforeDestroy() {
    // 销毁图表实例
    const charts = [this.barChart, this.pieChart];
    charts.forEach(chart => {
      if (chart) {
        chart.dispose();
      }
    });
  },
  methods: {
    // 初始化图表
    initCharts() {
      this.barChart = echarts.init(this.$refs.barChart)
      this.pieChart = echarts.init(this.$refs.pieChart)
      
      // 获取图表数据
      this.fetchChartData();
    },
    
    // 计算轴的最大值和间隔的新方法
    calculateAxisRange(maxValue) {
      // 预定义的数组
      const presetValues = [1, 2, 3, 4, 5, 10, 15, 20, 25, 50, 100, 150, 200, 250, 300, 500, 1000, 2000, 5000];
      
      let selectedValue = maxValue/9;
      let maxAxisValue1 = Math.floor(selectedValue) * 10;
      let numForm = 10;
      for (let i = 0; i < presetValues.length; i++) {
        const numFormI = maxValue/presetValues[i];
        if (numFormI>=1 && numFormI<=9) {
          selectedValue = presetValues[i];
          const numFormII = Math.floor(numFormI);
          if (numFormII<numFormI) {
            numForm = numFormII+1;
          }else{
            numForm = numFormII;
          }
          maxAxisValue1 = selectedValue * numForm;
          break;
        }
      }
      const maxAxisValue = maxAxisValue1;
      const interval = selectedValue;
      return { maxAxisValue, interval };
    },
    
    // 获取图表数据
    async fetchChartData() {
      try {
        const response = await getChartData();
        
        // 处理工时分类统计数据
        if (response && response.hourStatistics) {
          // 更新工时分类统计图表
          this.updateBarChart(response.hourStatistics);
        } else {
          // 如果没有获取到数据，隐藏图表
          this.showBarChart = false;
          // 销毁图表实例
          if (this.barChart) {
            this.barChart.dispose();
            this.barChart = null;
          }
        }
        
        // 处理班组成员工分分布饼图数据
        if (response && response.classPointStatistics) {
          // 更新班组成员工分分布饼图
          this.updatePieChart(response.classPointStatistics);
        } else {
          // 如果没有获取到数据，隐藏图表
          this.showPieChart = false;
          // 销毁图表实例
          if (this.pieChart) {
            this.pieChart.dispose();
            this.pieChart = null;
          }
        }
      } catch (error) {
        console.error('获取图表数据失败:', error);
        // 出错时隐藏图表
        this.showBarChart = false;
        this.showPieChart = false;
        // 销毁图表实例
        if (this.barChart) {
          this.barChart.dispose();
          this.barChart = null;
        }
        if (this.pieChart) {
          this.pieChart.dispose();
          this.pieChart = null;
        }
      }
    },
    
    // 更新班组成员工分分布饼图
    updatePieChart(classPointStatistics) {
      // 处理后台传回的数据格式 [{"key":"一班","value":"1250"}]
      let data = [];
      
      if (classPointStatistics && Array.isArray(classPointStatistics) && classPointStatistics.length > 0) {
        // 从后台数据中提取班组名称和工分值
        data = classPointStatistics.map(item => ({
          name: item.key,
          value: parseInt(item.value) || 0
        }));
        // 显示图表
        this.showPieChart = true;
      } else {
        // 隐藏图表
        this.showPieChart = false;
        // 销毁图表实例
        if (this.pieChart) {
          this.pieChart.dispose();
          this.pieChart = null;
        }
        return;
      }
      
      // 定义前八个固定颜色
      const fixedColors = [
        'rgba(22, 93, 255, 0.7)',
        'rgba(54, 207, 201, 0.7)',
        'rgba(82, 196, 26, 0.7)',
        'rgba(250, 173, 20, 0.7)',
        'rgba(255, 77, 79, 0.7)',
        'rgba(153, 102, 255, 0.7)',
        'rgba(255, 159, 64, 0.7)',
        'rgba(231, 233, 237, 0.7)'
      ];
      
      // 班组成员工分分布的实心饼图
      const pieOption = {
        title: {
          text: '班组成员工分分布',
          left: 'left',
          top: 'top'
        },
        tooltip: {
          show: true,
          trigger: 'item',
          padding: [1, 5],
          backgroundColor: 'rgba(0, 0, 0, 0.7)',
          borderColor: 'rgba(0, 0, 0, 0.7)',
          textStyle: {
            color: '#fff'
          },
          formatter: function(params) {
            return `
              <div style="font-weight:bold; font-size:12px;">${params.name}</div>
              <div style="display: flex; align-items: center; font-size:12px;">
                <span style="display:inline-block; width:12px; height:12px; background:${params.color};margin-right: 4px;box-shadow: 0 0 0 0.5px white;"></span>
                <span >${params.value}</span>
              </div>
            `;
          },
        },
        legend: {
          orient: 'vertical',
          left: 'right',
          top: 'bottom',
        },
        series: [
          {
            name: '工分',
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            type: 'pie',
            radius: '85%', // 实心饼图
            center: ['50%', '55%'],
            data: data.map((item, index) => ({
              name: item.name,
              value: item.value,
              itemStyle: { 
                color: index < 8 ? fixedColors[index] : `rgba(${Math.floor(Math.random() * 200 + 55)}, ${Math.floor(Math.random() * 200 + 55)}, ${Math.floor(Math.random() * 200 + 55)}, 0.7)` 
              }
            })),
            emphasis: {
              scale: false,
            }
          }
        ]
      }
      
      // 初始化图表实例（如果还没有）
      if (!this.pieChart) {
        this.pieChart = echarts.init(this.$refs.pieChart);
      }
      
      // 设置班组成员工分分布饼图配置
      this.pieChart.setOption(pieOption, true);
    },
    
    // 更新工时分类统计图表
    updateBarChart(hourStatistics) {
      // 处理后台传回的数据格式 [{"key":"工单总工时","value":"3240"}]
      let names = [];
      let values = [];
      
      if (hourStatistics && Array.isArray(hourStatistics) && hourStatistics.length > 0) {
        // 从后台数据中提取工时类型和工时数
        names = hourStatistics.map(item => item.key);
        values = hourStatistics.map(item => parseInt(item.value) || 0);
        // 显示图表
        this.showBarChart = true;
      } else {
        // 隐藏图表
        this.showBarChart = false;
        // 销毁图表实例
        if (this.barChart) {
          this.barChart.dispose();
          this.barChart = null;
        }
        return;
      }
      
      // 使用新的计算方法
      const maxValue = Math.max(...values, 5); // 至少显示到5
      const { maxAxisValue, interval } = this.calculateAxisRange(maxValue);
      
      // 工时分类统计的柱状图
      const barOption = {
        title: {
          text: '工时分类统计',
          left: 'left',
          top: 'top'
        },
        grid: {
          left: '2%',   // 左边距 5%
          right: '2%',  // 右边距 5%
          top: '20%',   // 上边距（根据需求调整）
          bottom: '5%', // 下边距（根据需求调整）
          containLabel: true, // 确保标签在 grid 区域内
        },
        tooltip: {
          show: true,
          trigger: 'item',
          padding: [1, 5],
          backgroundColor: 'rgba(0, 0, 0, 0.7)',
          borderColor: 'rgba(0, 0, 0, 0.7)',
          textStyle: {
            color: '#fff'
          },
          formatter: function(params) {
            return `
              <div style="font-weight:bold; font-size:12px;">${params.name}</div>
              <div style="display: flex; align-items: center; font-size:12px;">
                <span style="display:inline-block; width:12px; height:12px; background:${params.color};margin-right: 4px;box-shadow: 0 0 0 0.5px white;"></span>
                <span>工时数:</span>
                <span style="margin-left: 4px;">${params.value}</span>
              </div>
            `;
          },
          position: 'top',
        },
        xAxis: {
          type: 'category',
          data: names, // 工时类型
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(200, 200, 200, 0.3)',
              type: 'solid'
            }
          }
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: maxAxisValue,
          interval: interval,
          axisLabel: {
            formatter: '{value}'
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(200, 200, 200, 0.3)',
              type: 'solid'
            }
          }
        },
        series: [
          {
            data: values, // 工时数
            type: 'bar',
            label: {
              show: false,
            },
            barWidth: '70%',
            itemStyle: {
              borderRadius: [5, 5, 0, 0],
              color: function(params) {
                const colors = [
                  'rgba(22, 93, 255, 0.7)',
                  'rgba(54, 207, 201, 0.7)',
                  'rgba(82, 196, 26, 0.7)',
                  'rgba(250, 173, 20, 0.7)',
                  'rgba(255, 77, 79, 0.7)'
                ];
                return colors[params.dataIndex] || 'rgba(22, 93, 255, 0.7)';
              }
            }
          }
        ]
      }
      
      // 初始化图表实例（如果还没有）
      if (!this.barChart) {
        this.barChart = echarts.init(this.$refs.barChart);
      }
      
      // 设置工时分类统计图表配置
      this.barChart.setOption(barOption, true);
    },
    
    // 图表自适应
    resizeCharts() {
      const charts = [this.barChart, this.pieChart];
      charts.forEach(chart => {
        if (chart) {
          chart.resize();
        }
      });
    }
  }
}
</script>

<style scoped>
/* 悬浮卡片通用样式 */
.floating-card {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.floating-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

/* 图表样式 */
.chart-container {
  height: 340px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  padding: 20px;
  margin-top: 20px;
  box-sizing: border-box;
  backdrop-filter: blur(5px);
}

.chart-container:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

.chart {
  width: 100%;
  height: 100%;
}

.post-type-debug {
  margin-top: 10px;
  padding: 5px;
  background-color: #f0f0f0;
  border-radius: 4px;
  font-size: 12px;
  color: #666;
}
</style>