<template>
  <v-app>
    <!-- {{ filteredMatches }} -->
    <v-container>
      <v-data-table class="overflow-auto " :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.date="{ item }">
          <p style="width:60px" >{{ item.date }}</p>
        </template>
        <template v-slot:item.team="{ 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>
        <template v-slot:item.actions="{ item }">
          <div style="width:45px">          <v-icon v-if="!item.shenhe" small color="green" @click="opendialog(item, 'approve')"
            style="padding-right: 20px;">mdi-check</v-icon>
          <v-icon v-if="!item.shenhe" small color="red" @click="opendialog(item, 'reject')" style="padding-left: 20px;">mdi-close</v-icon>
          <div v-if="item.shenhe" variant="text">已审核</div></div>

        </template>
      </v-data-table>
      <v-dialog v-model="dialog" width="auto">
        <v-card width="300px">
          <v-card-title>
            {{ cardtitle }}
          </v-card-title>
          <v-card-text>
            {{ cardtext }}
          </v-card-text>
          <template v-slot:actions>
            <v-btn class="ms-auto" variant="flat" color="indigo" text="确定" @click="confirmAction"></v-btn>
            <v-btn class="ms-auto" variant="flat" color="indigo" text="取消" @click="dialog = false"></v-btn>
          </template>
        </v-card>
      </v-dialog>
    </v-container>
  </v-app>



</template>

<style>
.table{
  width: 60px;

}
</style>

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

const matches = ref(new Array());
const actiontype = ref(null);
const selectedMatch = ref(null);
const cardtitle = ref(null);
const cardtext = ref(null);
const shenhetitle = ref(null);
const shenhetext = ref(null);
const dialog = ref(false);
const verify = ref(true);

function info(title, text) {
  cardtitle.value = title;
  cardtext.value = text;
  dialog.value = true;
}

function refresh() {
  axios.get('/api/lauchedGames',)
    .then(function (response) {
      const data = response.data;
      for (var i = 0; i < data.Games.length; i++) {
        var match = {
          id: data.Games[i].id,
          date: data.Games[i].game_date,
          homeTeam: data.Games[i].player1_real_name,
          awayTeam: data.Games[i].player2_real_name,
          homeScore: data.Games[i].score1,
          awayScore: data.Games[i].score2,
          shenhe: false,
        }
        matches.value[i] = match;
      }
    })
    .catch(function (error) {
      console.log(error);
    })
}
refresh();

const search = ref('');
const headers = reactive([
  { title: '日期', key: 'date', sortable: false },
  { title: '比赛', key: 'team', sortable: false },
  { title: '比分', key: 'score', sortable: false },
  { title: '审核', key: 'actions', 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)
  );
})

function opendialog(game, type) {
  if (type === 'approve') {
    shenhetitle.value = `审核比赛 ${game.homeTeam} VS ${game.awayTeam}`;
    shenhetext.value = `确定要通过这场比赛吗？`;
  } else if (type === 'reject') {
    shenhetitle.value = `审核比赛 ${game.homeTeam} VS ${game.awayTeam}`;
    shenhetext.value = `确定要不通过这场比赛吗？`;
  }
  info(shenhetitle.value, shenhetext.value);
  selectedMatch.value = game;
  actiontype.value = type;
}

function confirmAction() {
  if (actiontype.value === 'approve') {
    verify.value = true;
    selectedMatch.value.shenhe = true;
    axios.post('/api/confirmGame', {
      game_id: selectedMatch.value.id,
      confirm: verify.value,
    })
      .then(function (response) {
        const data = response.data;
        if (data.status === "SUCCESS") {
          console.log('success');
        }
      })
      .catch(function (error) {
        console.log(error);
      })
  }
  else if(actiontype.value === 'reject') {
    verify.value = false;
    selectedMatch.value.shenhe = true;
    axios.post('/api/confirmGame', {
      game_id: selectedMatch.value.id,
      confirm: verify.value,
    })
      .then(function (response) {
        const data = response.data;
        if (data.status === "SUCCESS") {
          console.log('success');
        }
      })
      .catch(function (error) {
        console.log(error);
      })
  }
  dialog.value = false;
}
</script>