<template>
  <!-- 自定义页码 -->
  <div class="pagenation">
    <el-pagination background class="text-center" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                   :current-page.sync="currentPage" :page-sizes="pageSizes" :page-size="page.pageSize"
                   layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  props: {
    total: {
      type: Number
    }, // 总条数
    defaultPage: {
      type: Number
    },
    pageSizes: {
      type: Array,
      default: [12, 36, 120, 240]
    }
  },
  data() {
    return {
      //   pageSizes: [10,30,50,100,200],
      page: {
        page: 1,
        pageSize: this.pageSizes[0],
      }
    };
  },
  computed: {
    currentPage: {
      get() {
        return this.defaultPage
      },
      set(val) {
        this.$emit('update:defaultPage', val);
      }
    },
  },
  methods: {
    // // 每页查看条数变化
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.page.pageSize = val;
      this.$emit('pageChange', this.page);
    },
    // 当前页码变化
    handleCurrentChange(val) {
      this.page.page = val;
      this.$emit('pageChange', this.page);
    }
  },

}
</script>

<style scoped>
.pagenation {
  margin: 20px 0;
}
</style>
