<template>
  <div :class="cls">
  	<!--　分页  -->
    <el-pagination
    	:current-page="listQuery.page"
    	:page-sizes="[10,20,30, 50]"
    	:page-size="listQuery.limit"
    	:total="total"
    	background
    	:layout="layout"
    	@size-change="handleSizeChange"
    	@current-change="handleCurrentChange"/>
	</div>
</template>

<script>


export default {
  name: 'swPage',
  props:["listQuery","total","pos"],
  data() {
    return {
    	layout:"prev, pager, next, jumper",
    	cls:"page-cont-left",
    }
  },
  created() {
  	if("topLeft" === this.pos){
  		this.layout =  "prev, pager, next, jumper";
  		this.cls = "page-cont-left";
  	}if("topRight" === this.pos){
      this.layout =  "prev, pager, next, jumper";
      this.cls = "page-cont-btm-right";
    }else if("btmRight" === this.pos){
  		this.layout="total, sizes, prev, pager, next, jumper";
  		this.cls = "page-cont-btm-right";
  	}else{
  		this.layout =  "prev, pager, next, jumper";
  		this.cls = "page-cont-left";
  	}
  },
  methods:{
	handleSizeChange(val) {
      this.listQuery.pageSize = val;
      this.$emit("retPage");
    },
    handleCurrentChange(val) {
      this.listQuery.currentPage = val;
      this.$emit("retPage");
    },
  }
}
</script>

<style scoped>

	.page-cont-left{
		margin-top: 10px;
	}
	.page-cont-btm-right{
		margin-top: 10px;
		margin-bottom: 10px;
		float: right;
		display: flex;
    justify-content: flex-end;
	}


</style>

