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

<script>

export default {
  name: '',
  props: {
    total: {
      type: Object,
      default: () => {}
    },
    deviceInfo: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      curList: [
        {
          name: '收益',
          key: 'income',
          percentKey: 'connector_online_percent',
          lineColor: '#00BAAD',
          value: 0
        },
        {
          name: '利用率',
          key: 'usage_rate',
          percentKey: 'connector_off_percent',
          lineColor:'#0E68E4',
          value: 0
        }
      ],
      operationalChart: null,
      operationalChartData: {
        ydata: [],
        xdata: []
      },
     
    }
  },
  watch: {
    
    deviceInfo: {
      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.operationalChart) {
      this.operationalChart.dispose()
      this.operationalChart = null
    }
  },

  methods: {
    processData(data, keys) {
      data.sort((a, b) => {
        return new Date(a.station_name) - new Date(b.station_name)
      })
      const dates = data.map((item) => item.station_name)
      const values = []
      keys.forEach((item, index) => {
        values[index] = data.map((dataValue) => dataValue[keys[index]])||0
      })

      return {
        dates,
        values
      }
    },
    handleResize() {
      if (this.operationalChart) {
        this.operationalChart.resize()
      }
    },
   
    getChargeData() {
      const arr = this.curList
      const keyList = this.curList.map((item) => item.key)
      const result = this.processData(this.deviceInfo, keyList)

      this.operationalChartData.xdata = result.dates
      arr.forEach((item, index) => {
        this.operationalChartData.ydata[index] = {
          name: item.name,
          smooth: true,
          type: 'bar',
          barWidth: 5,
          itemStyle: {
            borderRadius: [5, 5, 0, 0],
            color: item.lineColor
          },
          emphasis: {
            focus: 'series'
          },
          yAxisIndex: index,
          global: false,
          showSymbol: false,
          data: result.values[index]
        }
      })
    },

    drawLineChart(activeKey) {
      this.getChargeData(activeKey)
      if (this.operationalChart) {
        this.operationalChart.dispose()
      }
      const chartDom = document.getElementById('operational-chart')
      if (!chartDom) return
      let operationalChart = this.$echarts.init(chartDom)
      this.operationalChart = operationalChart
      const option = {
        tooltip: {
          trigger: 'axis', // 触发类型：坐标轴触发
          // position: function (pos, params, dom, rect, size) {
          //   // pos: 鼠标位置 [x, y]
          //   // size: 提示框大小 {viewSize: [width, height], contentSize: [width, height]}
          //   const x = pos[0] + 10; // 鼠标右侧10px
          //   const y = pos[1];     // 保持与鼠标同高
          //   return [x, y];
          // }
        },
        legend: {
          top: 10,
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '5%',
          // containLabel: true
        },
        xAxis: {
          type: 'category',
          data: this.operationalChartData.xdata,
          axisLine: {
            lineStyle: { type: 'dashed', color: '#435463' }
          },
          axisLabel: {
            color:"#fff",
            // interval:'auto', // 显示所有标签
            fontSize: 12,
            formatter: function(value) {
              return value.length > 8 ? value.substring(0, 8) + '...' : value;
            }
          }
        },
        yAxis: [
          {
            name: '收益(元)',
            type: 'value',
            splitNumber: 2,
            splitLine: {
              lineStyle: { type: 'dashed', color: '#435463' }
            },
            nameTextStyle: {
              color: '#fff' // 绿色名称
            },
            axisLabel: {
              // interval: 4,
              color: '#fff',
              fontSize:12

            },
          },
          {
            name: '利用率(%)',
            type: 'value',
            splitNumber: 2,
            nameTextStyle: {
              color: '#fff' // 绿色名称
            },
            splitLine: {
              lineStyle: { type: 'dashed', color: '#435463' }
            },
            axisLabel: {
              // interval: 4,
              color: '#fff',
              fontSize:12
            },
          },
        ],
        series: this.operationalChartData.ydata
      }
      option && operationalChart.setOption(option)
      this.setupResizeListener()
    },
    setupResizeListener() {
      window.removeEventListener('resize', this.handleResize)
      window.addEventListener('resize', this.handleResize)
    }
  }
}
</script>

<style lang="scss" scoped>
.operational {
  height: calc(100% - 45px);
  background-color: #50505030;
  #operational-chart {
    height: 100%;

  }
}

</style>
