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

<script>
import * as echarts from 'echarts'

export default {
  name: 'PowerConsumption',
  data() {
    return {
      powerData: {
        days: Array.from({ length: 31 }, (_, i) => i + 1),
        dailyMax: [52, 48, 53, 45, 49, 47, 51, 39, 46, 50, 48, 52, 44, 53, 47, 49, 46, 38, 51, 47, 50, 49, 52, 45, 47, 51, 39, 46, 50, 48, 52],
        dailyAvg: [42, 38, 43, 35, 39, 37, 41, 29, 36, 40, 38, 42, 34, 43, 37, 39, 36, 28, 41, 37, 40, 39, 42, 35, 37, 41, 29, 36, 40, 38, 42],
        dailyMin: [32, 28, 33, 25, 29, 27, 31, 19, 26, 30, 28, 32, 24, 33, 27, 29, 26, 18, 31, 27, 30, 29, 32, 25, 27, 31, 19, 26, 30, 28, 32]
      }
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      const chart = echarts.init(this.$refs.chartContainer)
      const option = {
        backgroundColor: 'transparent',
        grid: {
          left: '5%',
          right: '5%',
          top: '15%',
          bottom: '15%',
          containLabel: true
        },
        legend: {
          data: ['日最高', '日平均', '日最低'],
          textStyle: {
            color: '#ffffff',
            fontSize: 12
          },
          top: '5%',
          right: '10%'
        },
        xAxis: {
          type: 'category',
          data: this.powerData.days,
          axisLine: {
            lineStyle: {
              color: '#1e3a8a'
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#60a5fa',
            fontSize: 10,
            interval: 4
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#1e3a8a',
              type: 'dashed',
              opacity: 0.3
            }
          }
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: 60,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            color: '#60a5fa',
            fontSize: 10
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#1e3a8a',
              type: 'dashed',
              opacity: 0.3
            }
          }
        },
        series: [
          {
            name: '日最高',
            type: 'line',
            data: this.powerData.dailyMax,
            lineStyle: {
              color: '#fbbf24',
              width: 2
            },
            itemStyle: {
              color: '#fbbf24'
            },
            symbol: 'circle',
            symbolSize: 4,
            smooth: true,
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(251, 191, 36, 0.3)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(251, 191, 36, 0.05)'
                  }
                ]
              }
            }
          },
          {
            name: '日平均',
            type: 'line',
            data: this.powerData.dailyAvg,
            lineStyle: {
              color: '#3b82f6',
              width: 2
            },
            itemStyle: {
              color: '#3b82f6'
            },
            symbol: 'circle',
            symbolSize: 4,
            smooth: true,
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(59, 130, 246, 0.3)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(59, 130, 246, 0.05)'
                  }
                ]
              }
            }
          },
          {
            name: '日最低',
            type: 'line',
            data: this.powerData.dailyMin,
            lineStyle: {
              color: '#10b981',
              width: 2
            },
            itemStyle: {
              color: '#10b981'
            },
            symbol: 'circle',
            symbolSize: 4,
            smooth: true,
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: 'rgba(16, 185, 129, 0.3)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(16, 185, 129, 0.05)'
                  }
                ]
              }
            }
          }
        ],
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0, 0, 0, 0.8)',
          borderColor: '#3675c9',
          textStyle: {
            color: '#ffffff'
          },
          formatter: function(params) {
            let result = `第${params[0].axisValue}天<br/>`
            params.forEach(param => {
              result += `${param.seriesName}: ${param.value}<br/>`
            })
            return result
          }
        }
      }
      chart.setOption(option)

      // 响应式调整
      window.addEventListener('resize', () => {
        chart.resize()
      })
    }
  }
}
</script>

<style lang="less" scoped>
.power-consumption {
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
  border-radius: 8px;
  padding: 20px;

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