<template>
    <div>
        <!-- 抽奖用户 列表 -->
        <div v-for="item in state.list" :key="item.id" style="display: inline-block;padding:20px">
            <div style="display: inline-block;text-align: center;">
                <div>
                    {{ item.name }}
                </div>
                <div>
                    <a-avatar :size="{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }">
                        <template #icon>
                            <img :src="item.img">
                        </template>
                    </a-avatar>
                </div>
            </div>
        </div>
        <!-- 抽奖用户 随机旋转的用户-->
        <!-- 0.5s 游戏开始不断轮播用户头像  -->
        <div style="display: flex;justify-content: center;align-items: center;margin-top:50px"
            v-if="state.gameStatus !== 'init'">
            <div style="display: inline-block;text-align: center;">

                <a-card hoverable style="width: 240px">
                    <template #cover>
                        <img :src="state.currentPerson?.img">
                    </template>
                    <a-card-meta :title="state.currentPerson?.name">
                        <template #description>抽奖中 角色id:{{ state.currentPerson?.id }} </template>
                    </a-card-meta>
                </a-card>

            </div>
        </div>
        <!-- 中奖结束弹框 -->
        <a-modal v-model:open="state.openModal" title="恭喜你中奖" :footer="null" @afterClose="afterCloseModal">
            <p>中奖用户名称：{{ state.currentPerson?.name }}</p>
            <p>中奖用户id：{{ state.currentPerson?.id }}</p>
            <p><img :src="state.currentPerson?.img"></p>
        </a-modal>

        <!-- 开始游戏按钮 -->
        <div style="position:absolute;bottom:50px;text-align: center;width:100%">
            <a-button type="primary" @click="startGameBtn" v-if="state.gameStatus === 'init'">开始抽奖</a-button>
            <a-button type="primary" disabled v-if="state.gameStatus === 'run'">进行中</a-button>
            <a-button type="primary" @click="restartGameBtn" v-if="state.gameStatus === 'end'">重新开始</a-button>
        </div>


    </div>
</template>

<script setup>
import { reactive, onMounted } from 'vue'

const state = reactive({
    list: [],
    currentPerson: {
        name: '',
        img: '',
        id: ''
    },
    gameStatus: 'init',// init 初始化 状态  run 运行 状态 end 结束状态
    count: 100,
    displayCount: 0,
    openModal: false
})

// mock 用户数据
const mockUserData = (n) => {
    let data = []
    for (let i = 0; i < n; ++i) {
        data.push({
            img: `https://t.mwm.moe/pc/?ts=${i+9}`,// 随机头像
            name: '角色' + i,
            id: i
        })
    }
    state.list = data
    console.log(state.list)
}

// 延时 delay
const sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay))

// 开始抽奖
const startGameBtn = async () => {

    let n = state.count
    while (n--) {
        state.displayCount = n
        await sleep(20)
        const max = state.list.length - 1;
        const min = 0;
        const randomIndex = Math.floor(Math.random() * (max - min)) + min;
        state.currentPerson = state.list[randomIndex]
        console.log('randomIndex', randomIndex)
        console.log('state.currentPerson', state.currentPerson)
        state.gameStatus = 'run'
    }
    state.gameStatus = 'end'
    state.openModal = true
}

const afterCloseModal = () => {
    state.openModal = false
}

// 重新开始抽奖
const restartGameBtn = () => {
    startGameBtn()
}
onMounted(() => {
    mockUserData(26)
})
</script>