<template>
  <div>
      <div class="page" >
        <div class="pagelist">
          <span class="jump first_page" @click="firstPage">首页</span>
          <span class="jump" @click="prev">上一页</span>

          <span v-show="current_page>5" class="jump" @click="jumpPage(1)">1</span>

          <span class="ellipsis" v-show="efont">...</span>

          <span
            class="jump"
            v-for="num in indexs"
            :class="{bgprimary:current_page==num}"
            @click="jumpPage(num)"
          >{{num}}</span>

          <span class="ellipsis" v-show="efont&&current_page<pages-4">...</span>

          <span class="jump last_color" @click="next">下一页</span>
          <span class="jump last_page last_color" @click="lastPage">尾页</span>
        </div>
      </div>
  </div>
</template>
<script type="text/javascript" src="http://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> 
<script>
export default {
  props:["allPages"],
  data() {
    return {
      current_page: 1, //当前页
      pages: "", //总页数
      changePage: "", //跳转页
      nowIndex: 0
    };
  },
  computed: {
    // show: function() {
    //   return this.pages && this.pages != 1;
    // },
    efont: function() {
      if (this.pages <= 7) return false;
      return this.current_page > 5;
    },
    indexs: function() {
      var left = 1,
        right = this.pages,
        ar = [];
      if (this.pages >= 5) {
        if (this.current_page > 4 && this.current_page < this.pages - 3) {
          left = Number(this.current_page) - 3;
          right = Number(this.current_page) + 3;
        } else {
          if (this.current_page <= 4) {
            left = 1;
            right = 5;
          } else {
            right = this.pages;

            left = this.pages - 6;
          }
        }
      }
      while (left <= right) {
        ar.push(left);
        left++;
      }
      return ar;
    }
  },
  methods: {
    //   首页
    firstPage: function() {
      this.current_page = 1;
      this.$emit("getPage",this.current_page)
    },
    // 尾页
    lastPage: function() {
      this.current_page = this.pages;
      this.$emit("getPage",this.current_page)
    },
    //   上一页
    prev: function() {
      if (this.current_page == 1) {
        this.current_page = 1;
      } else {
        this.current_page--;
      }
      this.$emit("getPage",this.current_page)
    },
    //   下一页
    next: function() {
      if(this.current_page == this.allPages){
        return false
      }else{
        this.current_page++;
      }
      this.$emit("getPage",this.current_page)
    },
    jumpPage: function(id) {
      this.current_page = id;
      this.$emit("getPage",this.current_page);
    }
  },
  mounted(){
    // 从父组件得到的总页数
    this.pages = this.allPages
  },
};
</script>
<style scoped>
.page {
  height: 40px;
  text-align: right;
  color: #999;
  margin-bottom: 4px;
  margin-right: 13px;
}

.pagelist {
  font-size: 0;
  background: #fff;
  height: 40px;
  line-height: 40px;
}

.pagelist span {
  font-size: 14px;
}

.jump {
  border: 1px solid #e5e5e5;
  padding: 9px 15px;
  cursor: pointer;
}
.jump:hover{
  background: #526AA6;
  border-color: #526AA6;
  opacity: 0.8;
  color: #fff
}
.first_page {
  -webkit-border-top-left-radius: 3px;
  -webkit-border-right-left-radius: 3px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
}
.last_page {
  -webkit-border-top-right-radius: 3px;
  -webkit-border-right-right-radius: 3px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
}
.last_color{
    color: #526AA6
}
.pagelist .bgprimary {
  cursor: default;
  color: #fff;
  background: #526AA6;
  border-color: #526AA6;
}

.jumpinp input {
  width: 55px;
  height: 26px;
  font-size: 13px;
  border: 1px solid #ccc;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  text-align: center;
}

.ellipsis {
  padding: 0px 8px;
}

.jumppoint {
  margin-left: 30px;
}

.pagelist .gobtn {
}

.bgprimary {
  cursor: default;
  color: #fff;
  background: #337ab7;
  border-color: #337ab7;
}
</style>