<template>
    <v-sheet
        tile
        color="transparent"
        :max-width="maxWidth"
    >
        <v-select
            dense
            hide-details
            :items="pageSizes"
            v-model="perPage"
            class="text-body-2"
        >
            <template v-slot:item="{item}">
                <span :class="itemHtmlClass">
                    {{ item.text }}
                </span>
            </template>
        </v-select>
    </v-sheet>
</template>

<script>

    export default {

        props: {
            dataprovider: {required: true},
            
            maxWidth: {default: 96},

            sizes: {default: () => ([
                {text: 'Toate', value: -1},
                {text: 5, value: 5},
                {text: 10, value: 10},
                {text: 15, value: 15},
                {text: 20, value: 20},
                {text: 25, value: 25},
                {text: 50, value: 50},
                {text: 100, value: 100},
                {text: 200, value: 200},
            ])},

            itemHtmlClass: { default: () => (['text-body-2'])},
        },

        computed: {
            perPage: {
                get: function() {
                    return this.dataprovider.per_page;
                },

                set: function(per_page) {
                    this.dataprovider.ChangePerPage(per_page)
                }
            },

            pageSizes() {
                return _.map(this.sizes, size => ({
                    ...size,
                    text: this.__(size.text),
                }))
            }
        },

        name: 'CsPerPageSelection',
    }
</script>