<template>
  <div>
    <div class="chartBox" style="width: 100%; height: 108px; position: relative;">
      <div :id="id" style="width: 100%; height:100%;"></div>
      <div class="bottomTip">
        <div class="precent">
          <span class="precentNum">{{ detailData.rate || 0 }}% </span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'

export default {
  name: 'EnergyConsumption',
  // components: { Container },
  // mixins: [resize],
  props: {
    detailData: {
      type: Object,
      default: () => ({
        // electricComu: 0,
        // steamComu: 20, // 调整为符合max范围的数值（0-8）
        // // electricity: [120, 150, 130, 180, 160, 200, 190],
        // // steam: [80, 95, 85, 110, 100, 120, 115],
        // // dates: ['1日', '2日', '3日', '4日', '5日', '6日', '7日']
      })
    },
    id: {
      type: String,
      default: () => ('monthG')
    }
  },
  data() {
    return {
      // electricityChart: null,
      // steamChart: null,
      // specialTicks: [2, 4, 6, 8], // 统一的刻度显示
    }
  },
  watch: {
    detailData: {
      deep: true,
      immediate: true, // 初始化时立即执行
      handler() {
        this.updateGauges()
      }
    }
  },
  mounted() {
    this.initGauges()
    // window.addEventListener('resize', this.handleResize)
    this.observeContainerResize()
  },
  methods: {
    observeContainerResize() {
      // 修复：获取正确的容器（组件内的.gauge-container）
      const container = this.$el.querySelector('.gauge-container')
      if (container && window.ResizeObserver) {
        this.resizeObserver = new ResizeObserver(entries => {
          if (this.electricityChart) {
            this.electricityChart.resize() // 直接触发resize，无需防抖
          }
        })
        this.resizeObserver.observe(container)
      }
    },
    initGauges() {
      // console.log('this.id',this.id);

      // 初始化电气图表实例
      const electricityDom = document.getElementById(this.id)
      if (electricityDom) {
        // 修复：正确创建并存储图表实例
        this.electricityChart = echarts.init(electricityDom)
        // 首次更新数据
        this.updateGauges()
      }
      // 蒸汽图表若未使用，可注释/删除
      // const steamDom = document.getElementById('steamGauge')
      // if (steamDom) {
      //   this.steamChart = echarts.init(steamDom)
      // }
    },
    updateGauges() {
      // 修复：先判断实例是否存在，再更新配置
      if (!this.electricityChart) return

      // 修复：兜底获取rate值，确保数值有效
      const rate = Number(this.detailData?.rate) || 0
      console.log('当前rate值：', rate); // 调试：确认rate值正确

      // 关键：第二个参数传true，清空原有配置，强制更新
      this.electricityChart.setOption(this.getElectricityGaugeOption(rate), true)
    },
    // 用电量仪表盘配置（保留原有样式，优化数值范围）
    getElectricityGaugeOption(value) {
      const electricityGradient = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
        { offset: 0, color: '#0B58FF' },
        { offset: 1, color: '#32FFCD' }
      ])

      return {
        series: [
          {
            name: '月度',
            type: 'gauge',
            radius: '95', // 修复：添加%，避免数值错误
            center: ['50%', '90%'],
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 100,
            splitNumber: 4,
            label: { show: false },
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
              width: 14,
              itemStyle: { color: electricityGradient }
            },
            pointer: {
              icon: 'path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.194028 2092.44859,617.312956 L2096.90698,728.755929 C2097.05155,732.369577 2094.2393,735.416212 2090.62566,735.56078 C2090.53845,735.564269 2090.45117,735.566014 2090.36389,735.566014 L2090.36389,735.566014 C2086.74736,735.566014 2083.81557,732.63423 2083.81557,729.017692 C2083.81557,728.930412 2083.81732,728.84314 2083.82081,728.755929 L2088.2792,617.312956 C2088.32396,616.194028 2089.24407,615.30999 2090.36389,615.30999 Z',
              length: '75%',
              width: 16,
              itemStyle: { color: '#288AFF' },
              offsetCenter: [0, '10%']
            },
            axisLine: {
              roundCap: true,
              lineStyle: { width: 12, color: [[1, '#E6EBF7']] }
            },
            splitLine: {
              length: 10,
              lineStyle: { width: 5, color: '#D6DAE5' },
            },
            axisTick: {
              splitNumber: 2,
              length: 6,
              lineStyle: { width: 2, color: '#D6DAE5' }
            },
            axisLabel: {
              show: false,
            },
            detail: { show: false },
            data: [{ value: value, unit: '' }] // 确保数值正确传入
          }
        ]
      }
    },
    // 未使用的蒸汽仪表盘可注释/删除
    // getSteamGaugeOption(value) { ... }
  }
}
</script>

<style lang='scss' scoped>
.chartBox {
  .bottomTip {
    text-align: center;
    font-size: 14px;

    .precent {
      line-height: 3px;

      &::after,
      &::before {
        content: '';
        display: inline-block;
        width: 54px;
        height: 5px;
        vertical-align: middle;
      }

      &::after {
        margin-left: 30px;
      }

      &::before {
        margin-right: 30px;
      }
    }

    // 用电量线条颜色
    .precent::before {

      background: linear-gradient(90deg, rgba(40, 138, 255, 0) 0%, rgba(12, 125, 254, 0.4) 100%);
    }

    /* ::after：从 透明 到 rgba(12, 125, 254, 0.4)（90度渐变，左到右） */
    .precent::after {
      background: linear-gradient(90deg, rgba(12, 125, 254, 0.4) 0%, rgba(40, 138, 255, 0) 100%);
    }

    // 蒸汽线条颜色
    // .steam-precent::after,
    // .steam-precent::before {
    //   background: linear-gradient(90deg, rgba(11, 168, 255, 0.26) 0%, rgba(54, 239, 230, 1) 100%);
    // }

    .precentNum {
      display: inline-block;
      // width: 52px;
      height: 22px;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 16px;
      color: #0B58FF;
      line-height: 22px;
      text-align: center;
      font-style: normal;
    }

    // 蒸汽数字颜色
    .steam-num {
      color: rgba(54, 239, 230, 1);
    }
  }
}
</style>
