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

<script lang="ts">
// TODO: Fill usefull data

import { ref, defineComponent, onMounted } from 'vue';
import { useBalanceStore } from '../store';

export default defineComponent({
  // name: 'PageName'
  setup() {
    const store = useBalanceStore();

    onMounted(() => void store.getBalances().then((balances) => rows.value.push(...balances)));

    const rows = ref(store.balances);

    const columns = [
      {
        name: 'userid',
        label: 'Benutzer ID',
        field: 'userid',
        required: true,
        align: 'left',
        sortable: true
      },
      {
        name: 'credit',
        label: 'Haben',
        field: 'credit',
        format: (val: number) => val.toFixed(2)
      },
      {
        name: 'debit',
        label: 'Soll',
        field: 'debit',
        format: (val: number) => val.toFixed(2)
      },
      {
        name: 'balance',
        label: 'Kontostand',
        format: (_: undefined, row: { debit: number; credit: number }) =>
          (row.credit - row.debit).toFixed(2)
      }
    ];
    return { rows, columns };
  }
});
</script>
