<template>
  <el-pagination
    class="ps-pagination"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="pageObj.pageNumber"
    :page-sizes="sizes"
    :page-size="pageObj.pageSize"
    :layout="layout"
    :total="pageObj.total"
    :pager-count="pagerCount"
  >
  </el-pagination>
</template>

<script>
export default {
  name: 'PsPagination',
  props: {
    pageObj: {
      type: Object,
      default: () => {}
    },
    sizes: {
      type: Array,
      default: () => [10, 20, 30, 40, 50, 60, 70, 80, 100, 200]
    },
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    },
    pagerCount: {
      type: Number,
      default: 7
    }
  },
  data() {
    return {}
  },
  watch: {
    'pageObj.pageSize': {
      handler(val) {
        this.pageSize = val
      },
      immediate: true
    },
    'pageObj.pageNumber': {
      handler(val) {
        this.pageNumber = val
      },
      immediate: true
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
      this.pageNumber = 1
      this.$set(this.pageObj, 'pageSize', this.pageSize)
      this.$set(this.pageObj, 'pageNumber', this.pageNumber)
      this.pageObj.changeSize(this.pageNumber, this.pageSize)
    },
    handleCurrentChange(val) {
      this.pageNumber = val
      this.$set(this.pageObj, 'pageSize', this.pageSize)
      this.$set(this.pageObj, 'pageNumber', this.pageNumber)
      this.pageObj.changePage(this.pageNumber, this.pageSize)
    }
  }
}
</script>

<style>
</style>
