<template>
    <div class="chart-container">
        <!--组件温度（℃）  图表内容区域 -->
        <div ref="chartRef" class="chart-content"></div>
    </div>
</template>

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

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

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

// 定义颜色常量
const ACTUAL_COLOR = '#FF5733';
const THEORETICAL_COLOR = '#FF8D1A';

// 十六进制颜色转rgba工具函数
const hexToRgba = (hex, opacity) => {
  // 移除#号
  hex = hex.replace('#', '');
  
  // 解析RGB值
  const r = parseInt(hex.substring(0, 2), 16);
  const g = parseInt(hex.substring(2, 4), 16);
  const b = parseInt(hex.substring(4, 6), 16);
  
  return `rgba(${r}, ${g}, ${b}, ${opacity})`;
};
// 初始化图表
const initChart = () => {
    if (chartRef.value && !chartInstance) {
        chartInstance = echarts.init(chartRef.value);
    }

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

    const option = {
        title: {
            text: '组件温度（℃）',
            top: 5,
            textStyle: {
                color: '#111111', // 标题颜色
                fontWeight: 'bold',
                fontSize: 16,
            },
        },
        tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(33,56,77,1)',
            borderColor: 'rgba(33,56,77,1)',
            textStyle: {
                color: '#fff',
                fontSize: 14
            }
        },
        legend: {
            right: '5%',
            top: 4,
            itemWidth: 10,
            itemHeight: 10,
            itemGap: 25,
            icon: 'stack',
            data: ['组件温度', '环境温度']
        },
        grid: {
            top: '20%',
            right: '4%',
            bottom: '4%',
            left: '6%',
            containLabel: true
        },
        xAxis: {
            data: xAxis,
            type: 'category',
            boundaryGap: true,
            axisLabel: {
                textStyle: {
                    color: '#3E4954',
                    fontSize: 12
                }
            },
            axisTick: {
                show: false // 去除刻度线
            },
        },
        yAxis: 
            {
                type: 'value',
                min: 0,
                max: 50,
                axisLabel: {
                    formatter: '{value} ℃',
                    textStyle: {
                        color: '#3E4954',
                        fontSize: 12
                    }
                },
                axisTick: {
                    show: false // 去除刻度线
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#f0f0f0',
                        type: 'dashed'
                    }
                }
            },
        series: [
            {
                name: '组件温度',
                type: 'line',
                 smooth: true,
                showSymbol: false, // 取消点显示
                lineStyle: {
                    width: 4,       // 线条宽度，单位是 px
                    color: ACTUAL_COLOR
                },
                // 填充颜色设置
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                            {
                                offset: 0,
                                color: hexToRgba(ACTUAL_COLOR, 0.4) // 使用ACTUAL_COLOR并设置透明度
                            },
                            {
                                offset: 0.9,
                                color: hexToRgba(ACTUAL_COLOR, 0) // 使用ACTUAL_COLOR并设置透明度为0
                            }
                        ],
                        false
                    ),
                    shadowColor: 'rgba(0, 0, 0, 0.1)'
                },
                // 设置拐点颜色以及边框
                itemStyle: {
                    color: ACTUAL_COLOR
                },
                data: componentTemp
            },
            {
                name: '环境温度',
                type: 'line',
                 smooth: true,
                showSymbol: false, // 取消点显示
                lineStyle: {
                    width: 4,       // 线条宽度，单位是 px
                    color: THEORETICAL_COLOR
                },
                // 填充颜色设置
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                            {
                                offset: 0,
                                color: hexToRgba(THEORETICAL_COLOR, 0.4) // 使用THEORETICAL_COLOR并设置透明度
                            },
                            {
                                offset: 0.9,
                                color: hexToRgba(THEORETICAL_COLOR, 0) // 使用THEORETICAL_COLOR并设置透明度为0
                            }
                        ],
                        false
                    ),
                    shadowColor: 'rgba(0, 0, 0, 0.1)'
                },
                itemStyle: {
                    color: THEORETICAL_COLOR
                },
                data: ambientTemp
            }
        ]
    };

    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-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
}

.chart-header h2 {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.chart-actions button {
    background: none;
    border: 1px solid #e0e0e0;
    padding: 5px 12px;
    border-radius: 4px;
    margin-left: 8px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.2s ease;
}

.chart-actions button.active {
    background-color: #1890ff;
    color: white;
    border-color: #1890ff;
}

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

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

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

    .chart-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .chart-actions {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    .chart-actions button {
        margin: 0;
        flex: 1;
        margin-right: 5px;
    }

    .chart-actions button:last-child {
        margin-right: 0;
    }
}

.model {
    padding: 20px;
    background-color: rgba(242, 248, 252, 1);
}
</style>
