<template>
  <div>
    <q-page padding>
      <q-card>
        <q-card-section>
          <q-table :data="rows" row-key="userid" :columns="columns" />
        </q-card-section>
      </q-card>
    </q-page>
  </div>
</template>

<script lang="ts">
// TODO: Load all users / balances

// TODO: Fill usefull data

import { computed, defineComponent } from '@vue/composition-api';
import { StateInterfaceBalance } from '../store/balance';
import { Store } from 'vuex';
export default defineComponent({
  // name: 'PageName'
  setup(_, { root }) {
    const store = <Store<StateInterfaceBalance>>root.$store;

    const rows = [];

    const columns = [
      {
        name: 'userid',
        label: 'Datum',
        field: 'userid',
        required: true,
        align: 'left',
        sortable: true
      },
      {
        name: 'balance',
        label: 'Text',
        field: 'balance',
        format: (val: number) => val.toFixed(2)
      },
      {
        name: 'limit',
        label: 'Betrag',
        field: 'limit',
        format: (val: number) => (val === null ? 'keins' : val)
      },
      {
        name: 'limit',
        label: 'Benutzer',
        field: 'limit',
        format: (val: number) => (val === null ? 'keins' : val)
      },
      {
        name: 'limit',
        label: 'Storniert',
        field: 'limit',
        format: (val: number) => (val === null ? 'keins' : val)
      },
      {
        name: 'limit',
        label: 'Löschen',
        field: 'limit',
        format: (val: number) => (val === null ? 'keins' : val)
      }
    ];
    return { rows, columns };
  }
});
</script>
