<template>
  <div class="el-pagination">
    <el-pagination
      :background="background"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :page-sizes="pageSizes"
      :layout="layout"
      :total="total"
      :pager-count="pagerCount"
    ></el-pagination>
  </div>
</template>
<script>
export default {
  props: {
    layout:{
      type:String,
      default:"sizes,total, prev, pager, next, jumper"
    },
    currentPage: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 20
    },
    pageSizes: {
      type: Array,
      default:() => {
        return [10, 20, 30, 40, 50, 100]
      }
    },
    total: {
      type: Number,
      default: 0
    },
    background:{
      type:Boolean,
      default:true
    },
    pagerCount: {
      type: Number,
      default: 5
    }
  },
  data() {
    return {
      // currentPage: 1
    };
  },
  methods: {
    handleSizeChange(e) {
      this.$emit("eventSizeChange", e);
    },
    handleCurrentChange(e) {
      this.$emit("eventCurrentChange", e);
    }
  }
};
</script>
<style lang="scss" scoped>
.el-pagination {
  // position: fixed;
  // right: 50px;
  // bottom: 30px;
  text-align: right;
  margin: 8px 0;
}
</style>