<template>
  <div class="item-box">
    <div class="item-info">
      <div class="power-box">
        <div class="power-info">
          <div class="power-title">
            {{ title || '平均效率' }}
          </div>
          <div class="power-amount">{{ value || '2,456.8' }} <span>{{ unit || 'KWh' }}</span></div>
          <div class="power-growth">
            <img :src="type === 'up' ? '/src/assets/demo/up.png' : '/src/assets/demo/down.png'" alt="">
            <span class="growth-value">{{ growth || '2.5%' }}</span>
            <span class="growth-label">{{ growthLabel || '较昨日' }}</span>
          </div>
        </div>
        <div class="power-icon" :style="{ backgroundColor: color }">
          <el-icon>
            <img :src="iconSrc" alt="">
          </el-icon>
        </div>
      </div>
    </div>
    <div class="itemView">
      <div class="chart-placeholder">
        <div ref="chartRef" class="chart-wrapper" style="width: 100%; height: 100%;"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, onUnmounted, watch } from 'vue';
import * as echarts from 'echarts';

// Props定义
const props = defineProps({
  title: {
    type: String,
    default: '平均效率'
  },
  type: {
    type: String,
    default: ''
  },
  value: {
    type: String,
    default: '2,456.8'
  },
  unit: {
    type: String,
    default: 'KWh'
  },
  growth: {
    type: String,
    default: ''
  },
  growthLabel: {
    type: String,
    default: ''
  },
  power: {
    type: Object,
    default: () => ({})
  },
  iconSrc: {
    type: String,
    default: ''
  },
  color: {
    type: String,
    default: ''
  },
  chartData: {
    type: Array,
    default: () => []
  },
  chartType: {
    type: String,
    default: ''
  }
});

// 柱状图相关
const chartRef = ref(null);
let chartInstance = null;

// 初始化柱状图
const initChart = () => {
  if (!chartRef.value || chartInstance) return;
  
  // 创建图表实例
  chartInstance = echarts.init(chartRef.value);
  
  // 配置项
  const option = {
    grid: {
      left: 0,
      right: 0,
      bottom: 0,
      top: 0,
    },
    xAxis: {
      type: 'category',
      data: Array.from({length: props.chartData.length}, (_, i) => i + 1),
      show: false // 不显示x轴
    },
    yAxis: {
      type: 'value',
      show: false // 不显示y轴
    },
    series: [{
      data: props.chartData,
      type: props.chartType,
      itemStyle: {
        color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
          {offset: 0, color: props.color},
          {offset: 1, color: props.color + '80'}
        ])
      },
      // 根据图表类型设置不同的配置
      ...(props.chartType === 'bar' ? {
        barWidth: '60%',
        barGap: 0,
        barCategoryGap: '20%'
      } : props.chartType === 'line' ? {
        smooth: true,
        symbol: 'none', // 取消拐点显示
        areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
              {offset: 0, color: props.color + '40'},
              {offset: 1, color: props.color + '20'}
            ])
          }
      } : {})
    }],
    tooltip: {
      show: true,
      trigger: 'axis',
      formatter: function(params) {
        return params[0].value + '%';
      }
    }
  };
  
  // 设置配置项
  chartInstance.setOption(option);
};

// 监听窗口大小变化，重绘图表
const handleResize = () => {
  if (chartInstance) {
    chartInstance.resize();
  }
};

// 监听图表数据变化
watch(() => props.chartData, () => {
  if (chartInstance) {
    chartInstance.setOption({
      xAxis: {
        data: Array.from({length: props.chartData.length}, (_, i) => i + 1)
      },
      series: [{
        data: props.chartData
      }]
    });
  }
});

// 监听图表类型和颜色变化
watch([() => props.chartType, () => props.chartColor], () => {
  if (chartInstance) {
    initChart();
  }
});

// 生命周期钩子
onMounted(() => {
  initChart();
  window.addEventListener('resize', handleResize);
});

onUnmounted(() => {
  if (chartInstance) {
    chartInstance.dispose();
    chartInstance = null;
  }
  window.removeEventListener('resize', handleResize);
});
</script>
<style scoped lang="scss">
/* itemBox样式 */
.item-box {
    background: white;
    border-radius: 12px;
    padding: 15px 25px  0 25px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.item-info {
    margin-bottom: 16px;
    position: relative;
}

.power-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.power-info {
    flex: 1;
}

.power-title {
    font-size: 16px;
    color: #999;
    margin-bottom: 8px;
}

.power-amount {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
}

.power-amount span {
    font-size: 16px;
    font-weight: normal;
    color: #666;
    margin-left: 4px;
}

.power-growth {
    display: flex;
    align-items: center;
    gap: 8px;
}

.power-icon {
    width: 33px;
    height: 55px;
    opacity: 1;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.growth-value {
    font-size: 14px;
    color: #13C2C2;
}

.growth-label {
    font-size: 12px;
    color: #999;
}

.itemView {
    position: relative;
    height: 80px;
}

.chart-placeholder {
    height: 100%;
}

/* echarts图表容器样式 */
.chart-wrapper {
    width: 100%;
    height: 100%;
}

/* 确保在小屏幕下也能良好显示 */
@media screen and (max-width: 1500px) {
    .item-box {
        padding: 12px 20px;
    }
    
    .power-title {
        font-size: 14px;
    }
    
    .power-amount {
        font-size: 20px;
    }
    
    .power-amount span {
        font-size: 14px;
    }
}
</style>