<template>
    <div class="items-table-component">
        <table-fixed-header
                :itemsType="'invoice-items'"
                :headers="tableHeaders"
                :filters="filtersItems">
            <template slot="main">
                <tr v-for="(item, key) in invoiceItems"
                    :key="key"
                    :class="showItemRowClass(item)"
                    @click="editRow(key)">
                    <td class="column-invoice-item-id show-value" v-if="!item.edit">{{ item.id }}</td>
                    <td class="column-product-name show-value" v-if="!item.edit">{{ item.product }}</td>
                    <td class="column-quantity show-value" v-if="!item.edit">{{ item.quantity }}</td>
                    <td class="column-grade show-value" v-if="!item.edit">{{ item.grade }}</td>
                    <td class="column-price show-value" v-if="!item.edit">{{ item.price }} &euro;</td>
                    <td class="column-sum show-value" v-if="!item.edit">{{ item.sum }} &euro;</td>
                    <td class="column-rename-model show-value" v-if="!item.edit">{{ item.rename_model }}</td>
                    <td class="column-memory show-value" v-if="!item.edit">{{ item.speicher }}</td>
                    <td class="column-color show-value" v-if="!item.edit">{{ item.farbe }}</td>
                    <td class="column-item-id show-value" v-if="!item.edit">{{ item.item_id }}</td>
                    <td class="column-actions show-value" v-if="!item.edit && canDeleteItem">
                        <button class="btn btn-danger" type="button" @click="$emit('removeRow', key)">
                            <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                        </button>
                    </td>

                    <td class="column-invoice-item-id edit-value" v-if="item.edit">{{ item.id }}</td>
                    <td class="column-product-name edit-value" v-if="item.edit">
                        <input class="form-control"
                               type="text"
                               v-model="item.product">
                    </td>
                    <td class="column-quantity edit-value" v-if="item.edit">
                        <input class="form-control"
                               type="text"
                               v-model="item.quantity"
                               @keyup="recalc(key)"
                               v-filter_number="'[0-9.]'">
                    </td>
                    <td class="column-grade edit-value" v-if="item.edit">
                        <input class="form-control"
                               type="text"
                               v-model="item.grade"></td>
                    <td class="column-price edit-value" v-if="item.edit">
                        <input class="form-control"
                               type="text"
                               v-model="item.price"
                               @keyup="recalc(key)"
                               v-filter_number="'[0-9.]'">
                    </td>
                    <td class="column-sum edit-value" v-if="item.edit">{{ item.sum }} &euro;</td>
                    <td class="column-rename-model edit-value" v-if="item.edit">
                        <input class="form-control"
                               type="text"
                               v-model="item.rename_model">
                    </td>
                    <td class="column-memory edit-value" v-if="item.edit">
                        <input class="form-control"
                               type="text"
                               v-model="item.speicher">
                    </td>
                    <td class="column-color edit-value" v-if="item.edit">
                        <input class="form-control"
                               type="text"
                               v-model="item.farbe">
                    </td>
                    <td class="column-item-id edit-value" v-if="item.edit">
                        <input class="form-control"
                               type="text"
                               v-model="item.item_id">
                    </td>
                    <td class="column-actions edit-value" v-if="item.edit">
                        <button class="btn btn-danger" type="button" @click="$emit('removeRow', key)">
                            <span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
                        </button>
                    </td>
                </tr>
            </template>
        </table-fixed-header>
    </div>
</template>

<script>

    Vue.component('table-fixed-header', require('../../_templates/TableComponent.vue'));

    export default {
        name: "ItemsTableComponent",
        props: [
            'dataInvoiceItems', 'user', 'filtersItemsUrl', 'invoiceItemsIndexUrl'
        ],
        data() {
            return {
                filtersItems: {},
                selectedFilters: [],
                filter: {},
                invoiceItems: this.dataInvoiceItems,

                tableHeaders: {
                    'invoice-item-id': 'ID',
                    'product-name': 'Product Name',
                    'quantity': 'Qty',
                    'grade': 'Grade',
                    'price': 'Price',
                    'sum': 'Sum',
                    'rename-model': 'Rename Model',
                    'memory': 'Speicher',
                    'color': 'Color',
                    'item-id': 'Item ID',
                    'actions': ''
                },
            }
        },
        computed: {
            canDeleteItem() {
                return !(this.user.role === 'superviser');
            },
        },
        created() {
            this.getFiltersItems();
        },
        methods: {
            getFiltersItems() {
                axios.get(this.filtersItemsUrl, {
                    params: {
                        'items': this.invoiceItems,
                    },
                })
                    .then(response => {
                        let data = response.data;

                        this.filtersItems = {
                            'grade': {
                                'on-change': this.changeFilter,
                                'data': data.grade,
                                'selected': this.filter.grade ? this.filter.grade : [],
                            },
                            'rename_model': {
                                'on-change': this.changeFilter,
                                'data': data.rename_model,
                                'selected': this.filter.rename_model ? this.filter.rename_model : [],
                            },
                            'speicher': {
                                'on-change': this.changeFilter,
                                'data': data.speicher,
                                'selected': this.filter.speicher ? this.filter.speicher : [],
                            },
                            'farbe': {
                                'on-change': this.changeFilter,
                                'data': data.farbe,
                                'selected': this.filter.farbe ? this.filter.farbe : [],
                            },
                            'item_id': {
                                'on-change': this.changeFilter,
                                'data': data.item_id,
                                'selected': this.filter.item_id ? this.filter.item_id : [],
                            },
                        };
                    });
            },
            changeFilter(data, type) {
                this.filter[type] = data;
                this.getItems();
            },
            getItems() {
                axios.get(this.invoiceItemsIndexUrl, {
                    params: {
                        'filter': this.filter,
                    },
                }).then(response => {
                    this.invoiceItems = response.data;
                    this.getFiltersItems();
                });
            },
            showItemRowClass(el) {
                return this.isValidItemData(el) ? (this.hasSpeicher(el) || this.hasFarbe(el)) : "alert alert-danger";
            },
            isValidItemData(el) {
                return el.product && el.quantity > 0 && el.price > 0 && el.sum > 0 && el.item_id > 0;
            },
            hasSpeicher(el) {
                return el.speicher ? '' : "alert alert-warning";
            },
            hasFarbe(el) {
                return el.farbe ? '' : "alert alert-warning";
            },
            editRow(key) {
                if (this.canDeleteItem) {
                    this.$emit('editItem', key)
                }
            },
            recalc(key) {
                this.$emit('recalc', key)
            },
        }
    }
</script>

<style scoped>
    .click-filter {
        cursor: pointer;
    }
</style>