<template>
    <div class="row">
        <div class="col">
            <loading-component v-if="isLoading" style="height: 200px; top: 0;"></loading-component>
            <div class="row" v-show="!isLoading">
                <div class="col">
                    <div class="row">
                        <div class="col">
                            <div class="row align-items-center p-t-10 p-b-10 b-t b-grey muted all-caps fs-10">
                                <div class="col-2">Marking</div>
                                <div class="col-1 text-center">Quantity</div>
                                <div class="col-1">CBM</div>
                                <div class="col-1">Overweight CBM</div>
                                <div class="col-1">Total CBM</div>
                                <div class="col-1 text-center">status</div>
                                <div class="col-3">Delivery Details</div>
                                <div class="col">Delivery Date</div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col">
                            <div class="row">
                                <div class="col">
                                    <div class="row align-items-center p-t-10 p-b-10 b-t b-grey" v-for="packingList in packingLists">
                                        <div class="col">
                                            <packing-list-component :section="section" :data="packingList"></packing-list-component>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import componentHandler from '../../../general/mixins/componentHandler';
    import LoadingComponent from "../../general/elements/LoadingComponent";
    import PackingListComponent from "../elements/PackingListComponent";
    export default {
        components: {PackingListComponent, LoadingComponent},
        props: {
            section:{
                type: String,
                default: ''
            }
        },
        data(){
            return {
                isLoading: true,
                packingLists: []
            }
        },
        created(){
            this.submit(route('api.packing_list.container.show', this.item.id), 'get', this.section, false, false);
        },
        methods: {
            successHandler(response){
                this.packingLists = response.payload.data.packing_lists;
                this.isLoading = false;
            }
        },
        mixins: [componentHandler]
    }
</script>
