<template>
    <div class="pagination">
        <n-pagination v-bind="props" v-model:page="pager.page" 
            :prefix="(pagingInfo) =>`共${pagingInfo.itemCount} 条`"
            :showQuickJumper="pager.jumper?true:false"
            v-model:pageSize="pager.size" :item-count="pager.count" @pageSize="sizeChange"
            @update:page="pageChange"></n-pagination>
    </div>
</template>

<script lang="ts" setup>
import { computed } from "vue";

interface Props {
    modelValue?: Record<string, any>,
}
const props = withDefaults(defineProps<Props>(), {
    modelValue: () => ({}),
})

const emit = defineEmits<{
    (event: 'change'): void
    (event: 'update:modelValue', value: any): void
}>()

const pager = computed({
    get() {
        return props.modelValue
    },
    set(value) {
        console.log(value)
        emit('update:modelValue', value)
    }
})
const sizeChange = () => {
    pager.value.page = 1
    emit('change')
}
const pageChange = (e) => {
    emit('change')
}
</script>
