<template>
    <div class="_eventList">
        <!-- 绑定鼠标移入移出事件 -->
        <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" :key="index">
                    <div class="_eventList_mains_item_text">
                        <div :class="item.Name === 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.Name }}
                        </el-text>
                    </div>
                    <el-text class="w-150px mb-2" truncated style="color: white;">
                        {{ item.Location }}
                    </el-text>
                    <el-text class="w-150px mb-2" truncated style="color: white;">
                        {{ item.State == 0 ? '进入' : '离开' }}
                    </el-text>
                    <el-text class="w-150px mb-2" truncated style="color: white;">
                        {{ item.Date }}
                    </el-text>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
const props = defineProps({
    resultData: {
        type: Array,
        default: []
    }
})
// const eventList = ref([{
//     name: '张史蒂',
//     address: 'A栋1层东门',
//     direction: 0,
//     time: '2025-04-15 10:20:00'
// }, {
//     name: '张史蒂',
//     address: 'A栋1层东门',
//     direction: 1,
//     time: '2025-04-15 10:20:00'
// }, {
//     name: '张史蒂',
//     address: 'A栋1层东门',
//     direction: 1,
//     time: '2025-04-15 10:20:00'
// }, {
//     name: '张史蒂',
//     address: 'A栋1层东门',
//     direction: 0,
//     time: '2025-04-15 10:20:00'
// }, {
//     name: '张史蒂',
//     address: 'A栋1层东门',
//     direction: 0,
//     time: '2025-04-15 10:20:00'
// }, {
//     name: '张史蒂',
//     address: 'A栋1层东门',
//     direction: 1,
//     time: '2025-04-15 10:20:00'
// }, {
//     name: '张史蒂',
//     address: 'A栋1层东门',
//     direction: 1,
//     time: '2025-04-15 10:20:00'
// }, {
//     name: '张史蒂',
//     address: 'A栋1层东门',
//     direction: 0,
//     time: '2025-04-15 10:20:00'
// }])

const eventList = ref([])
watch(() => props.resultData, (newVal) => {
    if (newVal) {
        eventList.value = []
        eventList.value = newVal.VisitorsSwipeCards
    }
}, { 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
        }
    }, 50)
}

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

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

onMounted(async () => {
    await nextTick();
    startCarousel()
})

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

<style lang="scss" scoped>
._success {
    background: #15acaa;
}

._warning {
    background: #FFC107;
}

._eventList {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: calc(100% - 40px);

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