<template>
    <div class="warning-container">
        <!-- 标题区域 -->
        <h2 class="main-title">异常参数预警</h2>

        <!-- 预警列表容器，设置最大高度和滚动 -->
        <div class="warning-list">
            <!-- 循环渲染预警项 -->
            <div v-for="(warning, index) in warnings" :key="index"
                :class="['warning-item', getWarningClass(warning.type)]">
                <!-- 预警图标 -->
                <el-icon :class="getIconClass(warning.type)">
                    <template v-if="warning.type === 'error'">
                        <CircleCloseFilled />
                    </template>
                    <template v-if="warning.type === 'warning'">
                        <WarningFilled />
                    </template>
                    <template v-if="warning.type === 'info'">
                        <Odometer />
                    </template>
                </el-icon>

                <!-- 预警内容 -->
                <div class="warning-content">
                    <div :class="['warning-title', getTitleClass(warning.type)]">{{ warning.title }}</div>
                    <div class="warning-time">{{ warning.time }}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import { CircleCloseFilled, InfoFilled, WarningFilled, Odometer } from '@element-plus/icons-vue';

// 接收从父组件传入的数据
const props = defineProps({
  warningData: {
    type: Array,
    default: () => [
      {
        type: 'error',
        title: '无',
        time: '无'
      }
    ]
  }
});

// 使用传入的预警数据
const warnings = ref(props.warningData);

// 根据预警类型获取样式类
const getWarningClass = (type) => {
    return `warning-${type}`;
};

// 根据预警类型获取图标样式类
const getIconClass = (type) => {
    return `${type}-icon`;
};

// 根据预警类型获取标题样式类，确保标题颜色与图标一致
const getTitleClass = (type) => {
    return `${type}-title`;
};

// 监听窗口大小变化，调整组件高度
let resizeObserver = null;

onMounted(() => {
    // 设置响应式高度
    const setResponsiveHeight = () => {
        const warningContainer = document.querySelector('.warning-container');
        const screenWidth = window.innerWidth;
        let maxHeight = 400; // 默认高度，与line1组件一致

        if (screenWidth <= 768) {
            maxHeight = 350;
        }
        if (screenWidth <= 480) {
            maxHeight = 300;
        }

        if (warningContainer) {
            warningContainer.style.height = `${maxHeight}px`;
        }
    };

    // 初始设置
    setResponsiveHeight();

    // 创建ResizeObserver监听窗口大小变化
    if (window.ResizeObserver) {
        resizeObserver = new ResizeObserver(setResponsiveHeight);
        resizeObserver.observe(document.documentElement);
    } else {
        // 降级方案：使用窗口resize事件
        window.addEventListener('resize', setResponsiveHeight);
    }
});

onUnmounted(() => {
    // 清理监听器，避免内存泄漏
    if (resizeObserver) {
        resizeObserver.disconnect();
    } else {
        window.removeEventListener('resize', () => { });
    }
});
</script>

<style scoped>
.warning-container {
    height: 400px;
    /* 与line1组件一致的高度 */
    display: flex;
    flex-direction: column;
    padding: 20px;
    box-sizing: border-box;
}

.main-title {
    color: '#111111';
    font-weight:bold;
    font-size: 16px;
    margin-bottom: 20px;


}

.warning-list {
    overflow-y: auto;
    padding-right: 10px;
    /* 为滚动条预留空间 */
    flex: 1;
}

/* 滚动条样式优化 */
.warning-list::-webkit-scrollbar {
    width: 6px;
}

.warning-list::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.warning-list::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

.warning-list::-webkit-scrollbar-thumb:hover {
    background: #aaa;
}

/* 响应式设计 - 与line1组件保持一致 */
@media (max-width: 768px) {
    .warning-container {
        height: 350px;
    }
}

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

.warning-item {
    display: flex;
    align-items: center;
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 12px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease;
}

.warning-item:hover {
    transform: translateY(-2px);
}

/* 不同类型预警的背景色 */
.warning-error {
    background-color: #fff1f0;
}

.warning-warning {
    background-color: #fffbe6;
}

.warning-info {
    background-color: #e6f7ff;
}

/* 图标和标题颜色保持一致 */
.error-icon,
.error-title {
    color: #f5222d !important;
    /* 红色，使用 !important 确保优先级 */
}

.warning-icon,
.warning-title {
    color: #faad14;
}

.info-icon,
.info-title {
    color: #00BAAD;
}

/* 图标通用样式 */
.el-icon {
    font-size: 20px;
    margin-right: 12px;
}

.warning-content {
    flex: 1;
}

.warning-content .warning-title {
    font-size: 16px;
    margin-bottom: 4px;
    font-weight: bold;
    /* 颜色由动态类名（如.error-title）控制，不设置固定颜色 */
}

.warning-content .warning-time {
    font-size: 14px;
    color: #666;
}
</style>