<template>
  <v-app>
    <!-- {{ filteredMatches }} -->
    <v-container>
      <v-data-table :headers="headers" :items="filteredMatches" item-key="id" :search="search.value" :items-per-page="10">
        <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.team="{ item }">
          {{ item.homeTeam }} VS {{ item.awayTeam }}
        </template>
        <template v-slot:item.score="{ item }">
          {{ item.homeScore }} - {{ item.awayScore }}
        </template>
        <template v-slot:item.actions="{ item }">
          <v-icon small @click="approveMatch(item)" style="padding-right: 20px;">mdi-check</v-icon>
          <v-icon small @click="rejectMatch(item)" style="padding-left: 20px;">mdi-close</v-icon>
        </template>
      </v-data-table>
    </v-container>

  </v-app>
</template>

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

const search = ref('');
const headers = reactive([
  { title: '比赛', key: 'team' },
  { title: '比分', key: 'score' },
  { title: '审核', key: 'actions', sortable: false }
]);
const matches = ref([
  { id: 1, homeTeam: '张三', awayTeam: '零', homeScore: 2, awayScore: 1, status: 'pending' },
  { id: 2, homeTeam: '李四', awayTeam: '一', homeScore: 0, awayScore: 3, status: 'pending' },
  { id: 3, homeTeam: '王五', awayTeam: '二', homeScore: 2, awayScore: 2, status: 'pending' },
]);

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)
  );
})

function approveMatch(match) {
  // Perform approval logic
  match.status = 'approved';
}
function rejectMatch(match) {
  // Perform rejection logic
  match.status = 'rejected';
}

</script>