<template>
  <div style="margin-top: 20px">
    <el-pagination
      v-model:currentPage="pageData.pageNo"
      v-model:page-size="pageData.pageSize"
      :page-sizes="[10, 15, 20]"
      :small="pageData.small"
      :disabled="pageData.disabled"
      :background="pageData.background"
      layout="->, total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      hide-on-single-page
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
let props = defineProps({
  pageData: {
    type: Object,
    default: {
      pageNo: {
        type: Number,
        default: 1,
      },
      pageSize: {
        type: Number,
        default: 10,
      },
      small: {
        type: Boolean,
        default: false,
      },
      disabled: {
        type: Boolean,
        default: false,
      },
      background: {
        type: String || Boolean,
        default: "" || false,
      },
    },
  },
  total: {
    type: Number,
    default: 0,
  },
});

let emits = defineEmits(["sizeChange", "currentChange"]);

// 新条数
const handleSizeChange = (val: number) => {
  emits("sizeChange", val);
};

// // 新页数
const handleCurrentChange = (val: number) => {
  emits("currentChange", val);
};
</script>
