<template>
    <div class="row parentContainer">
        <div class="col-2">
            <div v-if="item.order">
                <a :href="route('customer.profile', item.order.company_module.marking)">{{item.order.company_module.marking}}</a>/<a :href="route('order.show', item.order.reference)">{{item.order.reference}}</a>
                <p>{{item.reference}}</p>
                <p v-if="item.receive_packing_list">{{item.receive_packing_list.transport.drop_date}}</p>
            </div>
            <div v-if="!item.order" class="text-danger">Unclaimed Packing List</div>
        </div>
        <div class="col-1 text-center">{{item.packages.reduce((total, obj) => (obj.type === 2 ? 0 : obj.quantity) + total, 0)}}</div>
        <div class="col-1">{{ cbm }}</div>
        <div class="col-1">{{ overweight }}</div>
        <div class="col-1">{{ (parseFloat(cbm) + parseFloat(overweight)).toFixed(3)}}</div>
        <div class="col-1 bold text-center" :class="{'text-danger': item.status === 5, 'text-success': item.status !== 5}">{{item.transport ? 'Delivery' : item.status === 5 ? 'On Hold' : 'Release'}}</div>
        <div class="col-3">
            <div v-if="item.order" style="word-break: break-word;">
                {{item.order.address.contact ? item.order.address.contact.reference+' '+item.order.address.contact.phone : ''}}<br>
                {{item.order.address.street_one+' '+(item.order.address.street_two ? item.order.address.street_two : '')+', '+ item.order.address.district.name+', '+item.order.address.post_code+' '+item.order.address.state.name+', '+item.order.address.country.name}}<br>{{item.order.address.remark ? item.order.address.remark.content: ''}}
                <div class="btn btn-xs btn-primary pointer m-t-10 requestModal hide" data-type="defineLocation">Define Location</div>
                <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="defineLocation">
                    <declare-postcode-area-form-component :data="item.order.address"></declare-postcode-area-form-component>
                </modal-component>
            </div>
        </div>
        <div class="col">
            <p class="no-margin" v-if="item.transport">{{ item.transport.current_schedule.eta }}</p>
            <p class="no-margin text-danger" v-if="!item.transport">{{ item.packages.length ? item.packages[0].container.transport ? item.packages[0].container.transport.dropped_days+' Days': 'n/a' : 'n/a'}}</p>
            <div class="btn btn-xs btn-primary pointer m-t-10 requestModal" data-type="rescheduleTransport">Reschedule Transport</div>
            <modal-component class="animate__animated animate__fast animate__fadeIn" styleType="fill-in" type="rescheduleTransport">
                <reschedule-transport-date-form-component :data="item"></reschedule-transport-date-form-component>
            </modal-component>
        </div>
        <div class="col-auto text-right" v-if="!item.transport">
            <div class="row m-b-5">
                <div class="col">
                    <div v-if="item.order">
                        <div class="btn btn-xs btn-success pointer" v-if="item.status === 5" @click="updateStatus(item.status === 1 ? 1 : 2)"><i class="fa fa-check m-r-5"></i>Release</div>
                        <div class="btn btn-xs btn-danger pointer" v-if="item.status !== 5" @click="updateStatus(5)"><i class="fa fa-hand-paper-o m-r-5"></i>Hold</div>
                    </div>
                    <div v-if="!item.order" class="text-danger">Unclaimed</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import componentHandler from '../../../general/mixins/componentHandler';
    export default {
        props: {
            section:{
                type: String,
                default: ''
            }
        },
        data(){
            return {
                parameters: {
                    packing_list_id: null,
                }
            }
        },
        computed: {
            cbm () {
                return (Math.ceil((this.item.packages.reduce((total, obj) => (obj.type === 2 ? 0 : obj.cbm) + total, 0)) * 1000) / 1000).toFixed(3)
            },
            overweight(){
                return (Math.ceil((this.item.packages.reduce((total, obj) => (obj.type === 2 ? obj.cbm : 0) + total, 0)) * 1000) / 1000).toFixed(3)
            }
        },
        created(){
            this.parameters.packing_list_id = this.data.id;
        },
        methods: {
            updateStatus(status){
                this.submit(this.route('api.packing_list.status.update', this.item.id, status), 'put', '', true, true)
            },
            successHandler(response){
                this.item = response.payload.data;
                // this.$forceUpdate();
            }
        },
        mixins: [componentHandler]
    }
</script>
