<template>
  <!-- 分页 -->
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="pagination.page"
    :page-sizes="[10, 20, 50, 100, 200, 300, 500]"
    :page-size="pagination.pageSize"
    :pager-count="pagerCount"
    layout="total, sizes, prev, pager, next, jumper"
    :total="pagination.total"
  >
  </el-pagination>
</template>
<script>
export default {
  name: 'pagination',
  props: {
    pageResult: {
      type: Object,
      default: () => {
        return {page: 1, pageSize: 20, total: 0}
      },
    },
  },
  data() {
    return {
      pagerCount: 11,
      pagination: {...this.pageResult},
    }
  },
  mounted() {
    this.$watch('pageResult', (n, o) => {
      if (n !== o) {
        this.pagination = {...n}
      }
    })
  },
  // computed: {
  //   pagination() {
  //     return this.pageResult
  //   }
  // },
  methods: {
    handleSizeChange(pageSize) {
      this.pagination = {...this.pagination, pageSize}
      this.$emit('handleSizeChange', this.pagination)
    },
    handleCurrentChange(page) {
      this.pagination = {...this.pagination, page}
      this.$emit('handleCurrentChange', this.pagination)
    },
  },
}
</script>
<style lang="scss" scoped>
/deep/ .el-select .el-input .el-select__caret {
  display: block;
}
</style>
