<template>
  <div class="wrapper">
    <el-pagination
      background
      layout="total, prev, pager, next, sizes, jumper"
      :total="pagination.total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    ></el-pagination>
  </div>
</template>

<script>
export default {
  props: {
    total: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      pagination: {
        size: 10,
        total: this.total,
        page: 1
      }
    }
  },
  watch: {
    total(val) {
      this.pagination.total = val
    }
  },
  mounted() {
    this.$emit('pager', { ...this.pagination })
  },
  methods: {
    handleCurrentChange(page) {
      this.$emit('pager', { ...this.pagination, page })
    },
    handleSizeChange(size) {
      this.$emit('pager', { ...this.pagination, size })
    }
  }
}
</script>
<style lang="scss" scoped>
.wrapper {
  display: flex;
  justify-content: flex-end;
}
</style>