<template>
	<div class="pagination QdmPage">
	    <el-pagination
	    background
	    @size-change="handleSizeChange"
	    @current-change="handleCurrentChange"
	    :current-page="page"
	    :page-sizes="step"
	    :page-size="size"
	    :pager-count="5"
	    layout="total, sizes, prev, pager, next, jumper"
	    :total="total"
	    :hide-on-single-page="singlehide"
	    :prev-text="'上一页'"
	    :next-text="'下一页'">
	    </el-pagination>
	</div>
</template>
<script>
export default {
	name: "QdmPage",
	data () {
    return {
      pageSize: 0
    }
	},
	props: {
    step: {
      type: Array,
      default: function () {
        return [20, 30, 50, 100]
      }
    },
    size: {
      type: Number,
      default: 20
    },
    page: {
      type: Number,
      default: 1
    },
    total: {
      type: Number,
      default: 0
    },
    singlehide: {
      type: Boolean,
      default: true
    }
	},
	methods: {
    handleSizeChange (val) {
      this.pageSize = val
      this.$emit('handlePageSize', 1, val)
      this.pageSize = 0
    },
    handleCurrentChange (val) {
      this.$emit('handlePage', val, this.pageSize || this.size)
      this.pageSize = 0
    }
	}
}
</script>
<style lang="less">
.QdmPage {
	.el-pagination {
  text-align: center !important;
  padding-top: 15px !important;
  position: relative;
  text-align: right;
  font-size: 12px;
  border-top: 1px solid #E3E3E3;
  margin-top: 10px;
  button {
    line-height: 30px;
    height: 30px;
    &.btn-prev,
    &.btn-next {
      background: #FFFFFF  !important;
      width: 60px;
      border-radius: 3px;
      border: 1px solid #E5E5E5;
      >span {
        color: #333333;
        font-size: 12px;
      }
    }
  }
  .el-pager {
    .number {
      background-color: #FFFFFF  !important;
      border: 1px solid #E5E5E5  !important;
      font-size: 12px;
      color: #333333;
      line-height: 28px;
      height: 30px;
      border-radius: 3px !important;
      &.active {
        background-color: #4D73DA  !important;
      }
    }
  }
  &.is-background {
    .el-pager {
      li {
        background: #FFFFFF  !important;
      }
    }
  }
  .el-input__inner {
    border-color: #E5E5E5  !important;
  }
  .el-pagination__sizes {
    position: absolute;
    left: 0px;
    .el-input {
      margin-left: 0px;
      color: #333333;
      .el-input__inner {
        font-size: 12px;
      }
    }
  }
  .el-pagination__total {
    position: absolute;
    left: 115px;
    font-size: 12px !important;
    color: #999999;
  }
  .el-pagination__jump {
    font-size: 12px !important;
    .el-input__inner {
      font-size: 12px;
      border-radius: 3px;
      line-height: 30px;
      height: 30px;
    }
  }
}	
}
</style>
