<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 " truncated
                        style="color: white;flex: .4;display: flex;align-items: center;">
                        <el-icon color="#168cdb" size="16">
                            <el-icon>
                                <Headset />
                            </el-icon>
                        </el-icon>
                        <span class="_table_row1">{{ item.DeviceName }}</span>
                    </el-text>
                    <el-text class="w-150px mb-2" :class="item.UseState == 1 ? '_success' : ''" truncated
                        style="color: #fff;flex: .2;">
                        {{ getUseState(item.UseState) }}
                    </el-text>
                    <el-text class="w-150px mb-2" :class="item.OnlineState == 1 ? '' : '_warning'" truncated
                        style="flex: .2;color: #fff;">
                        {{ getOnlineState(item.OnlineState) }}
                    </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 { Headset, 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([])
function getUseState(value) {
    let title = ''
    if (value == 0) {
        title = '空闲'
    } else {
        title = '播放'
    }
    return title
}
function getOnlineState(value) {
    let title = ''
    if (value == 0) {
        title = '离线'
    } else {
        title = '在线'
    }
    return title
}
const mainsRef = ref(null)
const scrollY = ref(0)
let intervalId = null
const scrollSpeed = 0.5 // 滚动速度

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();
};

watch(() => props.resultData, (newVal) => {
    if (newVal) {
        eventList.value = newVal
    }
}, { deep: true, immediate: true } // 开启深度监听
)

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

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

<style lang="scss" scoped>
._success {
    color: #168cdb !important;
}

._warning {
    color: rgb(244, 67, 54) !important;
}

._table_row1 {
    margin-left: 10px;
    text-emphasis: none;
    /* 新增样式让文本超出显示省略号 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

._deviceList {
    overflow: hidden;
    display: flex;
    flex-direction: column;

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

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

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

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