<template>
    <div class="row">

        <div class="col-12" :class="{'col-md-8': $store.state.user}"> <!-- caso o user esteja autenticado -->
            <div class="col-12">

                <div class="row">
                    <div class="col-md-12">
                        <h5>Todos os Livros</h5>
                    </div>
                </div>
            </div>
            <div class="list-wrapper">
                <books-list :books="books" :loans="loans" @updateAll="updateAll()"> </books-list>
            </div>

        </div>

        <div class="col-12 col-md-4 list-wrapper" v-if="$store.state.user"> <!-- caso o user esteja autenticado -->
            <loans-list :loans="loans" @updateAll="updateAll()"> </loans-list>
        </div>
    </div>
</template>

<script type="text/javascript">
    import BookList from "./books_list.vue";
    import LoanList from "./loans_list.vue";

    export default {
        data: function() {
            return {
              //  title: "List Users",
                editingUser: false,
                showSuccess: false,
                showFailure: false,
                successMessage: "",
                failMessage: "",
                currentUser: null,
                currentUserIndex: -1,
                currentAuctionShow: null,
               //url: "api/users",
                loans:[],
                books:[],
            };
        },
        methods: {
            getBooks: function(){

                axios.get('api/books')
                    .then(response=>{this.books = response.data;});
            },
            getLoans: function(){

                axios.get('api/loans')
                    .then(response=>{this.loans = response.data.data;});
            },
            updateAll: function() {
            this.getBooks();
            this.getLoans();
        },

        },

        mounted() {
            this.getBooks();
            this.getLoans();
        },
        components: {
            "books-list": BookList,
            "loans-list": LoanList,

        },
        sockets:{
            reloadRequired: function() {
               this.getBooks();
               if(this.$store.state.user){
                  this.getLoans();
            }
           }
        }
    };
</script>

<style scoped>
.list-wrapper {
    max-height: 75vh;
    overflow-y: auto;
}
    p {
        font-size: 2em;
        text-align: center;
    }

    .center {
        text-align: center;
    }

    .button {
        background-color: #4caf50;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;


    }
</style>