<template>
    <div class="h-100">
        <accounts-search-component placeholder="Search importer by name, marking..."></accounts-search-component>
        <div class="relative h-100" style="min-height: 300px;">
            <loading-component  v-show="isLoading"></loading-component>
            <company-component  v-for="company in companies" v-bind:key="company.id" :data="company"></company-component>
            <pagination-component class="m-b-20" ref="pagination" v-on:changePage="fetchCompanies($event)"></pagination-component>
        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                companies: [],
                isLoading: true
            }
        },
        created() {
            this.fetchCompanies();
        },

        mounted() {
            Event.$on('updateCompanyList', () => {
                this.fetchCompanies();
            });
        },

        methods: {
            fetchCompanies(page = 1){
                //turn on loading animation
                this.isLoading = true;

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

                        this.companies = response.data;

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

                        //turn off loading animation
                        this.isLoading = false;
						
                    })
                    .catch(error => console.log(error))
            }
        }
    }
</script>