<template>
  <div class="mychart">
    <div id="chart-current"></div>
  </div>
</template>

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

export default {
  name: '',
  props: {
    propsInfo: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      curList: [
        {
          name: '储能设备',
          key: 'storage_elect_in',
          lineColor: '#9BD801',
          value: 0,
          d: 'kWh'
        },
        {
          name: '充电设备',
          key: 'storage_elect_out',
          lineColor: '#3DFEFA',
          value: 0,
          d: 'kWh'
        }
      ],

      myChart: null,
      chartData: {
        ydata: [],
        xdata: []
      }
    }
  },
  watch: {
    propsInfo: {
      handler(newVal, oldVal) {
        if (JSON.stringify(newVal) !== JSON.stringify(oldVal)) {
          this.$nextTick(() => {
            this.updateChart()
          })
        }
      },
      deep: true // 确保深度比较
    }
  },
  mounted() {},
  beforeUnmount() {
    window.removeEventListener('resize', this.handleResize)
    if (this.myChart) {
      this.myChart.dispose()
      this.myChart = null
    }
  },

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

    createChartXData()
    {
      const timeArray = [];
      const dateZero = new Date();
      dateZero.setHours(0, 0, 0, 0); // 重置为当天0点
      for (let i=0; i<144; ++i)
      {
        // 累加10分钟
        const currentTime = new Date(dateZero.getTime() + i * 600 * 1000);
        // 格式化为 HH:mm
        const hours = currentTime.getHours().toString().padStart(2, '0');
        const minutes = currentTime.getMinutes().toString().padStart(2, '0');
        timeArray.push(`${hours}:${minutes}`);
      }
      return timeArray
    },

    initChart() {
      const chartDom = document.getElementById('chart-current')
      if (!chartDom) return

      if (this.myChart) this.myChart.dispose()
      this.myChart = this.$echarts.init(chartDom)

      const xdata = this.createChartXData();
      const option = {
        tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
        legend: { top: 0, textStyle: { color: '#fff' } },
        grid: { left: '3%', right: '4%', top: '40px', bottom: '5%', },
        xAxis: {
          type: 'category',
          data: xdata,
          axisLine: { lineStyle: { type: 'dashed', color: '#435463' } },
          axisLabel: { color: '#fff' }
        },
        yAxis: {
          name: "电流(A)",
          type: 'value',
          nameTextStyle: { color: '#fff' },
          splitLine: {
            lineStyle: { type: 'dashed', color: '#435463' }
          },
          axisLabel: { color: '#fff', fontSize: 12 },
        },
        series: []
      }
      this.curList.forEach((item, index) => {
        option.series.push({
          name: item.name,
          index: index,
          smooth: true,
          type: 'line',
          barWidth: 10,
          itemStyle: { borderRadius: 10, color: item.lineColor　},
          emphasis: {　focus: 'series'　},
          global: false,
          showSymbol: false,
          data: []
        })
      }) 
      option && this.myChart.setOption(option)
    },

    updateChart(activeKey) {
      if (!this.myChart) {
        this.initChart()
      }

      if (this.propsInfo) {
        let series = []
        this.propsInfo.forEach((item)=> {
          if (item.index != undefined && item.index < this.curList.length) {
            series.push({ 
              name: this.curList[item.index].name,
              data: item.data
            })
          }
        })

        if (series.length > 0) {
          this.myChart.setOption({
            xAxis: { data: this.createChartXData() },
            series: series
          });
          this.setupResizeListener()
        }
      } 
    },
    setupResizeListener() {
      window.removeEventListener('resize', this.handleResize)
      window.addEventListener('resize', this.handleResize)
    }
  }
}
</script>

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

  #chart-current {
    height: calc(100% - 5px);
  }
}

</style>
