lauched_games.vue

<template>
    <v-app>
        <v-data-table-server :headers="headers" :items="filteredMatches" item-key="id" :search="search"
            v-model:items-per-page="itemsPerPage" @update:options="loadGames" :items-length="totalGames"
            :loading="loading">
            <template v-slot:top>
                <v-toolbar flat>
                    <v-toolbar-title>比赛</v-toolbar-title>
                    <v-divider class="mx-4" inset vertical></v-divider>
                    <v-spacer></v-spacer>
                    <v-text-field v-model="search" append-icon="mdi-magnify" label="搜索" single-line
                        hide-details></v-text-field>
                </v-toolbar>
            </template>
            <template v-slot:item.date="{ item }">
                <p style="width:60px">{{ item.date }}</p>
            </template>
            <template v-slot:item.name="{ item }">
                <p style="width:120px">{{ item.username }} VS {{ item.opponentname }}</p>
            </template>
            <template v-slot:item.score="{ item }">
                <p style="width:30px">{{ item.userScore }} - {{ item.opponentScore }}</p>
            </template>
            <template v-slot:item.verified="{ item }">
                <div style="width:80px"><v-icon v-if="item.verified === 'WAITING'" color="blue">mdi-help-circle</v-icon>
                    <v-icon v-else-if="item.verified === 'PASSED'" color="green">mdi-check-circle</v-icon>
                    <v-icon v-else-if="item.verified === 'REJECT'" color="red">mdi-close-circle</v-icon>
                </div>
            </template>
        </v-data-table-server>
    </v-app>
</template>

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

const search = ref('');

const headers = reactive([
    { title: '日期', key: 'date', sortable: false },
    { title: '比赛', key: 'name', sortable: false },
    { title: '比分', key: 'score', sortable: false },
    { title: '审核状态', key: 'verified' },
]);
const matches = ref(new Array());
const loading = ref(true);
const totalGames = ref(0);
const itemsPerPage = ref(5);
// matches = [
//     { id: 1, username: '张三', opponentname: '零', userScore: 3, opponentScore: 2, verified: "PASSED" },
// ];

const filteredMatches = computed(() => {
    // return matches.value
    return matches.value.filter(match =>
        match.username.includes(search.value) ||
        match.opponentname.includes(search.value) ||
        match.userScore === parseInt(search.value) ||
        match.opponentScore === parseInt(search.value)
    );
})

function loadGames({ page, itemsPerPage }) {
    axios.get('/api/myLauchedGames',{
        params:{
            pages: page,
            lim: itemsPerPage,
        }
    })
        .then(function (response) {
            loading.value = true;
            const data = response.data;
            totalGames.value = data.totalGames;
            matches.value.length = 0; 
            for (var i = 0; i < data.Games.length; i++) {
                // matches.value[i].id = i+1;
                var match = {
                    id: data.Games[i].id,
                    date: data.Games[i].game_date,
                    username: data.Games[i].player1_real_name,
                    opponentname: data.Games[i].player2_real_name,
                    userScore: data.Games[i].score1,
                    opponentScore: data.Games[i].score2,
                    verified: data.Games[i].status,
                }
                matches.value[i] = match;
            }
            loading.value = false;
        })
        .catch(function (error) {
            console.log(error);
        })
}


</script>