<template lang="html">
  <div class="ks-pagination">
    <ul>
      <!-- <li :class="{disabled: curPage == 1}" @click="prevPage" v-if="pageCount > 1"><i class="iconfont icon-fenye-shangyiye"></i></li> -->
      <li :class="{disabled: curPage == 1}" @click="prevPage"><i class="iconfont icon-fenye-shangyiye"></i></li>
      <li :class="{active: curPage == 1}" @click="page(1)">1</li>
      <li class="ellipsis" v-show="curPage > 5 && pageCount > 10">...</li>
      <li :class="{active: curPage == index+offset}" v-for="(item,index) in middlePages" @click="page(index+offset)">{{index+offset}}</li>
      <li class="ellipsis" v-show="curPage < bigLimit && pageCount > 10">...</li>
      <li :class="{active: curPage == pageCount}" @click="page(pageCount)" v-if="pageCount > 1">{{pageCount}}</li>
      <!-- <li :class="{disabled: curPage == pageCount}" @click="nextPage" v-if="pageCount > 1"><i class="iconfont icon-fenye-shangyiye1"></i></li> -->
      <li :class="{disabled: curPage == pageCount}" @click="nextPage"><i class="iconfont icon-fenye-shangyiye1"></i></li>
    </ul>
  </div>
</template>
 <script>
  export default {
    props:['total','pagesize'],
    data(){
      return {
        curPage: 1,
        pageCount:Math.ceil(this.total/this.pagesize)
      };
    },
    computed:{
      middlePages(){
        
        if(this.pageCount <= 2){
          return 0;
        }else if(this.pageCount> 2 && this.pageCount <= 10){
          return this.pageCount-2;
        }else{
          return this.curPage > 999 ? 5 : 8;
        }
      },
      bigLimit(){
        return this.middlePages > 5 ? this.pageCount-6 : this.pageCount -3;
      },
      offset(){
        if(this.curPage <= 5){
          return 2;
        }else if(this.curPage >= this.bigLimit){
          return this.bigLimit-2;
        }else{
          return this.middlePages > 5 ? this.curPage-3 : this.curPage-2;
        }
      }
    },
    methods:{
      page(indexPage){
        this.$emit('togglePage',indexPage);
        this.curPage = indexPage;
      },
      prevPage(){
        if(this.curPage != 1){
          this.page(this.curPage-1);
        }
      },
      nextPage(){
        if(this.curPage != this.pageCount){
          this.page(this.curPage+1);
        }
      }
    }
  };
</script>
 
<style scoped>
    .ks-pagination{
        display: inline-block;
    }
    .ks-pagination ul li{
        padding: 0 4px;
        vertical-align: top;
        display: inline-block;
        font-size: 13px;
        min-width: 35.5px;
        height: 28px;
        line-height: 28px;
        cursor: pointer;
        box-sizing: border-box;
        text-align: center;
        margin: 0 5px;
        background-color: #f4f4f5;
        color: #606266;
        min-width: 30px;
        border-radius: 2px;
    }
    .ks-pagination ul li i{
        font-size: 12px;
    }
    .ks-pagination ul li.active{
        background: #e64a3b;
        color: #fff;
    }
    .ks-pagination ul li.ellipsis{
        border: none;
    }
    .ks-pagination ul li.disabled{
        color: #c0c4cc;
        cursor:not-allowed
    }
</style>