export default {
    props: {
        // Método que se llama al hacer clic sobre una página.
        'items': {
            type: Array
        },
        // Pagina actual.
        'page': {
            type: Number,
            default: 1
        },
        // Número de items por página.
        'per-page': {
            type: Number,
            default: 1
        }
    },

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

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

    computed: {
        // Todo
    },

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

    template:`
        <div>
            <slot v-for="item in list" :item="item"></slot>
        </div>
    `,

    methods: {

        /**
         * Pagina el listado de items.
         */
        paginate(){
            this.list = this.items.slice((this.currentPage - 1) * this.perPage, this.currentPage * this.perPage);
        }

    }
};