/*分页组件*/ 
<template>
  <div class="page-content">
    <el-pagination
      background
      :hide-on-single-page="paginationConfig.hideSinglePage"
      :current-page="paginationConfig.page"
      :page-size="paginationConfig.size"
      :page-sizes="paginationConfig.sizeList"
      :layout="paginationConfig.layout"
      :pager-count="5"
      :total="paginationConfig.total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    ></el-pagination>
    <el-button
      size="mini"
      icon="el-icon-refresh"
      @click.native.prevent="refresh"
      >刷新</el-button
    >
  </div>
</template>
<script>
export default {
  name: 'Pagination',
  props: {
    paginationConfig: {
      hideSinglePage: {
        type: Boolean,
        default: () => false,
      },
      page: {
        type: Number,
        default: () => 1,
      },
      size: {
        type: Number,
        default: () => 15,
      },
      sizeList: {
        type: Array,
        default: () => [10, 15, 30, 50],
      },
      layout: {
        type: String,
        default: () => 'total, sizes, prev, pager, next, jumper',
      },
      total: {
        type: Number,
        default: () => 0,
      },
    },
  },
  data() {
    return {}
  },
  created() {},
  methods: {
    // 改变当前页数
    handleCurrentChange(val) {
      this.paginationConfig.page = val
      this.$emit('putPagination', this.paginationConfig)
    },
    // 改变每页展示条数
    handleSizeChange(val) {
      this.paginationConfig.size = val
      this.$emit('putPagination', this.paginationConfig)
    },
    // 刷新
    refresh() {
      this.$emit('putPagination', this.paginationConfig)
    },
  },
}
</script>
<style lang="scss">
@import '@/styles/variables.scss';
@import '@/styles/mixin.scss';
.page-content {
  @include flex(flex-start);
  .el-pagination {
    padding: 2px 0;
    .el-select .el-input {
      margin: 0;
      width: 80px;
    }
    .el-pagination__jump {
      margin-left: 10px;
    }
    &.is-background {
      .el-pager li {
        background-color: $color_f2;
        font-size: 12px;
        color: $color_9;
        border-radius: 4px;
        &:not(.disabled).active {
          color: $color_3;
          background-color: $color_f;
          border: 1px solid $color_f2;
        }
        &:not(.disabled):hover {
          color: #2cae00;
        }
      }
    }
  }
  .el-button {
    margin: 0 10px;
    padding: 7px 10px;
  }
}
</style>
