<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 = computed(() => {
      const fo: Array<{ userid: string; balance: number }> = [];
      store.state.balance.balances.forEach((value, key) =>
        fo.push(Object.assign(value, { userid: key }))
      );
      return fo;
    });

    const columns = [
      {
        name: 'userid',
        label: 'Benutzer ID',
        field: 'userid',
        required: true,
        align: 'left',
        sortable: true
      },
      { name: 'balance', label: 'Kontostand', field: 'balance' },
      {
        name: 'limit',
        label: 'Limit',
        field: 'limit',
        format: (val: number) => (val === null ? 'keins' : val)
      }
    ];
    return { rows, columns };
  }
});
</script>
