<template>
    <div class="_eventList">
        <HeadlineTag value="监控列表" style="flex-shrink: 0;"></HeadlineTag>
        <div class="_eventList_mains" ref="mainsRef" @mouseenter="pauseCarousel" @mouseleave="resumeCarousel">
            <div :style="{ transform: `translateY(${scrollY}px)` }">
                <div class="_eventList_mains_item" v-for="(item, index) in eventList.concat(eventList)" :key="index">
                    <div class="_eventList_mains_item_text">
                        <div
                        :class="item.store === 'on' ? '_success' : '_warning'"
                        class="_eventList_mains_item_text_flag"></div>
                        <el-text class="w-150px mb-2" truncated style="color: white;margin-left: 10px;">
                            {{ item.name }}
                        </el-text>
                    </div>
                    <div class="_eventList_mains_item_btn">
                        <el-icon color="#44b0f9" size="18">
                            <Download />
                        </el-icon>
                        <el-icon color="#44b0f9" size="18">
                            <Bell />
                        </el-icon>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import HeadlineTag from '@/components/HeadlineTag'

const eventList = ref([{
    store: 'on',
    color: 'rgb(82.4, 155.2, 46.4)',
    name: '监控设备1',
    time: '2025-04-15 10:20:00'
}, {
    store: 'on',
    color: 'rgb(82.4, 155.2, 46.4)',
    name: '监控设备2',
    time: '2025-04-15 10:20:00'
}, {
    store: 'off',
    color: 'red',
    name: '监控设备3',
    time: '2025-04-15 10:20:00'
}, {
    store: 'on',
    color: 'rgb(82.4, 155.2, 46.4)',
    name: '监控设备4',
    time: '2025-04-15 10:20:00'
}, {
    store: 'off',
    color: 'red',
    name: '监控设备5',
    time: '2025-04-15 10:20:00'
}, {
    store: 'off',
    color: 'red',
    name: '监控设备6',
    time: '2025-04-15 10:20:00'
}, {
    store: 'on',
    color: 'rgb(82.4, 155.2, 46.4)',
    name: '监控设备7',
    time: '2025-04-15 10:20:00'
}, {
    store: 'off',
    color: 'red',
    name: '监控设备8',
    time: '2025-04-15 10:20:00'
}])

const mainsRef = ref(null)
const scrollY = ref(0)
let intervalId = null
const scrollSpeed = 1 // 滚动速度

const startCarousel = () => {
    intervalId = setInterval(() => {
        const itemHeight = mainsRef.value?.querySelector('._eventList_mains_item')?.offsetHeight;
        if (!itemHeight) return;

        scrollY.value -= scrollSpeed;

        // 检查第一个元素是否完全离开视口
        if (Math.abs(scrollY.value) >= itemHeight) {
            // 将第一个元素移到列表末尾
            const firstItem = eventList.value.shift();
            if (firstItem) {
                eventList.value.push(firstItem);
            }
            // 调整滚动位置
            scrollY.value += itemHeight;
        }
    }, 50);
};

const pauseCarousel = () => {
    clearInterval(intervalId);
};

const resumeCarousel = () => {
    startCarousel();
};

onMounted(() => {
    startCarousel();
});

onUnmounted(() => {
    clearInterval(intervalId);
});
</script>

<style lang="scss">
._success {
    background: #15acaa;	
}
._warning {
    background: #FFC107;	
}
._eventList {
    overflow: hidden;
    display: flex;
    flex-direction: column;

    &_mains {
        margin: 10px 30px;
        overflow: hidden; // 隐藏溢出内容
        // 鼠标移入时改变手势
        cursor: pointer;

        &_item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;

            &_text {
                display: flex;
                justify-content: space-between;
                align-items: center;
                &_flag {
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    margin-left: 10px; 
                }
                &_p {
                    margin-left: 10px;
                }
            }
            &_btn{
                color: red;
                display: flex;
                font-size: 14px;
                gap: 20px;
                &_item {
                    border-radius: 5px;
                    cursor: pointer;
                }
            }
        }
        &_item:nth-child(even){
            background: rgba($color: #168cdb, $alpha: .05);
        }
        &_item:hover {
            background-image: linear-gradient(to right, #168cdb, transparent); 
        }
    }
}
</style>