<template>
  <div class="page-pagination">
    <el-pagination
      background
      hide-on-single-page
      :page-size="size"
      :layout="layout"
      :total="total"
      @current-change="emit('current-change', $event)"
      @size-change="emit('size-change', $event)"
    />
  </div>
</template>
<script setup name="page-pagination">
const props = defineProps({
  layout: {
    type: String,
    default: 'prev, pager, next',
  },
  size: {
    type: Number,
    default: 10,
  },
  total: {
    type: Number,
    default: 0,
  },
});

const emit = defineEmits(['current-change', 'size-change']);
</script>
<style lang="scss" scoped>
.page-pagination {
  width: 100%;
  padding: 50px 0;
  display: flex;
  justify-content: center;
}
</style>
