<template>
  <el-pagination
      v-if="total>0"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :background="!small"
      :pager-count="small?5:7"
      :small="small"
      :current-page="currentPage"
      :page-sizes="[5, 10, 20, 30, 40, 50]"
      :page-size="pageSize"
      :layout="small?'total, prev, pager, next':'total, sizes, prev, pager, next, jumper'"
      :total="total">
  </el-pagination>
</template>

<script>
export default {
  name: "Pagination",
  props: {
    total: {
      type: Number,
      require: true
    },
    page: {
      type: Number,
      require: false,
      default: 1
    },
    size: {
      type: Number,
      require: false,
      default: 10
    },
    small: Boolean
  },
  computed: {
    currentPage: {
      get() {
        return this.page
      },
      set(val) {
        this.$emit('update:page', val)
      }
    },
    pageSize: {
      get() {
        return this.size
      },
      set(val) {
        this.$emit('update:size', val)
      }
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.$emit("change", this.pageSize, this.currentPage)
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.$emit("change", this.pageSize, this.currentPage)
    }
  },
}
</script>

<style scoped lang="scss">
.el-pagination {
  text-align: end;
  padding: 20px 0;
}
</style>
