<template>
  <div class="pagination">
    <el-pagination :current-page="pagination.current"
                   :page-size="pagination.pageSize"
                   :page-sizes="pagination.pageSizes"
                   :total="pagination.total"
                   layout="total, sizes, prev, pager, next, jumper"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   @prev-click="handlePrevClick"
                   @next-click="handleNextClick"></el-pagination>
  </div>
</template>

<script>
export default {
  name: "TablePagination",
  data() {
    return {}
  },
  props: {
    pagination: {
      type: Object,
      default: () => {
        return {
          current: 1,
          pageSize: 10,
          total: 0,
          pageSizes: [10, 20, 30]
        }
      }
    }
  },
  methods: {
    // pageSize 改变时会触发
    handleSizeChange(e) {
      this.pagination.pageSize = e
      console.log(e)
      this.$emit('update:pagination', this.pagination)
      this.$emit('change', this.pagination)
    },

    // 页码
    handleCurrentChange(e) {
      this.pagination.current = e
      this.$emit('update:pagination', this.pagination)
      this.$emit('change', this.pagination)
    },

    // 上一页
    handlePrevClick(e) {
      console.log(e)
      this.pagination.current = e
      this.$emit('update:pagination', this.pagination)
      this.$emit('change', this.pagination)
    },

    // 下一页
    handleNextClick(e) {
      this.pagination.current = e
      this.$emit('update:pagination', this.pagination)
      this.$emit('change', this.pagination)
    }
  }
}
</script>

<style scoped>
.pagination {
  display: flex;
  justify-content: flex-end;
}
</style>
