<template>
    <div class="row">
        <div class="col b-b b-grey" :class="{'b-gray': !selected, 'b-primary': selected, 'bg-primary-lighter': selected}">
            <div class="row">
                <div class="col padding-20">
                    <div class="row align-items-center">
                        <div class="col-auto pointer align-items-center" @click="activate()">
                            <i class="fa fs-30 fa-fw" :class="{'fa-square-o': !selected, 'fa-check-square': selected, 'text-primary':selected}" ></i>
                        </div>
                        <div class="col">
                            <h5 class="no-margin"><a :href="route('order.show', item.order.reference)">{{item.order.reference}}</a></h5>
                        </div>
                        <div class="col">
                            <h5 class="no-margin"><a :href="route('customer.profile', item.order.company_module.marking)">{{item.order.company_module.marking}}</a></h5>
                        </div>
                        <div class="col">
                            <h5 class="no-margin">{{noPackage}}</h5>
                        </div>
                        <div class="col">
                            <h5 class="no-margin">{{loadedCBM}}</h5>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import componentHandler from '../../../general/mixins/componentHandler';
    export default {
        props: {
            selectedPackageList: {
                type: Array,
                required: false,
            }  
        },
        methods: {
            activate(){
                this.selected = !this.selected;
                this.$emit('input', this.item);
            }
        },
        computed: {
            loadedCBM() {
                return (Math.ceil( this.item.packages.reduce((total, obj) => obj.cbm + total, 0) * 1000) / 1000).toFixed(3);
            },
            noPackage() {
                return ( this.item.packages.reduce((total, obj) => 1 + total, 0));
            },
            selected() {
                var response = false;
                this.selectedPackageList.forEach((value, index) => {
                    if (value.id == this.item.id) {
                        response = true;
                    }
                });
                return response;
            }
        },
        mixins: [componentHandler]
    }
</script>
