<template>
  <div class="revenue">
    <div id="revenue-chart"></div>
  </div>
</template>

<script>
import {processData} from '@/utils/dealWithData'

export default {
  name: '',
  props: {
    propsInfo: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
     
      curList: [
        {
          name: '日收益',
          key: 'incomeTotal',
          lineColor: '#00BBA3',
          colorStart: ' rgba(10, 250, 106, 0.15)',
          colorEnd: ' rgba(171, 255, 249, 0.3)',
          value:0,
          d:'kWh'
        },
       
      ],
      revenueChart: null,
      RevenueChartData: {
        ydata: [],
        xdata: []
      },
     
    }
  },
  watch: {
    propsInfo: {
      handler(newVal, oldVal) {
        if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
          this.$nextTick(() => {
            this.drawLineChart()
          })
        }
      },
      deep: true // 确保深度比较
    }
  },
  mounted() {},
  beforeUnmount() {
    window.removeEventListener('resize', this.handleResize)
    if (this.revenueChart) {
      this.revenueChart.dispose()
      this.revenueChart = null
    }
  },

  methods: {
    handleResize() {
      if (this.revenueChart) {
     
        this.revenueChart.resize()
      }
    },

    getRevenueData() {
      const arr=this.curList
      const keyList=this.curList.map((item)=>item.key)
      const result = processData(this.propsInfo, keyList)

      this.RevenueChartData.xdata = result.dates
      arr.forEach((item, index) => {
        this.RevenueChartData.ydata[index] = {
          name: item.name,
          smooth: true,
          type: 'line',
          barWidth: 10,
          itemStyle: {
            borderRadius: 10,
            color: item.lineColor
          },
          emphasis: {
            focus: 'series'
          },
          areaStyle: {
            global: false,
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: JSON.parse(JSON.stringify(item)).colorStart }, // 顶部颜色
                { offset: 1, color: JSON.parse(JSON.stringify(item)).colorEnd }, // 底部颜色
              ]
            }
          },
          global: false,
          showSymbol: false,
          data:result.values[index]

        }
      })
    },

    drawLineChart(activeKey) {
      this.getRevenueData(activeKey)
      if (this.revenueChart) {
        this.revenueChart.dispose()
      }
      const chartDom = document.getElementById('revenue-chart')
      if (!chartDom) return
      let revenueChart = this.$echarts.init(chartDom)
      this.revenueChart = revenueChart
      const option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          top: 20,
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '5%',
          // containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.RevenueChartData.xdata,
          axisLine: {
            lineStyle: { type: 'dashed', color: '#435463' }
          },
          axisLabel: {
            color: '#fff'
          }
        },
        yAxis: {
          type: 'value',
          splitLine: {
            lineStyle: { type: 'dashed', color: '#435463' }
          },
          axisLabel: {
            color: '#fff'
          }
        },
        series: this.RevenueChartData.ydata
      }
      option && revenueChart.setOption(option)
      this.setupResizeListener()

    },
    setupResizeListener() {
      window.removeEventListener('resize', this.handleResize)
      window.addEventListener('resize', this.handleResize)
    }
  }
}
</script>

<style lang="scss" scoped>
.revenue {
    height:calc(100% - 45px);


  #revenue-chart {
    height: 100%;
  }
}

</style>
