<template>
    <div>
    <div class="row">
        <div class="col-md-12">
            <h5>Todos os Empréstimos</h5>
        </div>
    </div>

    <table class="table table-striped">
            <thead>
            <tr>
                <th>Book</th>
                <th>User ID</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(loan, index) in loans"  :key="index">
                <td>{{ loan.book.title }}</td>
                <td>{{ loan.user_id }}</td>
                <td>
                    <div class="text-center">
                        <button  v-if="loan.status=='P' " class="btn btn-primary" @click.prevent="entregar(loan)">Entregar</button>
                        <button v-if="loan.status=='E'" class="btn btn-primary" @click.prevent="devolver(loan)">Devolver </button>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    export default {
        props:["books","loans"],
        data: function () {
            return {


            };
        },
        methods:{
             loan: function(loan){
                axios.post('api/books/loans')
                // .then(response => console.log("Success"))
                    .then(response => {
                        console.log(response);
                        this.$socket.emit('loanRequested', loan)
                    })
                    .catch(error => console.log('Whoops'));
            },

            entregar : function(loan){
                if (loan.status === 'E') {
                this.message = "Livro Entregue";
                 this.showMessage = true;
            } else {
                this.message = "Livro devolvido";
                 this.showMessage = true;
            }
            axios.put("api/loans/entregar/" + loan.id).then(response => {
                // Copy object properties from response.data.data to this.user
                // without creating a new reference
                //Object.assign(item, response.data.data);

               this.$emit('updateAll');
               this.$socket.emit('bookDelivered', loan)
               this.$socket.emit('reloadRequired')


            });
            },
            devolver : function(loan){
                axios.put("api/loans/devolver/" + loan.id).then(response => {
                // Copy object properties from response.data.data to this.user
                // without creating a new reference
                //Object.assign(item, response.data.data);
               this.$emit('updateAll');
               this.$socket.emit('bookReturned', loan)
               this.$socket.emit('reloadRequired')

            });
            }


        },
    }
</script>