<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';



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

// 初始化图表
const initChart = () => {
    if (chartRef.value && !chartInstance) {
        chartInstance = echarts.init(chartRef.value);
    }
    const option = {
        xAxis: {
            type: "category",
            data: ["09-04", "09-05", "09-06", "09-07", "09-08", "09-09", "09-10"],
            axisTick: {
                show: false // 去除刻度线
            }
        },
        yAxis: {
            type: "value",
            splitLine: {
                lineStyle: {
                    color: '#f0f0f0',
                    type: 'dashed'
                }
            }
        },
        legend: {
            show: true,
            icon: 'square',
            left: '2%',
            itemWidth: 10,
            itemHeight: 10,
            itemAlign: 'middle', // 设置图例项垂直居中
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        series: [
            {
                name: "维护提醒",
                data: [120, 200, 150, 80, 70, 110, 130],
                type: "bar",
                itemStyle: {
                    color: "rgb(0, 179, 255)",
                },
            },
            {
                name: "数据异常",
                data: [80, 170, 100, 50, 90, 140, 170],
                type: "bar",
                itemStyle: {
                    color: "rgb(22, 93, 255)",
                },
            },
            {
                name: "信号减弱",
                data: [60, 140, 100, 120, 110, 100, 130],
                type: "bar",
                itemStyle: {
                    color: "rgb(255, 153, 0)",
                },
            },
            {
                name: "温度过高",
                data: [60, 140, 100, 120, 110, 100, 130],
                type: "bar",
                itemStyle: {
                    color: "rgb(250, 220, 25)",
                },
            },
            {
                name: "通讯中断",
                data: [60, 140, 100, 120, 110, 100, 130],
                type: "bar",
                itemStyle: {
                    color: "rgb(251, 62, 122)",
                }
            }
        ],
    };

    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-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>
