<template>
  <div class="pagination-container">
    <template v-if="pages > 0">
      <div>
        <ul class="pagination light-theme simple-pagination">
          <li class="prev" v-bind:class="{'disabled':currentPage<2}" @click="prev">
            <span class="current prev">Prev</span>
          </li>
          <li v-if="showFirst" @click="nav('1')">
            <a  href="javascript:void(0)">1</a>
          </li>
          <li v-if="showFirst" class="disabled"><span class="ellipse">…</span></li>

          <li v-for="n in draw" v-bind:class="{'active':n===currentPage}" @click="nav(n)">
            <a  href="javascript:void(0)">{{n}}</a>
          </li>

          <li v-if="showLast" class="disabled"><span class="ellipse">…</span></li>
          <li v-if="showLast" @click="nav(pages)">
            <a  href="javascript:void(0)">{{pages}}</a>
          </li>

          <li class="next" v-bind:class="{'disabled':currentPage>pages-1}" @click="next">
            <span class="current next">Next</span>
          </li>
        </ul>
      </div>
    </template>
  </div>
</template>

<script type="text/javascript">
  export default {
    props: {
      pageSize: {
        type: Number,
        default: 10
      },
      pages: {
        type: Number,
        required: true
      },
      currentPage: {
        type: Number,
        required: true
      }
    },
    computed:{
      showFirst(){
        return this.currentPage>3?true:false
      },
      showLast(){
        if(this.pages-3<this.currentPage){
          return false;
        }
        return true;
      },
      draw(){
        var bll=this,arr=[];
        let beginNum = bll.currentPage - 2;
        if (beginNum > bll.pages - 4) beginNum = bll.pages - 4;
        if (beginNum < 1) beginNum = 1;
        let endNum = beginNum + 4;
        if (endNum > bll.pages) endNum = bll.pages;
        for (let i = beginNum; i <= endNum; i++)
        {
            arr.push(i);
        }
        return arr;
      }
    },
    methods:{
      nav(n){
        this.currentPage=+n;
        this.$dispatch('page', this.currentPage);
      },
      prev(){
        if(this.currentPage>0){
          this.nav(this.currentPage-1)
        }
      },
      next(){
        if (this.currentPage<this.pages) {
          this.nav(this.currentPage+1);
        }
      }
    }
  }
</script>
<style>
  .prev,.next{
    cursor: pointer
  }
</style>