<template>
    <div class="row" @keyup.enter="submitForm">
        <div class="col">
            <div class="row m-b-20 text-info">
                <div class="col">
                    <h3 class="text-left">Create Package</h3>
                </div>
            </div>
            <error-message-component class="m-b-20" :error="error"></error-message-component>
            <div class="row">
                <div class="col">
                    <validation-wrapper-component class="m-b-15" :validator="$v.parameters.type">
                        <label class="text-primary">Type</label>
                        <select-component :options="[{'id': 0, 'text': 'Carton'}, {'id': 1, 'text': 'Pallet'}]" v-model="parameters.type"></select-component>
                        <input type="text" class="form-control fs-12" v-model.trim="parameters.type">
                    </validation-wrapper-component>

                    <validation-wrapper-component class="m-b-15" :validator="$v.parameters.description">
                        <label class="text-primary">Description</label>
                        <input type="text" class="form-control fs-12" v-model.trim="parameters.description">
                    </validation-wrapper-component>

                    <validation-wrapper-component class="m-b-15" :validator="$v.parameters.width">
                        <label class="text-primary">Width</label>
                        <input type="text" class="form-control fs-12" v-model.trim="parameters.width">
                    </validation-wrapper-component>

                    <validation-wrapper-component class="m-b-15" :validator="$v.parameters.height">
                        <label class="text-primary">Height</label>
                        <input type="text" class="form-control fs-12" v-model.trim="parameters.height">
                    </validation-wrapper-component>

                    <validation-wrapper-component class="m-b-15" :validator="$v.parameters.length">
                        <label class="text-primary">Length</label>
                        <input type="text" class="form-control fs-12" v-model.trim="parameters.length">
                    </validation-wrapper-component>

                    <validation-wrapper-component class="m-b-15" :validator="$v.parameters.weight">
                        <label class="text-primary">Weight</label>
                        <input type="text" class="form-control fs-12" v-model.trim="parameters.weight">
                    </validation-wrapper-component>

                    <validation-wrapper-component class="m-b-15" :validator="$v.parameters.quantity">
                        <label class="text-primary">Quantity</label>
                        <input type="text" class="form-control fs-12" v-model.trim="parameters.quantity">
                    </validation-wrapper-component>

                    <validation-wrapper-component class="m-b-15" :validator="$v.parameters.reference">
                        <label class="text-primary">Reference</label>
                        <input type="text" class="form-control fs-12" v-model.trim="parameters.reference">
                    </validation-wrapper-component>
                    <div class="row m-t-15 align-items-center justify-content-center">
                        <div class="col">
                            <div class="btn btn-block btn-lg btn-primary b-rad-none no-border" @click="submitForm">Submit</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import createPackageFormValidation from '../../../general/mixins/orders/validation/createPackageFormValidation';
    import componentHandler from '../../../general/mixins/componentHandler';
    import modalFormHandler from '../../../general/mixins/modalFormHandler';

    export default {
        props: {
            id: {
                type: Number,
                required: true
            },
            section:{
                type: String,
                required: true
            }
        },
        data() {
            return {
                error: '',
                parameters: {
                    order_id: this.id,
                    type: this.type,
                    description: this.description,
                    width: this.width,
                    height: this.height,
                    length: this.length,
                    weight: this.weight,
                    quantity: this.quantity,
                    reference: this.reference
                }
            };
        },
        watch: {
            'id': function () {
                this.parameters.order_id = this.id;
            }
        },
        methods: {
            submitForm(){
                this.submit(this.route('api.packing_list.package.create'), 'post', this.section, true, true)
            }
        },
        mixins: [createPackageFormValidation, componentHandler, modalFormHandler]
    }

</script>