<template>
  <div class="electrode-consumption">
    <div class="chart-container" ref="chartContainer"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'ElectrodeConsumption',
  data() {
    return {
      chart: null,
      chartData: {
        dates: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
        dailyMax: [13.2, 12.8, 11.5, 12.1, 12.5, 13.1, 12.9, 12.3, 12.7, 13.0, 12.4, 11.8, 12.2, 12.6, 13.3, 12.1, 11.9, 12.8, 13.1, 12.5, 12.0, 11.7, 12.4, 12.9, 13.2, 12.3, 11.6, 12.7, 13.0, 12.2, 11.8],
        dailyAvg: [9.8, 9.5, 8.2, 8.8, 9.2, 9.7, 9.4, 8.9, 9.3, 9.6, 9.0, 8.4, 8.7, 9.1, 9.8, 8.6, 8.3, 9.4, 9.7, 9.1, 8.6, 8.1, 8.9, 9.4, 9.8, 8.8, 8.0, 9.3, 9.6, 8.7, 8.2],
        dailyMin: [6.2, 5.8, 4.5, 5.1, 5.5, 6.1, 5.9, 5.3, 5.7, 6.0, 5.4, 4.8, 5.2, 5.6, 6.3, 5.1, 4.9, 5.8, 6.1, 5.5, 5.0, 4.7, 5.4, 5.9, 6.2, 5.3, 4.6, 5.7, 6.0, 5.2, 4.8]
      }
    }
  },
  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.chartContainer)

      const option = {
        grid: {
          top: '15%',
          left: '8%',
          right: '5%',
          bottom: '15%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.chartData.dates,
          axisLine: {
            lineStyle: {
              color: '#4a90e2'
            }
          },
          axisLabel: {
            color: '#ffffff',
            fontSize: 10
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(74, 144, 226, 0.2)',
              type: 'dashed'
            }
          }
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: 15,
          axisLine: {
            lineStyle: {
              color: '#4a90e2'
            }
          },
          axisLabel: {
            color: '#ffffff',
            fontSize: 10
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(74, 144, 226, 0.2)',
              type: 'dashed'
            }
          }
        },
        legend: {
          data: ['日最高', '日平均', '日最低'],
          bottom: '5%',
          textStyle: {
            color: '#ffffff',
            fontSize: 12
          },
          itemWidth: 12,
          itemHeight: 8
        },
        series: [
          {
            name: '日最高',
            type: 'line',
            data: this.chartData.dailyMax,
            smooth: true,
            symbol: 'circle',
            symbolSize: 4,
            lineStyle: {
              color: '#00d4aa',
              width: 2
            },
            itemStyle: {
              color: '#00d4aa'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: 'rgba(0, 212, 170, 0.3)' },
                  { offset: 1, color: 'rgba(0, 212, 170, 0.05)' }
                ]
              }
            }
          },
          {
            name: '日平均',
            type: 'line',
            data: this.chartData.dailyAvg,
            smooth: true,
            symbol: 'circle',
            symbolSize: 4,
            lineStyle: {
              color: '#9c27b0',
              width: 2
            },
            itemStyle: {
              color: '#9c27b0'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: 'rgba(156, 39, 176, 0.3)' },
                  { offset: 1, color: 'rgba(156, 39, 176, 0.05)' }
                ]
              }
            }
          },
          {
            name: '日最低',
            type: 'line',
            data: this.chartData.dailyMin,
            smooth: true,
            symbol: 'circle',
            symbolSize: 4,
            lineStyle: {
              color: '#ff9800',
              width: 2
            },
            itemStyle: {
              color: '#ff9800'
            },
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  { offset: 0, color: 'rgba(255, 152, 0, 0.3)' },
                  { offset: 1, color: 'rgba(255, 152, 0, 0.05)' }
                ]
              }
            }
          }
        ]
      }

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

<style scoped>
.electrode-consumption {
  width: 100%;
  height: 100%;
  background: transparent;
}

.chart-container {
  width: 100%;
  height: 100%;
}
</style>
