<template>
  <v-table>
    <thead>
      <tr>
        <th class="text-left">ID</th>
        <th class="text-left">Title</th>
        <th class="text-left">Staus</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="game in games">
        <td>
          <a v-bind:href="`/#/games/${game.id}`">{{ game.id }}</a>
        </td>
        <td>
          <a v-bind:href="`/#/games/${game.id}`">{{ game.title }}</a>
        </td>
        <td>{{ game.status }}</td>
      </tr>
    </tbody>
  </v-table>
  <v-pagination
    :length="pageCount"
    @prev="previousPage()"
    @next="nextPage()"
    @update:modelValue="setPage($event)"
  ></v-pagination>
</template>
<style></style>

<script setup lang="ts">
import { onMounted, onCreated, ref } from 'vue'
import axios from 'axios'

let page = 1
let count = 10
const games = ref({})
const pageCount = ref(1)

async function loadData() {
  const response = await axios.post('/api/game', {
    page: `${page}`,
    count: '10',
    orderBy: 'id'
  })

  games.value = response.data.gameData
  pageCount.value = response.data.pageCount
}

async function nextPage() {
  page++
  loadData()
}

async function previousPage() {
  page--
  loadData()
}

function setPage(targetPage: number) {
  this.page = targetPage - 1
  loadData()
}

onMounted(async () => {
  loadData()
})
</script>
