<template>
  <a-pagination
    style="margin-top: 20px; justify-content: end"
    background
    show-total
    show-jumper
    :show-page-size="!simple"
    :simple="simple"
    :current="page.pageIndex"
    :page-size-options="page.sizes"
    :page-size="page.pageSize"
    :total="page.total"
    @change="currentChangeHandle"
    @page-size-change="sizeChangeHandle"
  />
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  props: {
    page: {
      type: Object,
      required: true
    },
    simple: {
      type: Boolean,
      required: false
    }
  },
  emits: ['change'],
  setup(props, { emit }) {
    /**
     * 当前页变化事件
     * @param pageIndex
     */
    const currentChangeHandle = (pageIndex: number): void => {
      emit('change', { pageIndex, pageSize: props.page.pageSize })
    }

    /**
     * 当前页数发送变化事件
     * @param pageSize 页数
     */
    const sizeChangeHandle = (pageSize: number): void => {
      emit('change', { pageIndex: props.page.pageIndex, pageSize })
    }

    return {
      currentChangeHandle,
      sizeChangeHandle
    }
  }
})
</script>

<style lang="less" scoped>
.page {
  text-align: center;
}
</style>
