<template>
    <div class="_eventList">
        <HeadlineTag type="right" 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.DeviceStatus === 0 ? '_success' : '_warning'"
                            class="_eventList_mains_item_text_flag"></div>
                        <el-text class="w-150px mb-2" truncated style="color: white;margin-left: 10px;">
                            {{ item.DeviceName }}
                        </el-text>
                    </div>
                    <el-text class="w-150px mb-2" truncated style="color: white;">
                        {{ item.EventDate }}
                    </el-text>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import HeadlineTag from '@/components/HeadlineTag'
const props = defineProps({
    resultData: {
        type: Array,
        default: []
    }
})
// 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 eventList = ref([])
watch(() => props.resultData, (newVal) => {
    if (newVal) {
        eventList.value = []
        eventList.value = newVal
    }
}, { deep: true, immediate: true } // 开启深度监听
)
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
        scrollY.value -= scrollSpeed
        if (Math.abs(scrollY.value) >= itemHeight * eventList.value.length) {
            scrollY.value = 0
        }
    }, 20)
}

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

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

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

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

<style lang="scss" scoped>
._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;
                }
            }
        }

        &_item:hover {
            background-image: linear-gradient(to right, #168cdb, transparent);
        }
    }
}
</style>