<template>
  <div id="pagination" class="container">
    <ul>
        <li><a @click="setPage(pagination.first)" :class="isFirst">{{labels.first}}</a></li>
        <li><a @click="setPage(pagination.previous)" :class="isPrevious">{{labels.previous}}</a></li>
        <li><span> {{message}} </span></li>
        <li><a @click="setPage(pagination.next)" :class="isNext">{{labels.next}}</a></li>
        <li><a @click="setPage(pagination.last)" :class="isLast">{{labels.last}}</a></li>
    </ul>
  </div>
</template>

<script>

  export default {
    name: 'CustomPagination',
    props: {
            paginationDetails: {
              type: Object,
              required: true
            }
    },
    mounted() {
      //console.log('pagination Component mounted.', this.paginationDetails)
      this.labels = this.defaultLabels;      
    },
    created (){
      //console.log('pagination Component created.', this.paginationDetails)
    },
    data() {
      return {
        customLabels : {
          first: '<<',
          last: '>>',
          previous: '<',
          next: '>'
        },

        defaultLabels : {
          first: 'First',
          last: 'Last',
          previous: 'Previous',
          next: 'Next'
        },

        pagination : {
          first: 1,
          last: 4,
          previous: 2,
          next: 3,
          current:1
        },

        labels : {},

        paginationData: this.paginationDetails,

        isFirst: "",
        isPrevious: "",
        isNext: "",
        isLast: "",
      }
    },

    methods: {
      /*
      // set the page
      */
      setPage(_pageNum){
        // emit change page event to parent component
        this.$emit('changePage', _pageNum);
      },

      /*
      // update the pagination details 
      */
      updatePaginationDetails(_data){
        //paginationDetails:{message:"currentPageNum of totalPageNum", totalPageNum:0, currentPageNum:0, totalNum:0, everyPageNum:0 }
        //console.log("this.paginationDetails ---> ", this.paginationData);
        this.pagination.current = _data.currentPageNum;
        this.pagination.first = _data.totalPageNum >=1 ? 1 : 0;
        this.pagination.last = _data.totalPageNum;
        this.pagination.previous = _data.currentPageNum - 1 >=0 ? _data.currentPageNum - 1 : 0;
        this.pagination.next = _data.currentPageNum + 1 <= _data.totalPageNum ? _data.currentPageNum + 1  : _data.totalPageNum ;
        
        if(_data.currentPageNum == 1){
          this.isFirst = "disabled";
          this.isPrevious = "disabled";
        }
        else{
          this.isFirst = "";
          this.isPrevious = "";
        }

        if(_data.currentPageNum == this.paginationDetails.totalPageNum ){
          this.isLast = "disabled";
           this.isNext = "disabled";
        }
        else{
          this.isLast = "";
           this.isNext = "";
        }

      if(_data.currentPageNum > this.paginationDetails.totalPageNum  || _data.currentPageNum <= 0 ){
          this.isFirst = "disabled";
          this.isPrevious = "disabled";        
          this.isLast = "disabled";
          this.isNext = "disabled";
        }
      }
    },//end methods
    
    computed: {

      /*
      //show the message for page location
      */
      message : function(){
        //console.log("this.paginationDetails --> ", this.paginationDetails);
        this.updatePaginationDetails(this.paginationDetails);
        return this.paginationDetails.message
      }
    }

  }
</script>

<style scoped>
  ul{
    margin: 0;
    padding: 0;
    display: inline-block;
  }

  li{
    listStyle: none;
    display: inline;
    textAlign: center;
  }

  a{
    cursor: pointer;
    padding: 6px 12px;
    display: block;
    float: left    
  }
  span{
    padding: 6px 12px;
    display: block;
    float: left    
  }

</style>
