<template>
	<el-pagination :layout="layout" :total="total" :page-size="pageSize" :page-sizes="pageSizes" v-model:currentPage="currentPage" @current-change="paginationChange" @update:page-size="pageSizeChange"></el-pagination>
</template>

<script setup>
const $emit = defineEmits(["update:pageNo", "update:pageSize", "paginationChange"]);
const props = defineProps({
    total: { type: Number, default: 20 },
    layout: { type: String, default: "total, sizes, prev, pager, next" },
	pageNo: { type: Number, default: 1 },
	pageSize: { type: Number, default: 10 },
    pageSizes: { type: Array, default: () => [10, 20, 30, 40, 50] } // [20, 30, 100]
});

const currentPage = ref(props.pageNo);
const pageSizeChange = e => {
    $emit("update:pageSize", e);
    $emit("paginationChange", "edit");
};
const paginationChange = e => {
    $emit("update:pageNo", e);
    $emit("paginationChange", "edit");
};
</script>