<template>
  <div class="page-num">
    <el-pagination
      :small="true"
      :background="true"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      hide-on-single-page
      :current-page="pageNum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>
<script>
export default {
  name: 'PageNum',
  props: {
    pageSize: {
      type: Number,
      default: 10
    },
    pageNum: {
      type: Number,
      default: 1
    },
    total: {
      type: Number,
      default: 50
    },
  },
  data() {
    return {

    }
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.$emit('changePageSize', val)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.$emit('changePageNum', val)
    }
  }
}
</script>
<style lang="scss">
.page-num {
  .el-pager li.active {
    color: #169bd5;
  }
  .el-pager li:hover {
    color: #169bd5;
  }
  .el-pagination__sizes .el-input .el-input__inner {
    font-size: 12px;
  }
  .el-input--mini .el-input__inner {
    height: 22px;
    line-height: 22px;
  }
  .el-input--mini .el-input__icon {
    line-height: 22px;
  }
  .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #169bd5;
  }
}
.el-select-dropdown__item.selected {
  color: #169bd5 !important;
}
</style>