<template>
  <el-pagination
    :currentPage="props.pager.page"
    :page-size="props.pager.pageSize"
    :total="props.pager.total"
    :background="props.pageBackGround"
    :layout="props.pageLayout"
    :hide-on-single-page="props.isHideOnlyOne"
    :page-sizes="props.pageSizeList"
    @size-change="pageSizeChange"
    @current-change="pageCurrentChange"
  />
</template>

<script setup>
  defineOptions({ name: 'elPager' })
  import { reactive, ref, onMounted,watch } from 'vue'
  import { ElMessageBox, ElMessage,ElPagination } from 'element-plus'

  const props = defineProps({
    // table分页
    pager: {
      type: Object,
      default: {}
    },
    // 分页显示内容
    pageLayout: {
      type: String,
      default: 'total, sizes,prev, pager, next'
    },
    // 只有一页是否隐藏
    isHideOnlyOne:{
      type:Boolean,
      default: false
    },
    // 是否有底色
    pageBackGround:{
      type:Boolean,
      default: true
    },
    // 页数下拉
    pageSizeList:{
      type: Object,
      default: [10, 20, 50, 100]
    },
  })

  const emits = defineEmits(['pageSizeChange', 'pageCurrentChange'])
  
  // size-change
  function pageSizeChange(pageSize){
    emits('pageSizeChange',pageSize)
  }

  // current-change
  function pageCurrentChange(page){
    emits('pageCurrentChange',page)
  }

  onMounted(() => {})

</script>
  
<style></style>
  