<script>
export default {
  props: {
    pageInfo: { type: Object, default: () => ({}) }
  },

  render (h) {
    const onPageInfoChange = this.$listeners['page-info-change'] && {
      'size-change': (size) => {
        // eslint-disable-next-line vue/no-mutating-props
        this.pageInfo.size = size
        this.$listeners?.['page-info-change']()
      },
      'current-change': (current) => {
        // eslint-disable-next-line vue/no-mutating-props
        this.pageInfo.current = current
        this.$listeners?.['page-info-change']()
      }
    }
    return h('el-pagination', {
      props: {
        background: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        currentPage: this.pageInfo.current,
        pageSize: this.pageInfo.size,
        pageSizes: [10, 30, 50, 100],
        ...this.pageInfo
      },
      on: { ...this.$listeners, ...onPageInfoChange }
    })
  }
}
</script>
