<template>
  <div class="bg-pagination">
    <el-pagination
      :small="small"
      :current-page="numberOfPage"
      :page-size="numberOfPageSize"
      :page-sizes="pageSizes"
      :layout="layout"
      :total="total"
      :background="background"
      :disabled="disabled"
      @size-change="changeSize"
      @current-change="changePage" />
  </div>
</template>

<script setup>
import { computed } from "vue";
const props = defineProps({
  small: {
    type: Boolean,
    default: () => false,
  },
  page: {
    type: [String, Number],
    default: 1,
  },
  size: {
    type: [String, Number],
    default: 10,
  },
  pageSizes: {
    type: Array,
    default: () => [10, 50, 100],
  },
  total: {
    type: Number,
    default: 0,
  },
  layout: {
    type: String,
    default: "total, sizes, prev, pager, next, jumper",
  },
  background: {
    type: Boolean,
    default: false,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits(["change-page", "change-size"]);
const numberOfPage = computed(() => Number(props.page));
const numberOfPageSize = computed(() => Number(props.size));
const changePage = (val) => {
  emit("change-page", val);
};

const changeSize = (val) => {
  emit("change-size", val);
};
</script>
