<template>
  <div class="account-list">
    <div class="columns is-centered is-multiline" v-if="accounts.length">
      <div class="column is-3" v-for="(account, k) in accounts" :key="k">
        <account-card :account="account" />
      </div>
    </div>
    <div v-else-if="fetched">
      <awe-icon icon="inbox" />&nbsp;Les comptes créés s'afficheront ici.
    </div>
    <fab-button :to="{ name: 'account-new' }" :margin="true">
      <span slot="fulltext">créer un compte</span>
    </fab-button>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import { Getter } from 'vuex-class'
import { findDarkValue } from '@/utils'
import bus, { SYNC } from '@/utils/bus-event'
import accountService from '@/services/AccountService'
import IAccount from '@/models/IAccount'
import IColor from '@/models/IColor'
import IUser from '@/models/IUser'
import FabButton from '@/components/FabButton.vue'
import AccountCard from '@/components/AccountCard.vue'

@Component({
  components: {
    'fab-button': FabButton,
    'account-card': AccountCard
  }
})
export default class AccountList extends Vue {
  @Getter
  public user!: IUser | null
  @Prop({ type: Boolean, default: false })
  public archived!: boolean

  public accounts: IAccount[] = []
  public fetched: boolean = false
  public textColor: string = ''
  public async created(): Promise<void> {
    this.getData()
    bus.$on(SYNC, this.getData)
  }

  public async getData(): Promise<void> {
    this.accounts = await accountService.getAll(this.archived)
    this.fetched = true
  }
}
</script>

<style lang="scss" scoped>
li {
  margin-bottom: 10px;
  &:last-child {
    margin-bottom: 0;
  }
}
</style>
