<!-- 
* @name: 自定义分页组件
* @author: Zhangpengcheng
* @date: 2022-09-05
-->
<template>
	<div class="pageTion" flex="main:right">
		<el-pagination ref="pagination" :page-sizes="[10,20, 30, 40,100]" :total="pageModel.total" :current-page="pageModel.pageIndex" :page-size="10"
			@current-change="currentChange" @size-change="sizeChange" background layout="prev, pager, next,jumper,total,sizes">
		</el-pagination>
	</div>
</template>
<script>
	export default {
		props: {
			pageModel: {
				default: null
			}
		},
		data() {
			return {}
		},
		created() {},
		mounted() {
			this.$nextTick(() => {
			})
		},
		computed: {},
		methods: {
			sizeChange(val) {
				let pageModel = this.pageModel;
				pageModel.pageSize = val;
				this.$emit('update:pageModel', pageModel)
				this.$emit('onPageChange')
			},
			currentChange(val) {
				let pageModel = this.pageModel;
				pageModel.pageIndex = val;
				this.$emit('update:pageModel', pageModel)
				this.$emit('onPageChange')
			},
		},
	}
</script>
<style scoped lang='scss'>
.pageTion {
  width: 100%;
  margin: 10px 0;
}
::v-deep .el-pager li {
  background-color: #f9f9f9 !important ;
  width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
  border-radius: 50% !important;
}
::v-deep .el-pager .active {
  background-color: #409EFF !important; 
}
::v-deep .el-pagination button {
  background-color: #f9f9f9 !important;
  color: #333333 !important;
  font-size: 14px !important;
  border-radius: 18px !important;
  width: 98px !important;
  height: 36px !important;
}
::v-deep .el-pagination__total {
  line-height: 36px !important;
}
::v-deep .el-pagination__jump {
  height: 36px !important;
  line-height: 36px !important;
}
::v-deep .el-input__inner {
  height: 36px !important;
  line-height: 36px !important;
}
</style>
