<template>
  <div class="reactive-compensation-efficiency">
    <div class="chart-header">
      <h3>无功补偿效率</h3>
    </div>
    <div ref="chart" class="chart-container"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'ReactiveCompensationEfficiency',
  data() {
    return {
      chartData: {
        dates: Array.from({ length: 31 }, (_, i) => i + 1),
        dailyMax: [85, 78, 82, 75, 80, 88, 92, 85, 78, 82, 90, 85, 88, 92, 85, 78, 82, 75, 80, 88, 92, 85, 78, 82, 90, 85, 88, 92, 85, 78, 82],
        dailyAvg: [65, 58, 62, 55, 60, 68, 72, 65, 58, 62, 70, 65, 68, 72, 65, 58, 62, 55, 60, 68, 72, 65, 58, 62, 70, 65, 68, 72, 65, 58, 62],
        dailyMin: [45, 38, 42, 35, 40, 48, 52, 45, 38, 42, 50, 45, 48, 52, 45, 38, 42, 35, 40, 48, 52, 45, 38, 42, 50, 45, 48, 52, 45, 38, 42]
      },
      chart: null
    }
  },
  mounted() {
    this.initChart()
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose()
    }
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chart)

      const option = {
        backgroundColor: 'transparent',
        grid: {
          top: '15%',
          left: '8%',
          right: '8%',
          bottom: '15%',
          containLabel: true
        },
        legend: {
          data: ['日最高', '日平均', '日最低'],
          top: '5%',
          right: '10%',
          textStyle: {
            color: '#ffffff',
            fontSize: 12
          },
          itemWidth: 20,
          itemHeight: 2
        },
        xAxis: {
          type: 'category',
          data: this.chartData.dates,
          axisLine: {
            lineStyle: {
              color: '#2a4a6b'
            }
          },
          axisLabel: {
            color: '#7ec7ff',
            fontSize: 10
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#1e3a5f',
              type: 'dashed'
            }
          }
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: 100,
          axisLine: {
            lineStyle: {
              color: '#2a4a6b'
            }
          },
          axisLabel: {
            color: '#7ec7ff',
            fontSize: 10,
            formatter: '{value}%'
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#1e3a5f',
              type: 'dashed'
            }
          }
        },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0, 20, 40, 0.8)',
          borderColor: '#00d4ff',
          borderWidth: 1,
          textStyle: {
            color: '#ffffff'
          },
          formatter: function(params) {
            let result = `${params[0].axisValue}日<br/>`
            params.forEach(param => {
              result += `${param.seriesName}: ${param.value}%<br/>`
            })
            return result
          }
        },
        series: [
          {
            name: '日最高',
            type: 'line',
            data: this.chartData.dailyMax,
            smooth: true,
            lineStyle: {
              color: '#00d4ff',
              width: 2
            },
            itemStyle: {
              color: '#00d4ff'
            },
            symbol: 'circle',
            symbolSize: 4,
            showSymbol: false
          },
          {
            name: '日平均',
            type: 'line',
            data: this.chartData.dailyAvg,
            smooth: true,
            lineStyle: {
              color: '#00ff88',
              width: 2
            },
            itemStyle: {
              color: '#00ff88'
            },
            symbol: 'circle',
            symbolSize: 4,
            showSymbol: false
          },
          {
            name: '日最低',
            type: 'line',
            data: this.chartData.dailyMin,
            smooth: true,
            lineStyle: {
              color: '#ff6b9d',
              width: 2
            },
            itemStyle: {
              color: '#ff6b9d'
            },
            symbol: 'circle',
            symbolSize: 4,
            showSymbol: false
          }
        ]
      }

      this.chart.setOption(option)
    },
    handleResize() {
      if (this.chart) {
        this.chart.resize()
      }
    }
  }
}
</script>

<style scoped>
.reactive-compensation-efficiency {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(0, 20, 40, 0.8) 0%, rgba(0, 40, 80, 0.6) 100%);
  border: 1px solid rgba(0, 212, 255, 0.3);
  border-radius: 8px;
  padding: 16px;
  box-sizing: border-box;
}

.chart-header {
  margin-bottom: 10px;
}

.chart-header h3 {
  color: #ffffff;
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  text-align: center;
}

.chart-container {
  width: 100%;
  height: calc(100% - 40px);
  min-height: 200px;
}
</style>
