//Vue Paginate
import VuePaginate from 'vuejs-paginate';

export default {
    props: {
        // Método que se llama al hacer clic sobre una página.
        'onPageChange': {
            type: Function
        },
        // Número total de páginas.
        'pages': {
            type: Number
        },
        // Pagina actual.
        'page': {
            type: Number,
            default: 1
        },
        // Número de páginas que se muestran en los márgenes si hay muchas páginas.
        'offset': {
            type: Number,
            default: 1
        }
    },

    data: function(){
        return {
            currentPage: 1
        };
    },

    watch: {
        page: function(val){
            this.currentPage = val;
        }
    },

    computed: {
        // Todo
    },

    created: function(){
        this.currentPage = this.page;
    },

    template:`
        <paginate
            v-model="currentPage"
            :page-count="pages"
            :click-handler="onPageChange"
            :container-class="'pagination'"
            :page-class="'page-item'"
            :margin-pages="offset"
            :prev-text="'«'"
            :next-text="'»'"    
        >
        </paginate>   
    `,

    methods: {

    },

    components: {
        'paginate': VuePaginate
    }
};