<template>
    <table class="table table-striped">
        <tbody>
        <tr>
            <th style="width: 10px"><input type="checkbox" name="all_elements" id="all_elements" class="" v-model="allSelected"></th>
            <th style="width: 10px">ID</th>
            <th>Город</th>
            <th>Создан</th>
            <th>Название</th>
            <th>Количество</th>
            <th>Артикул</th>
            <th>Статус</th>
            <th>Тип</th>
        </tr>
        <tr v-for="(element, index) in elements" :key="element.id">
            <td><input type="checkbox" :name="'checked' + element.id" :id="'checked' + element.id" class="" v-model="checked[index]" :key="'checkbox' + element.id"></td>
            <td>{{ element.id }}.</td>
            <td>{{ element.returnable && element.returnable.location.name || element.regradingable.location.name }}</td>
            <td>{{ element.created_at }}</td>
            <td>{{ element.product.name_ikea }} {{ element.product.name }}</td>
            <td>
                <span v-if="!checked[index]" :key="'quantity' + element.id">{{ element.quantity }}</span>
                <input v-else v-model="element.quantity" :id="element.id" type="text" class="form-control" style="width:50px" :key="'input_quantity' + element.id">
            </td>
            <td>{{ element.product.code_dots }}</td>
            <td>
                <span v-if="!checked[index]" :key="'status' + element.id">{{ element.status.name }}</span>
                <select v-else v-model="element.status.id" class="form-control input-group-sm" :id="'statuses' + element.id" :key="'select_status' + element.id">
                    <option v-for="status in statuses" :key="status.id" :value="status.id">{{
                        status.name}}
                    </option>
                </select>
            </td>
            <td>{{ element.returnable_type && element.returnable_type || element.regradingable_type }}</td>
        </tr>
        <tr>
            <td colspan="9">
                <button type="button" id="save" class="btn btn-primary" @click="saveChanges">Сохранить изменения</button>
            </td>
        </tr>

       </tbody>
    </table>

</template>

<script>

    export default {
        props: ['elements', 'statuses', 'type'],
        mounted() {
                     //console.log(order.status)
        },
        methods: {
            saveChanges(){
                this.checked.forEach((item, index) => {
                    if (item === true) {
                        axios.put('/' + this.type + '/' + this.elements[index].id, {
                            quantity: this.elements[index].quantity,
                            product_return_status_id: this.elements[index].status.id,
                            product_regrading_status_id: this.elements[index].status.id,
                        })
                            .then(response => {
                                console.log(this.checked[index])
                                this.checked[index] = false
                                console.log(this.checked[index])
                                this.$toast.open({
                                    message: 'Элемент успешно сохранен!',
                                    type: 'success',
                                    position: 'top'
                                })
                            })
                            .catch(function (error) {
                                console.log(error)
                            });
                    }
                })

            },
        },
        computed: {
        },
        data() {
            const vars = {
                checked: [],
                allSelected: false
            }
            this.elements.forEach((item, index) => {
                vars.checked[index] = false
            })
            return vars;
        },
        watch: {
            allSelected(newValue, oldValue){
                this.elements.forEach((item, index) => {
                    this.checked[index] = newValue
                })
            },
            checked: {
                handler: function (after, before) {
                    // Return the object that changed
                    console.log(after)
                    if (after.indexOf(true) == -1 ) this.allSelected = false
                    if (after.indexOf(false) == -1 ) this.allSelected = true
                },
                deep: true,
            }
        }
    }
</script>