<template>
    <div class="chart-container">
        <!--系统效率与日照强度 图表内容区域 -->
        <div ref="chartRef" class="chart-content"></div>
    </div>
</template>

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

// 接收从父组件传入的数据
const props = defineProps({
  riZhaoData: {
    type: Object,
    default: () => ({
      xAxis: [],
      systemEfficiency: [],
      solarIrradiance: []
    })
  }
});

// 图表DOM引用
const chartRef = ref(null);
// 图表实例
let chartInstance = null;

// 定义颜色常量
const SYSTEM_EFFICIENCY_COLOR = '#FFD700'; // 黄色 - 系统效率
const SOLAR_IRRADIANCE_COLOR = '#1890FF'; // 蓝色 - 日照强度

// 初始化图表
const initChart = () => {
    if (chartRef.value && !chartInstance) {
        chartInstance = echarts.init(chartRef.value);
    }

    // 使用传入的数据，如果不存在则使用默认数据
    const { xAxis, systemEfficiency, solarIrradiance } = props.riZhaoData;

    const option = {
        title: {
            text: '系统效率与日照强度',
            top: 5,
            align: 'left',
            textStyle: {
                color: '#111111',
                fontWeight: 'bold',
                fontSize: 16,
            },
        },
        tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(255,255,255,1)',
            borderColor: '#ddd',
            borderWidth: 1,
            textStyle: {
                color: '#333',
                fontSize: 14
            },
            formatter: function(params) {
                const systemEfficiency = params[0].value;
                const solarIrradiance = params[1].value;
                return `
                    <div style="padding: 5px;">
                        <div style="color: ${params[0].color};">系统效率: ${systemEfficiency}%</div>
                        <div style="color: ${params[1].color};">日照强度: ${solarIrradiance}</div>
                    </div>
                `;
            }
        },
        legend: {
            top: 30,
            left: 'center',
            itemWidth: 10,
            itemHeight: 10,
            itemGap: 25,
            data: ['系统效率', '日照强度'],
            textStyle: {
                color: '#666',
                fontSize: 12
            }
        },
        grid: {
            top: '30%',
            right: '10%',
            bottom: '10%',
            left: '6%',
            containLabel: true
        },
        xAxis: {
            data: xAxis,
            type: 'category',
            boundaryGap: true,
            axisLabel: {
                textStyle: {
                    color: '#666',
                    fontSize: 12
                }
            },
            axisTick: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#ddd'
                }
            }
        },
        yAxis: [
            {
                type: 'value',
                name: '系统效率(%)',
                nameTextStyle: {
                    color: '#666',
                    fontSize: 12
                },
                min: 0,
                max: 20,
                interval: 5,
                axisLabel: {
                    textStyle: {
                        color: '#666',
                        fontSize: 12
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                splitLine: {
                    lineStyle: {
                        color: '#f0f0f0',
                        type: 'dashed'
                    }
                }
            },
            {
                type: 'value',
                name: '日照强度',
                nameTextStyle: {
                    color: '#666',
                    fontSize: 12
                },
                min: 0,
                max: 800,
                interval: 200,
                axisLabel: {
                    textStyle: {
                        color: '#666',
                        fontSize: 12
                    }
                },
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                splitLine: {
                    show: false
                }
            }
        ],
        series: [
            {
                name: '系统效率',
                type: 'line',
                smooth: true,
                showSymbol: false,
                symbol: 'circle',
                symbolSize: 6,
                emphasis: {
                    showSymbol: true,
                    symbolSize: 10
                },
                yAxisIndex: 0,
                lineStyle: {
                    width: 2,
                    color: SYSTEM_EFFICIENCY_COLOR
                },
                itemStyle: {
                    color: SYSTEM_EFFICIENCY_COLOR,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                data: systemEfficiency
            },
            {
                name: '日照强度',
                type: 'bar',
                yAxisIndex: 1,
                barWidth: '40%',
                itemStyle: {
                    color: SOLAR_IRRADIANCE_COLOR
                },
                data: solarIrradiance
            }
        ]
    };

    chartInstance.setOption(option);
};

// 响应窗口大小变化
const handleResize = () => {
    if (chartInstance) {
        chartInstance.resize();
    }
};

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

    // 清理函数
    return () => {
        window.removeEventListener('resize', handleResize);
        if (chartInstance) {
            chartInstance.dispose();
            chartInstance = null;
        }
    };
});

</script>

<style scoped>
.chart-container {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    height: 400px;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

.chart-content {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .chart-container {
        height: 350px;
    }
}

@media (max-width: 480px) {
    .chart-container {
        height: 300px;
    }
}
</style>