<script lang="ts" setup name="pages">
const emits = defineEmits(['handleSizeChange', 'handleCurrentChange'])

import { watch } from 'vue'
// 接收父页面数据
const props = defineProps<{
  pageTotal: number
  pageCurrent: number
  pageSize: number
}>()

watch(
  () => props.pageTotal,
  (newValue) => {
    console.log(newValue)
  }
)
const handleSizeChange = (val: number) => {
  console.log(val)
  emits('handleSizeChange', val)
}
const handleCurrentChange = (val: number) => {
  console.log(val)
  emits('handleCurrentChange', val)
}
</script>
<template>
  <el-pagination
    :current-page="pageCurrent"
    :page-size="pageSize"
    :total="pageTotal"
    background
    layout="prev, pager, next,total,jumper"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    class="mt20"
  />
</template>
<style scoped>
.el-pagination {
  justify-content: center;
}
</style>
