<template>
    <div id="home-screen-wrapper">
        <div class="ceshi">
            <img id="imgs" src="" width="100%">
        </div>
    </div>
</template>

<script lang="ts" setup>
import { time } from 'console';
import { ref, onMounted } from 'vue';

const aniImgs: any = ref([]);
const timer: any = ref();
const imgs: any = ref();
const index = ref(0)

onMounted(() => {
    imgs.value = document.getElementById('imgs');
    // for (let i = 0; i <= 79; i++) {
    //     aniImgs.value.push(`/src/assets/imgs/home-screen/切图-关机时循环_000${i < 10? '0' + i: i}`);
    // }
    run();
    console.log(aniImgs.value);
})

const run = () => {
    // 清除定时器
    if (timer.value) {
        clearInterval(timer.value);
        timer.value = null;
    }
    change();
    timer.value = setInterval(() => {
        index.value++;
        if (index.value > 79) {
            index.value = 0;
        }
        change();
    }, 1000 / 24);
}

const change = () => {
    if (imgs.value) {
        imgs.value.src = `/src/assets/imgs/home-screen/切图-关机时循环_000${index.value < 10? '0' + index.value: index.value}.png`;
    }
}
</script>

<style lang="scss" scoped>
#home-screen-wrapper {
    width: 100vh;
    height: 100vh;
    background: rgb(15, 188, 102);

    .ceshi {
        width: 100vw;
    }

    #imgs {
        width: 100%;
    }
}</style>