<template>
    <div class="relative" style="min-height: 300px">
        <loading-component  v-show="isLoading"></loading-component>
        <div class="row" v-if="!orders.length && isLoading === false">
            <div class="col text-center p-t-30 p-b-30 bg-white">
                <div class="row">
                    <div class="col text-center">
                        <img src="https://static.thenounproject.com/png/10066-200.png" width="60" class="hint-text">
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <div class="bold all-caps p-t-15 fs-12 text-primary">Order list is empty</div>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <small class="all-caps fs-10 muted">No orders matching your criteria</small>
                    </div>
                </div>


            </div>
        </div>
        <order-component  v-for="order in orders" v-bind:key="order.id" :data="order"></order-component>
        <pagination-component class="m-b-20" ref="pagination" v-on:changePage="fetchOrders($event)"></pagination-component>
    </div>
</template>

<script>
    export default {
        props: {
            'type': {
                type: String,
                default: 'company'
            },
            'id': {
                type: String,
                required: false
            },
            'category': {
                type: String,
                required: true
            }
        },
        data() {
            return {
                orders: [],
                isLoading: true
            }
        },
        created() {
            this.fetchOrders();
        },
        mounted() {
            Event.$on('updateOrdersList', (current) => {
                this.fetchOrders(current ? this.$refs.pagination.pagination.current_page : 1);
            });
        },
        methods: {
            fetchOrders(page = 1){
                //turn on loading animation
                this.isLoading = true;

                let url = route('api.company.order.list', {id: this.id, category: this.category});

                if(this.type === 'warehouse'){
                    url = route('api.warehouse.order.list', {id: this.id, category: this.category});
                }

                if(this.type === 'forwarder'){
                    url = route('api.order.list', {category: this.category});
                }

                fetch(url + '?page='+ page)
                    .then(response => response.json())
                    .then(response => {

                        this.orders = response.data;
                        //turn off loading animation
                        this.isLoading = false;
                        this.$refs.pagination.makePagination(response.meta, response.links);



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