<template>
    <div class="cover">
    <div class="imgDiv" :style="{
        backgroundImage: `url(${danceInfo.who})`,
        backgroundPosition: `${img.x}px ${img.y}px` 
    }"></div>
    </div>
</template>

<script setup>
import { onMounted, ref } from "vue"
import kunkun from "./../assets/kunkun.png"
import cock from "./../assets/cock.png"

const whoDance = Math.random()

const danceInfo = ref({
    who: whoDance > 0.5 ? kunkun : cock,
    r: whoDance > 0.5 ? 5 : 5,
    l: whoDance > 0.5 ? 6 : 4
})

const img = ref({
    x: 0,
    y: 0
})

const obj = {
    r: 0,
    l: 0
}
function dance(r, l, p) {
    setInterval(()=>{
        img.value.x = obj.r * p
        img.value.y = obj.l * p
        if(obj.r < r) {
            obj.r++
            if(obj.r === r) {
                obj.l++
                obj.r = 0
                if(obj.l === l) {
                    obj.l = 0
                }
            }

        }
    }, 100)
}
onMounted(()=>{
    dance(danceInfo.value.r, danceInfo.value.l, -768)
})

</script>

<style scoped>
.cover {
    width:75px;
    height:75px;
    overflow:hidden;
    float:left;
    transform: scale(1);
}
.imgDiv {
    height: 768px;
    width: 768px;
    background-repeat: no-repeat;
    transform: scale(0.1) translate(-450%, -450%);
}
</style>