<template>
    <div class="_deviceList">
        <HeadlineTag value="设备列表" style="flex-shrink: 0;"></HeadlineTag>
        <div class="point_box" style="margin-top: 10px;">
            <el-input v-model="value" placeholder="按巡查点名称搜索" />
        </div>
        <div class="_deviceList_mains" ref="mainsRef" @mouseenter="pauseCarousel" @mouseleave="resumeCarousel">
            <div :style="{ transform: `translateY(${scrollY}px)` }">
                <div class="_deviceList_mains_item" v-for="(item, index) in eventList" :key="index">
                    <el-text class="w-150px mb-2 _table_row1" truncated style="color: white;flex: .4;">
                        <el-icon color="#168cdb">
                            <el-icon>
                                <Opportunity />
                            </el-icon>
                        </el-icon>
                        {{ item.DeviceName }}
                    </el-text>
                    <el-text class="w-150px mb-2" truncated style="color: white;flex: .2;">
                        {{ item.state == 0 ? '开启' : '关闭' }}
                    </el-text>
                    <el-text class="w-150px mb-2" truncated style="color: white;flex: .2">
                        {{ item.OnlinePresence == 0 ? '在线' : '离线' }}
                    </el-text>
                    <el-icon color="#168cdb" style="flex: .2;">
                        <el-icon>
                            <Aim />
                        </el-icon>
                    </el-icon>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from "vue";
import HeadlineTag from '@/components/HeadlineTag'
import { Opportunity, Aim } from '@element-plus/icons-vue'
const props = defineProps({
    resultData: {
        type: Array,
        default: []
    }
})

const value = ref('')
// const eventList = ref([
//     { name: '回路1', state: '开启', flag: '在线' },
//     { name: '回路2', state: '关闭', flag: '离线' },
//     { name: '回路3', state: '开启', flag: '在线' },
//     { name: '回路4', state: '关闭', flag: '离线' },
//     { name: '回路5', state: '开启', flag: '在线' },
//     { name: '回路6', state: '关闭', flag: '离线' },
//     { name: '回路7', state: '开启', flag: '在线' },
//     { name: '回路8', state: '关闭', flag: '离线' },
//     { name: '回路9', state: '开启', flag: '在线' },
//     { name: '回路10', state: '关闭', flag: '离线' },
//     { name: '回路11', state: '开启', flag: '在线' },
//     { name: '回路12', state: '关闭', flag: '离线' },
//     { name: '回路13', state: '开启', flag: '在线' },
//     { name: '回路14', state: '关闭', flag: '离线' },
//     { name: '回路15', state: '开启', flag: '在线' },
//     { name: '回路16', state: '关闭', flag: '离线' },
//     { name: '回路17', state: '开启', flag: '在线' },
//     { name: '回路18', state: '关闭', flag: '离线' },
//     { name: '回路19', state: '开启', flag: '在线' },
//     { name: '回路20', state: '关闭', flag: '离线' },
//     { name: '回路21', state: '开启', flag: '在线' },
//     { name: '回路22', state: '关闭', flag: '离线' },
//     { name: '回路23', state: '开启', flag: '在线' },
//     { name: '回路24', state: '关闭', flag: '离线' }
// ])

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('._deviceList_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;
        }
    }, 20);
};

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

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

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

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

<style lang="scss">
._deviceList {
    overflow: hidden;
    display: flex;
    flex-direction: column;

    &_mains {
        margin: 10px 30px;
        overflow: hidden; // 隐藏溢出内容
        cursor: pointer;

        &_item {
            display: flex;
            justify-content: space-between;
            padding: 10px;
        }

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

<style lang="scss" scoped>
.point_box {
    margin: 10px 30px;
}

.point_box :deep(.el-input__wrapper) {
    background-color: transparent !important;
    box-shadow: 0 0 0 1px rgb(58, 86, 117) inset !important;
}

.point_box :deep(.el-input__wrapper.is-focus) {
    box-shadow: 0 0 0 1px #409EFF inset !important;
}

.point_box :deep(.el-input__inner) {
    color: #ffffff !important;
}
</style>