<template>
   <el-pagination
      v-model:current-page="props.pageNum"
      v-model:page-size="props.pageSize"
      :page-sizes="props.pageSizeS"
      :small="props.small"
      :disabled="props.disabled"
      :background="props.background"
      :layout="props.layout"
      :total="props.total"
      :prev-text="prevText"
      :next-text="nextText"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
</template>

<script lang="ts" setup>
 const emits =  defineEmits(['sendPage'])
 const props = defineProps({
    pageNum:{
        type:Number,
        default:1
    },
    pageSize:{
        type:Number,
        default:15
    },
    pageSizeS:{
        type:Array,
        default:[100, 200, 300, 400]
    },
    small:{
        type:Boolean,
        default:false
    },
    disabled:{
        type:Boolean,
        default:false
    },
    background:{
        type:Boolean,
        default:false
    },
    layout:{
        type:String,
        default:"total, sizes, prev, pager, next, jumper"
    },
    prevText:{
        type:String,
        default:"上一页"
    },
    nextText:{
        type:String,
        default:"下一页"
    },
    total:{
        type:Number,
        default:0
    }
 })
 const handleSizeChange=()=>{
    let pageInfo ={
        pageNum:props.pageNum,
        pageSize:props.pageSize
    }
    emits("sendPage",pageInfo)
 }
 const handleCurrentChange=()=>{
    let pageInfo ={
        pageNum:props.pageNum,
        pageSize:props.pageSize
    }
    emits("sendPage",pageInfo)
}




</script>

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