<template>
  <el-pagination
    class="es-pagination"
    :class="{ 'es-pagination-complete': isComplete && position != 'center' }"
    v-bind="$attrs"
    :current-page="pageNum"
    :page-size="pageSize"
    :page-sizes="limits"
    :layout="layout"
    :total="totalCount"
    :pager-count="groups"
    :hide-on-single-page="hideOnSinglePage"
    :unit="false"
    @size-change="handleSize"
    @current-change="handleCurrent"
    @prev-click="handlePrev"
    @next-click="handleNext"
  >
  </el-pagination>
</template>
<script>
import util from 'eoss-ui/src/utils/util';
const paginationLayout = util.getWinTopProperty(
  'tableLayout',
  'prev, pager, next, sizes, total'
);
export default {
  name: 'EsPagination',
  inheritAttrs: false,
  computed: {
    isComplete() {
      return (
        this.layout.indexOf('total') > -1 &&
        this.layout.indexOf('sizes') > -1 &&
        this.layout.indexOf('prev') > -1 &&
        this.layout.indexOf('pager') > -1 &&
        this.layout.indexOf('next') > -1 &&
        this.layout.indexOf('jumper') > -1
      );
    }
  },
  props: {
    position: String,
    // 当前页码
    pageNum: {
      type: Number,
      default: 1
    },
    // 每页显示的条数
    pageSize: {
      type: Number,
      default: 20
    },
    // 每页条数的选择项
    limits: {
      type: Array,
      default() {
        return [10, 20, 30, 40, 50, 100];
      }
    },
    // 总页数
    pageCount: Number,
    // 总条目数
    totalCount: Number,
    // 自定义排版
    layout: {
      type: String,
      default: paginationLayout
    },
    // 只有一页时是否隐藏
    hideOnSinglePage: {
      type: Boolean,
      default: false
    },
    // 页码按钮的数量
    groups: {
      type: Number,
      default: 7
    }
  },
  methods: {
    handleSize(res) {
      this.$emit('change', res);
    },
    handleCurrent(res) {
      this.$emit('current', res);
    },
    handlePrev(res) {
      this.$emit('prev', res);
    },
    handleNext(res) {
      this.$emit('next', res);
    }
  }
};
</script>
