<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="_eventList_mains_item_text_flag">
                            <!-- <el-icon color="#168cdb" :size="20">
                                <Monitor/>
                            </el-icon> -->
                        </div>
                        <el-text class="w-150px mb-2" truncated style="color: #fff;">
                            {{ index + 1 }}F#{{ item.DeviceName }}
                        </el-text>
                    </div>
                    <div class="_xian" :class="item.UseState == 0 ? '_success' : '_warning'">{{ item.UseState == 0 ?
                        '播放' : '空闲' }}</div>
                    <div class="_eventList_mains_item_btn">
                        <div class="_eventList_mains_item_btn_plays">播放</div>
                        <div class="_eventList_mains_item_btn_plays">暂停</div>
                    </div>
                </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: '栋显示大屏',
//     time: '2025-04-15 10:20:00'
// }, {
//     store: 'on',
//     color: 'rgb(82.4, 155.2, 46.4)',
//     name: '栋显示大屏',
//     time: '2025-04-15 10:20:00'
// }, {
//     store: 'off',
//     color: 'red',
//     name: '栋显示大屏',
//     time: '2025-04-15 10:20:00'
// }, {
//     store: 'on',
//     color: 'rgb(82.4, 155.2, 46.4)',
//     name: '栋显示大屏',
//     time: '2025-04-15 10:20:00'
// }, {
//     store: 'off',
//     color: 'red',
//     name: '栋显示大屏',
//     time: '2025-04-15 10:20:00'
// }, {
//     store: 'off',
//     color: 'red',
//     name: '栋显示大屏',
//     time: '2025-04-15 10:20:00'
// }, {
//     store: 'on',
//     color: 'rgb(82.4, 155.2, 46.4)',
//     name: '栋显示大屏',
//     time: '2025-04-15 10:20:00'
// }, {
//     store: 'off',
//     color: 'red',
//     name: '栋显示大屏',
//     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;
        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" scoped>
._success {
    color: #15acaa !important;
}

._warning {
    color: #FFC107 !important;
}

._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;
                max-width: 50%;
                text-emphasis: none;
                /* 新增样式让文本超出显示省略号 */
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;

                &_flag {
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    margin-left: 10px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    margin-right: 10px;
                    background: #168cdb;
                }

                &_p {
                    margin-left: 10px;
                }
            }

            &_btn {
                color: #fff;
                display: flex;
                font-size: 14px;
                gap: 10px;

                &_plays {
                    border-radius: 5px;
                    cursor: pointer;
                    border: 2px solid #2ea9d8;
                    background: #1970c3;
                    color: #fff;
                    padding: 0 5px;
                }
            }
        }

        &_item:nth-child(even) {
            background: rgba($color: #168cdb, $alpha: .05);
        }

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

._xian {
    font-size: 12px;
}
</style>