<template>
  <!--分页-->
  <div class="flex my-pagination" v-if="pagination.total > pagination.pageSize">
    <a-pagination
      v-model="pagination.pageNum"
      :total="pagination.total"
      :page-size="pagination.pageSize"
      :item-render="itemRender"
      @change="pageChange"
    />
    <a-input
      v-model.trim="jumpPage"
      class="jump-page"
      type="number"
      :min="0"
      @blur="inputPageChange"
    />
  </div>
</template>

<script>
export default {
  props: {
    //分页器
    pagination: {
      default: {}
    }
  },
  data() {
    return {
      //跳转到第几页
      jumpPage: ''
    }
  },
  methods: {
    //自定义分页
    itemRender(current, type, originalElement) {
      if (type === 'prev') {
        return <li class="page pre">上一页</li>
      } else if (type === 'next') {
        return <li class="page next">下一页</li>
      } else if (type === 'page') {
        //当前页面
        if (current == this.pagination.pageNum) {
          return (
            <div class="cur-page page">
              <span class="cur">{current}</span>/
              <span class="total">
                {Math.ceil(this.pagination.total / this.pagination.pageSize)}
              </span>
            </div>
          )
        } else {
          return null
        }
      } else if (type == 'jump-prev') {
        return null
      } else if (type == 'jump-next') {
        return null
      }
      return originalElement
    },
    //跳转页面
    inputPageChange() {
      this.jumpPage = parseInt(this.jumpPage)
      let pages = Math.ceil(this.pagination.total / this.pagination.pageSize)
      this.jumpPage = this.jumpPage < 0 ? 0 : this.jumpPage
      this.jumpPage = this.jumpPage > pages ? pages : this.jumpPage
      this.pagination.pageNum = this.jumpPage
      this.$emit('pageChange', { pageNum: this.jumpPage })
    },
    //改变分页
    pageChange(pager) {
      this.pagination.pageNum = pager
      this.$emit('pageChange', { pageNum: pager })
    }
  }
}
</script>

<style lang="less" scoped>
.my-pagination {
  justify-content: flex-end;
  margin-top: 10px;
  .page {
    width: 80px;
    height: 36px;
    line-height: 36px;
    background: #f8fafb;
    font-weight: 400;
    color: #252631;
    &.cur-page {
      background: transparent;
    }
    span {
      font-size: 16px;
      font-weight: 400;
      &.cur {
        color: #4d7cfe;
      }
    }
  }
  .jump-page {
    width: 80px;
    margin-left: 30px;
    height: 36px;
    text-align: center;
  }
}
::v-deep .ant-pagination-jump-prev,
::v-deep .ant-pagination-jump-next {
  display: none !important;
}
</style>