<template>
  <nav class="pagination-box">
    <ul class="pagination">
      <li class="pageNum page-item">
        共&nbsp;{{total}}&nbsp;条记录&nbsp;每页显示
        <div class="page-display" >
          <span :class="{'icon-tri-up' : show, 'icon-tri-down': !show}" class="select-icon"></span>
          <input @click="show = !show" v-model="page_size" class="select-num" readonly="readonly">
          <transition name="fade">
            <ul class="display-select" v-if="show">
              <li ref="pagenumSelect" v-for="(option, index) in options" @click="showPages(index)">{{ option.value }}
              </li>
            </ul>
          </transition>
        </div>
        条记录
      </li>
      <li class="page-item" :class="{'disabled': current == 1}">
        <a class="prve" href="javascript:;" @click="setCurrent(current - 1,1)">上一页 </a>
      </li>
      <li class="page-item" v-if="total > 0" :class="{'active': current == 1}">
        <a class="page" href="javascript:;" @click="setCurrent(1,1,$event)"> 1 </a>
      </li>
      <li
        class="page-item prevmore"
        v-if="showPrevMore"
        @click="setCurrent('',1,$event)"
        >
        <a class="page prevmore" href="javascript:;" > ... </a>
      </li>
     <!--  <li class="page-item" :class="{'disabled': current == 1}">
        <a class="start" href="javascript:;" @click="setCurrent(1,1)"> 首页 </a>
      </li> -->
      <li class="page-item" v-for="p in pagers" :class="{'active': current == p}">
        <a class="page" href="javascript:;" @click="setCurrent(p,1,$event)"> {{ p }} </a>
      </li>
      <li
        class="page-item "
        v-if="showNextMore"
        @click="setCurrent('',1,$event)">
        <a class="page nextmore" href="javascript:;" > ... </a>
      </li>
      <li class="page-item" v-if="page > 1" :class="{'active': current == page}">
        <a class="page" href="javascript:;" @click="setCurrent(page, 1,$event)"> {{page}} </a>
      </li>
      <!-- <li class="page-item" :class="{'disabled': current == page}">
        <a class="end" href="javascript:;" @click="setCurrent(page,1)"> 尾页 </a>
      </li> -->
      <li class="page-item" :class="{'disabled': current == page}">
        <a class="next" href="javascript:;"  @click="setCurrent(current + 1,1,$event)"> 下一页</a>
      </li>
      <li class="jump-cont page-item">
        跳至<input type="text" class="jump-page" v-model="jumpTos">页
        <a class="jump-to" @click="setCurrent(jumpTos,1,$event)">确定</a>
      </li>
    </ul>
  </nav>
</template>

<script>
  export default {
    name: 'YPagination',
    data() {
      return {
        current: this.currentPage,
        options: [
          {value: 10},
          {value: 50},
          {value: 100}
        ],
        jumpTos: this.jumpTo,
        page_size: this.pageSize,
        show: false,
        showPrevMore: false,
        showNextMore: false
        // pageCount: 5 // 前后中各显示5个
      }
    },
    props: {
      total: { // 数据总条数
        type: Number,
        default: 0
      },
      pageSize: { // 每页显示条数
        type: Number,
        default: 10
      },
      currentPage: { // 当前页码
        type: [Number, String],
        default: 1
      },
      jumpTo: { // 跳转到
        type: Number,
        default: 1
      },
      pagegroup: { // 分页条数
        type: Number,
        default: 5,

        coerce: function (v) {
          v = v > 0 ? v : 5;
          return v % 2 === 1 ? v : v + 1;
        }
      }
    },
    computed: {
      page: function () { // 总页数
        return Math.ceil(this.total / this.page_size);
      },
      pagers() {
        const pagerCount = this.pagegroup;
        const halfPagerCount = (pagerCount - 1) / 2;

        const currentPage = Number(this.current);
        const pageCount = Number(this.page);

        let showPrevMore = false;
        let showNextMore = false;

        if (pageCount > pagerCount+1) {
          if (currentPage > pagerCount - halfPagerCount+1) {
            showPrevMore = true;
          }

          if (currentPage < pageCount - halfPagerCount-1) {
            showNextMore = true;
          }
        }

        const array = [];
        // 最后一个
        if (showPrevMore && !showNextMore) {
          const startPage = pageCount - (pagerCount - 1);
          for (let i = startPage; i < pageCount; i++) {
            array.push(i);
          }
        // 第一个
        } else if (!showPrevMore && showNextMore) {
          for (let i = 2; i < pagerCount + 1; i++) {
            array.push(i);
          }
        } else if (showPrevMore && showNextMore) {
          const offset = Math.floor(pagerCount / 2) - 1;
          for (let i = currentPage - offset ; i <= currentPage + offset; i++) {
            array.push(i);
          }
        } else {
          for (let i = 2; i < pageCount; i++) {
            array.push(i);
          }
        }
        this.showPrevMore = showPrevMore;
        this.showNextMore = showNextMore;
        return array;
      },
      grouplist: function () { // 获取分页页码
        var len = this.page,
          temp = [],
          list = [],
          count = Math.floor(this.pagegroup / 2),
          center = this.current;
        if (len <= this.pagegroup) {
          while (len--) {
            temp.push({
              text: this.page - len,
              val: this.page - len
            });
          }
          return temp;
        }
        while (len--) {
          temp.push(this.page - len);
        }
        var idx = temp.indexOf(center);
        (idx < count) && (center = center + count - idx);
        (this.current > this.page - count) && (center = this.page - count);
        temp = temp.splice(center - count - 1, this.pagegroup);
        if (this.last) {
          temp.splice(temp.length - 1, 1);
        } else if (this.first) {
          temp.splice(0, 1);
        }
        do {
          var t = temp.shift();
          list.push({
            text: t,
            val: t
          });
        } while (temp.length);
        if (this.page > this.pagegroup + 1) {
          if(this.current > count + 1){
          	list.unshift({
	            text: '...',
	            val: list[0].val - 1
	          });
          }

          (this.current < this.page - count-1) && list.push({
            text: '...',
            val: list[list.length - 1].val + 1
          });
        }
        return list;
      }
    },
    methods: {
      setCurrent: function (idx, index, event) {//设置当前的页码
      		const target = event.target;
      		const curNum = this.current
          if (target.className.indexOf('prevmore') !== -1) {
            this.current = curNum - this.pagegroup;
            if(this.current < this.pagegroup){
            	this.current = 1
            }
            
          } else if (target.className.indexOf('nextmore') !== -1) {
            this.current = curNum + this.pagegroup;
            if(this.current>this.page){
            	this.current = this.page
            }
          }else{
          	if (this.current != idx && idx > 0 && idx < this.page + 1) {
		          this.current = idx - 0;
		        } else if (idx < 0 || idx > this.page) {
		          this.current = 1;
		          this.jumpTos = this.current
		        } else if (String(idx).indexOf(".") > -1) {
		          this.current = Math.ceil(idx);
		          this.jumpTos = this.current
		        } else {
		          this.current = 1;
		          this.jumpTos = this.current
		        }
          }
        this.$emit('pagechangeparent', [this.current, this.page_size]);
        this.show = false;
      },
      showPages: function (index) {
        let pageNum = this.$refs.pagenumSelect[index].innerText;
        this.page_size = pageNum;
        this.current = 1;
        this.show = false;
        this.$emit('pagechangeparent', [this.current, this.page_size]);
      },
      pageIndex(value) {
        this.current = value;
      }
    }
  }
</script>


