<template>
    <div class="score-card">
        <v-card v-if="players.length" elevation="5">
            <template v-slot:prepend>
                <v-icon size="25px">mdi-medal</v-icon>
            </template>
            <template v-slot:title>
                <div class="text-h6">积分榜单</div>
            </template>
            <v-infinite-scroll mode="manual" @load="load">
                <v-list>
                    <v-list-item v-for="(player, index) in players" :key="index" :value="players"
                        @click="goto_space(player.player_id)">
                        <template v-slot:default>
                            <div class="d-flex justify-space-between align-center game-item">
                                <div>
                                    <v-avatar size="48px"><img :src="player.avatar" class="avatar-img"></v-avatar>
                                </div>
                                <div class="realname-text">{{ player.realname }}</div>
                                <div class="winrate-text">{{ player.winrate }}%</div>
                                <div class="name-score">{{ player.games }}场</div>
                                <div class="date-text">{{ player.point }}分</div>
                                <v-icon>mdi-chevron-right</v-icon>
                            </div>
                        </template>
                    </v-list-item>
                </v-list>
            </v-infinite-scroll>
        </v-card>
    </div>



</template>

<script setup>
import { ref } from 'vue';
// import { reactive } from 'vue';
// import { computed } from 'vue';
import axios from 'axios';

const players = ref(new Array());
const pages = ref(1);

function refresh() {
    axios.get("/api/players", {
        params: {
            pages: pages.value,
        }
    })
        .then(function (response) {
            const data1 = response.data;
            // players.value.length = 0;
            for (var i = 0; i < data1.Players.length; i++) {
                var player = {
                    number: i + 1,
                    player_id: data1.Players[i].player_id,
                    realname: data1.Players[i].player_real_name,
                    games: data1.Players[i].total_games,
                    point: data1.Players[i].score,
                    winrate: data1.Players[i].winrate,
                    avatar: data1.Players[i].player_profile_file,
                }
                players.value.push(player);
            }
        })
        .catch(function (error) {
            console.log(error);
        })
}

refresh();

function goto_space(my_id) {
    window.location.href = '/space.html?myid=' + my_id;
}

async function api() {
    pages.value += 1;
    refresh();
    return players.value
}

async function load({ done }) {
    const res = await api();
    // console.log(res)
    // players.value.push(res);
    done('ok')
    done('empty')
}

</script>

<style>
.score-card {
    /* margin-top: 10px; */
    margin: auto;
    /* margin-top: 10px; */
    padding-top: 10px;
    width: 95%;
}

.avatar-img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.date-text {
    font-size: small;
    color: grey;
    text-align: center;
    padding-left: 7px;
    padding-right: 7px;
}

.realname-text {
    font-size: large;
    font-weight: bold;
    width: 72px;
    text-align: center;
}

.winrate-text {
    font-family: 'Times New Roman';
    width: 40px;
    text-align: center;
}

.name-score {
    width: 20%;
    text-align: center;
    margin-left: 5px;
    margin-right: 5px;
    /* line-height: 33px; */
}
</style>