<template>
    <div class="h-100">
        <div class="relative h-100" style="min-height: 200px;">
            <loading-component  v-show="isLoading"></loading-component>
            <account-component  v-for="account in accounts" v-bind:key="account.id" :data="account"></account-component>
            <pagination-component class="m-b-20" ref="pagination" v-on:changePage="fetchCompanies($event)"></pagination-component>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                accounts: [],
                isLoading: true
            }
        },
        mounted() {
            Event.$on('updateAccountList', () => {
                this.fetchAccounts();
            });
        },
        created() {
            this.fetchAccounts();
        },
        methods: {
            fetchAccounts(page = 1){
                //turn on loading animation
                this.isLoading = true;

                fetch(route('api.account.invite.list') + '?page='+ page).then(response => response.json())
                    .then(response => {

                        this.accounts = response.data;

                        this.$refs.pagination.makePagination(response.meta, response.links);

                        //turn off loading animation
                        this.isLoading = false;

                    })
                    .catch(error => console.log(error))
            }
        }
    }
</script>

<style scoped>

</style>