<template>
  <el-pagination
    size="small"
    :current-page="pagination.currentPage || 1"
    :page-size="pagination.pageSize || 10"
    layout="total, sizes, prev, pager, next, jumper"
    :total="pagination.total || 0"
    @update:current-page="handleCurrentChange"
    @update:page-size="handleSizeChange"
  />
</template>

<script setup>
import { ElPagination } from "element-plus";
import "element-plus/es/components/pagination/style/css";

defineOptions({
  name: "AppPagination",
});
const emits = defineEmits(["get-data"]);
const pagination = defineModel("pagination", { type: Object, required: true });
const handleCurrentChange = (val) => {
  pagination.value = {
    currentPage: val,
    pageSize: pagination.value.pageSize,
    total: pagination.value.total,
  };
  emits("get-data");
};
const handleSizeChange = (val) => {
  pagination.value = {
    currentPage: 1,
    pageSize: val,
    total: pagination.value.total,
  };
  emits("get-data");
};
</script>

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