<template>
    <Paginator :rows="10"  :first="first" :pageSize="+pageSize" :totalRecords="total"
        :currentPageReportTemplate="$t('currentPageReportTemplate')"
        template="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
        :alwaysShow="true" @page="paginate" />
</template>

<script setup>
import { computed, ref } from "vue"
import { useRoute, useRouter } from "vue-router";

const props = defineProps(['total'])

const route = useRoute()

const { page = 1, pageSize = 10 } = route.query

const first = computed(() => (+page - 1) * +pageSize)

const router = useRouter()

const paginate = (event) =>
    router.replace({ query: { page: event.page + 1, pageSize: event.pageSize } })
</script>

<style lang="scss" scoped></style>