<!--
 * @Description: 通用分页组件
 * @Author: wenjing
 * @Date: 2023-05-15 17:05:56
-->
<template>
  <el-pagination layout="total, prev, pager, next, sizes, jumper" 
    :current-page.sync="curPage" :page-size.sync="curPageSize" :page-sizes="pageSizeList"
    :total="total" @current-change="handleCurPageChange" @size-change="handlePageSizeChange">
  </el-pagination>
</template>

<script>
export default {
  name:'Pagination',
	props:['page', 'pageSize', 'total'],

  data() {
    return {}
  },

  computed: {
    curPage: {
      get() {
        return this.page;
      },
      set(page) {
        this.$emit('update:page', page);
      }
    },
    
    curPageSize: {
      get() {
        return this.pageSize;
      },
      set(pageSize) {
        this.$emit('update:pageSize', pageSize);
      }
    },

    pageSizeList() {
      return this.commonConst.PAGE_SIZES;
    }
  },

	methods: {    
		handleCurPageChange(page) {
			this.$emit('refresh', { page: page, pageSize: this.curPageSize })
		},

		handlePageSizeChange(pageSize) {
			this.$emit('refresh', { page: this.curPage, pageSize: pageSize })
		}
	}
}
</script>

<style>

</style>