<template>
    <div class="container">
        <ul :style="{ width: `${list.length * 1920}px` }">
            <li v-for="(item, index) in list"
                :style="{ 'background-color': item.color, transform: `translateX(-${i * 1920}px)` }"
                 :key="index"
                 >
                <component :is="item.components()" v-model="socketMsg" :label="item.label" v-if="hash.includes(index)"></component>
            </li>
        </ul>
    </div>
</template>

<script setup lang='ts'>
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance, watch, onUpdated, computed,defineAsyncComponent } from 'vue'
import { connectWebsocket, closeWebsocket } from "@/utils/websocket"
const Germanyindex = defineAsyncComponent(() =>
  import('@/views/Exhibition/Germany/index.vue')
);
const Germanychild = defineAsyncComponent(() =>
  import('@/views/Exhibition/Germany/child.vue')
);
let i = ref(0)
let hash = [0]
let socketMsg = ref({})
let timer = null
let time = 60000
watch(i, (val) => {    
    if (val < 0) {
        i.value = 0
    }
    if (val > list.length - 1) {
        i.value = list.length - 1
    }
    if (!hash.includes(i.value)) {
        hash.push(i.value)
    }
})
let list = reactive([
    { color: '', components: () =>  Germanyindex, label: ''},
    { color: '', components: () =>  Germanychild, label: 'child1'},
    { color: '', components: () =>  Germanychild, label: 'child2'},
    { color: '', components: () =>  Germanychild, label: 'child3'},
])
function getWebsocket(val) {
    try {
        let data = JSON.parse(val)

        socketMsg.value = data
        // if (data.type == 'SwitchBigScreen') {
        //     i.value = data.msg
        // }

    } catch (err) {
        console.log(err);
    }

}
function errWebsocket(val) {
    // console.log(val);
}
onMounted(() => {
    setInterval(() => {
        i.value++
        if (i.value > list.length - 1) {
            i.value = 0
        }
    }, time)
    connectWebsocket(null, null, getWebsocket, errWebsocket)
})
onUnmounted(() => {
    clearInterval(timer)
    closeWebsocket()

})
</script>

<style scoped>
.container {
    width: 1920px;
    height: 1080px;
    list-style: none;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

ul {
    height: 100%;
    display: flex;
}

li {
    width: 1920px;
    height: 100%;
    /* transition: all 0.5s; */
}
</style>
