<template>
  <div v-if="pagination" class="common-pagination" :class="[`common-pagination--${position}`]">
    <el-pagination
      background
      v-bind="options"
      @size-change="handleChange($event, 'size')"
      @current-change="handleChange($event, 'page')"
    ></el-pagination>
  </div>
</template>

<script>
const defaultOption = {
  total: 0,
  currentPage: 1,
  pageSize: 10,
  pageSizes: [10, 20, 30, 40, 50],
  layout: 'prev,pager,next,sizes,total,jumper',
}

export default {
  name: 'BasePagination',
  props: {
    pagination: {
      type: [Object, Boolean],
      default: () => ({}),
    },
  },
  computed: {
    position() {
      return this.pagination.position || 'center'
    },
    options() {
      return {
        ...defaultOption,
        ...this.pagination,
        currentPage: this.pagination.current || this.pagination.currentPage,
      }
    },
  },
  methods: {
    handleChange(val, action) {
      let { currentPage: pageNo, pageSize } = this.options

      if (action === 'page') {
        pageNo = val
      }

      if (action === 'size') {
        pageNo = 1
        pageSize = val
      }

      this.$emit('change', { current:pageNo, size:pageSize })
    },
  },
}
</script>

<style lang="less" scoped>
.common-pagination {
  display: flex;

  &--left {
    justify-content: flex-start;
  }

  &--center {
    justify-content: center;
  }

  &--right {
    justify-content: flex-end;
  }
}
</style>
