<script>

    export default {
        props: {

        },
        mounted () {

        },
        methods: {

            /*
            * Reset previous validation error each time open a new Modal form
            * */
            resetValidation() {
                this.$validator.reset();
            },

            showCreateForm() {

                this.current_action = 'create';

                // reset form to initial value

                this.item_data = this.getDefaultItemData();

                this.resetValidation();

                // set submit label and modal title
                this.submit_label = 'Create';
                this.modal_title = 'New Invoice Item';

                this.openModal();
            },

            showEditForm(index) {

                this.current_action = 'edit';

                this.current_index = index;

                // get item data from component invoice items array

                let copied_item_data = Object.assign({}, this.component_invoice_items[index]);

                this.item_data = copied_item_data;

                // reset validation

                this.resetValidation();

                // set submit label and modal title
                this.submit_label = 'Update';
                this.modal_title = 'Edit Invoice Item';

                this.openModal();
            },

            openModal() {
                this.$refs.invoiceItemModal.show();
            },

            closeModal() {
                this.$refs.invoiceItemModal.hide();
            },

            handleOk(event) {

                // prevent modal from closing
//                event.preventDefault();

                this.handleSubmit(event);
            },

            /*
            * Handle modal submission for New and Edit
            * */
            handleSubmit(e) {

                this.component_submitted = true;

                this.$validator.validate().then(valid => {
                    if (valid) {

                        if (this.current_action === 'create') {
                            this.store();
                        }
                        else if (this.current_action === 'edit') {
                            this.update();
                        }
                    }
                    else {
                        // scroll to top

                        window.scrollTo(0,0);
                    }
                });


            },

            /*
            * New row created by v-for must be re-init for tooltip to work
            * */

            reinitTooltip() {
                Vue.nextTick(function () {
                    $('[data-toggle="tooltip"]').tooltip();
                });
            },

            store() {

                this.component_invoice_items.push(this.item_data);

                this.reinitTooltip();

                this.closeModal();

                this.updateParent();
            },

            update() {

                Vue.set(this.component_invoice_items, this.current_index, this.item_data);

                this.closeModal();

                this.updateParent();

            },

            destroy() {

                let deleted_item = this.component_invoice_items[this.current_index];

                // remove item from component_invoice_items array

                this.$delete(this.component_invoice_items, this.current_index);

                // add the item into deleted_invoice_items array

                this.deleted_invoice_items.push(deleted_item);

                this.updateParent();

                this.updateParentDeletedItems();
            },

            /*
            * Update the parent component the value of latest component_invoice_items after Create / Update / Delete operation
            * */
            updateParent() {
                this.$emit('update:invoice_items', this.component_invoice_items);
            },

            /*
            * Update the parent component the value of latest deleted invoice items id
            * */
            updateParentDeletedItems() {

                this.$emit('update:deleted_invoice_item_ids', this.deleted_invoice_item_ids);
            }
        }
    }
</script>