<template>
  <div class="xd-pagination-custom">
    <el-button
      :disabled="prevDisabled"
      @click="handleClick(false)"
      icon="el-icon-arrow-left"
      size="mini" style="font-size: 16px"
    ></el-button>
    <el-button
      :disabled="nextDisabled"
      @click="handleClick(true)"
      icon="el-icon-arrow-right"
      size="mini" style="font-size: 16px"
    ></el-button>
  </div>
</template>

<script>

export default {
  name: 'XdPaginationCustom',
  props: {
    pagesize: {
      type: [Number],
      default: 1,
    },
	  hasNextPage: {
		  required: true,
		  type: [Boolean],
      default: true,
    }
  },
  data(){
  	return {
      page: 1
    }
  },
  watch:{
    pagesize(val){
	    this.page = val;
    }
  },

  computed:{
    prevDisabled() {
      if (this.pagesize === 1) {
        return true;
      } else {
        return false;
      }
    },
    nextDisabled() {
      if (this.hasNextPage === false) {
        return true;
      } else {
        return false;
      }
    },
  },

  created(){
    this.page = this.pagesize;
  },
  methods: {
    handleClick(isNext){
	  	if(isNext) this.page = this.page + 1;
	  	else this.page = this.page - 1;
	  	if(this.page === 0) this.page = 1;
	  	this.$emit('update:pagesize', this.page);
      this.$emit('onPagination', this.page)
    }
  }
}
</script>

<style scoped lang="scss">
.xd-pagination-custom {
  background: #fff;
  padding: 0;

  & > * {
    padding: 5px 10px;
  }
}
</style>
