past_seasons.vue

<template>
    <v-app>
        <v-data-table-server :headers="headers" v-model:items-per-page="itemsPerPage" :items="filteredMatches"
            item-key="id" :search="search" :items-length="totalGames" @update:options="loadGames" :loading="loading">
            <template v-slot:top>
                <v-toolbar flat>
                    <v-toolbar-title>过往赛季</v-toolbar-title>
                    <v-divider class="mx-3" 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>
                <div class="d-flex justify-space-around align-center" style="height: 60px;">
                    <div>
                        <v-autocomplete style="width: 150px;" variant="underlined" v-model="selectSeason" :items="arr"
                        label="选择赛季"></v-autocomplete>
                    </div>
                    <div>
                        <v-btn color="indigo" style="width: 80px;" text="确定"></v-btn>
                    </div>
                    
                </div>
            </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.homeTeam }} VS {{ item.awayTeam }}</p>
            </template>
            <template v-slot:item.score="{ item }">
                <p style="width:30px">{{ item.homeScore }} - {{ item.awayScore }}</p>
            </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 itemsPerPage = ref(5);
const totalGames = ref(0);
const loading = ref(true);
const selectSeason = ref(null);
const arr = ref(new Array());

const headers = reactive([
    { title: '日期', key: 'date', sortable: false },
    { title: '比赛', key: 'name', sortable: false },
    { title: '比分', key: 'score', sortable: false },
]);
const matches = ref(new Array());

const filteredMatches = computed(() => {
    // return matches.value
    return matches.value.filter(match =>
        match.homeTeam.includes(search.value) ||
        match.awayTeam.includes(search.value) ||
        match.homeScore === parseInt(search.value) ||
        match.awayScore === parseInt(search.value) ||
        match.date.includes(search.value)
    );
})

axios.get('/api/seasonInfo')
  .then(function (response) {
    const data = response.data;
    for (var i = 0; i < data.Seasons.length; i++) {
      arr.value[i] = data.Seasons[i].season_id.toString() + '-' + data.Seasons[i].season_name;
    }
  })
  .catch(function (error) {
    console.log(error);
  })

function getSeasonInfo(){
    
}

function loadGames({ page, itemsPerPage }) {
    loading.value = true;
    axios.get('/api/games', {
        params: {
            pages: page,
            lim: itemsPerPage,
        }
    })
        .then(function (response) {
            const data2 = response.data;
            matches.value.length = 0;
            totalGames.value = data2.totalGames;
            for (var i = 0; i < data2.Games.length; i++) {
                var match = {
                    id: data2.Games[i].id,
                    date: data2.Games[i].game_date,
                    homeTeam: data2.Games[i].player1_real_name,
                    awayTeam: data2.Games[i].player2_real_name,
                    homeScore: data2.Games[i].score1,
                    awayScore: data2.Games[i].score2,
                }
                matches.value[i] = match;
            }
            loading.value = false
        })
        .catch(function (error) {
            console.log(error);
        })
}

</script>