<template>
  <v-table>
    <thead>
      <tr>
        <th class="text-left">ID</th>
        <th class="text-left">Character</th>
        <th class="text-left">Role</th>
        <th class="text-left">Player</th>
        <th class="text-left">Status</th>
        <th class="text-left">Last Game</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="character in characters.data">
        <td>
          <a v-bind:href="`/#/characters/${character.id}`">{{ character.id }}</a>
        </td>
        <td>
          <a v-bind:href="`/#/characters/${character.id}`">{{ character.characterName }}</a>
        </td>
        <td>{{ character.role }}</td>
        <td>{{ character.playerName }}</td>
        <td>{{ character.status }}</td>
        <td>{{ character.lastGame }}</td>
        <td>0</td>
      </tr>
    </tbody>
  </v-table>
  <button @click="previousPage()">pp</button>
  <button @click="nextPage()">np</button>
</template>

<style type="text/css"></style>

<script setup lang="ts">
import { onMounted, onCreated, ref } from 'vue'
import { Game, useGameStore } from '../store/gamestore'
import axios from 'axios'

let page = 0
let count = 10
const characters = ref({
  data: [
    { id: 1, name: 'test', player: 'test player', status: 'active', lastGame: 0 },
    { id: 1, name: 'test', player: 'test player', status: 'active', lastGame: 0 }
  ]
})

async function loadData() {
  characters.value = await axios.post('/api/character', {
    page: `${page}`,
    count: `${count}`,
    orderBy: 'id'
  })
}

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

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

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