<template>
  <div class="xd-pagination-custom">
    <el-button
      :disabled="prevDisabled || dis"
      @click="handleClick(false)"
      icon="el-icon-arrow-left"
      size="mini" style="font-size: 16px"
    ></el-button>
    <span v-if="isNumber || isShowOver === true">{{currentPageObj.cur}}</span>
    <span v-if="isShowOver">{{currentPageObj}}</span>
    <el-button
      :disabled="nextDisabled || dis"
      @click="handleClick()"
      icon="el-icon-arrow-right"
      size="mini" style="font-size: 16px"
    ></el-button>
    <el-button
      v-if="isShow"
      class="show"
      @click="handleTotalClick"
      size="mini"
      style="font-size: 16px"
    ><div style="font-size: 12px;">
      <span>查看记录总数</span>
      <template v-if="count !== undefined">: <span style="color: #f00">{{count}}</span> 条</template>
    </div></el-button>
    <template v-if="isShowOver">{{pages}}</template>
  </div>
</template>

<script>
import {Loading} from "element-ui";
import {Base64} from "js-base64"
export default {
  name: 'XdPaginationJfb',
  props: {
    //null|undefined|''|0|false 均为没有下页()
    nextPage: {
      type: Number|String,
      default: ''
    },
    value: {
      type: Number | String,
      default: ''
    },

    getTotal:{
      type: Function|null,
      default: null
    }
  },
  data(){
  	return {
      pages: {},
      currentPageObj: {},
      isNext: true,  //当前操作是否为下一页处理
      prev: null,
      dis: false,
      isShowOver: false,
      count: undefined
    }
  },
  watch:{
    nextPage(val){
      this.init(val);
    },
  },

  computed:{
    prevDisabled() {
      return this.currentPageObj.prev === null;
    },
    nextDisabled() {
      return this.currentPageObj.next === null;
    },

    isShow(){
      return typeof this.getTotal === 'function'
    },
    isNumber(){
      return /^([0-9])[0-9]*$/.test(this.currentPageObj.cur)
    }
  },

  created(){
    this.init(this.nextPage);
    this.$bus.$on('myClick',({n, m})=>{
      if(m._uid !== this._uid) {
        this.isNext = n;
      }
    });
    if(window.location.href.indexOf('jfb-show_over=1') !== -1) {
      this.isShowOver = true
    }
  },
  methods: {
    //下一页发生变化时候处理逻辑
    init(nextPage){
      let key = `P_${Base64.encode(this.value)}`;
      if(this.isNext) {
        let first = this.$xdHelper.isEmpty(this.pages);
        let cur = this.value;
        let prev = first ? null : this.currentPageObj['cur'];
        let next = nextPage ? nextPage : null;
        this.$set(this.pages, key, {prev, next, cur});
      }
      setTimeout(()=>{
        this.currentPageObj = this.pages[key];
        console.warn(`当前页面对象:${JSON.stringify(this.currentPageObj)}`)
        this.dis = false;
      })


    },
    handleClick(isNext = true){
      let type = isNext === true ? 'next': 'prev';
      this.isNext = isNext;
      this.$bus.$emit('myClick', {n:this.isNext,m:this});
      this.dis = true;
      console.log('handleClick',this.currentPageObj[type])
      this.$emit('input', this.currentPageObj[type]);
      this.$emit('onPagination', this.currentPageObj[type]);
    },
    handleTotalClick(){
      if(typeof this.getTotal === 'function') {
        let loading = Loading.service({});
        this.getTotal((count)=>{
          this.count = count;
          loading.close()
        })
      }
    },
  }
}
</script>

<style scoped lang="scss">
.xd-pagination-custom {
  background: #fff;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 20px;
  flex-flow: wrap;

  & > * {
    padding: 5px 10px;
  }

  & > span {
    font-size: 12px;
    color: #666;
  }
}

  .show {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 16px;
  }
</style>
