<template>
  <div class="pagination">
    <u-button size="mini" shape="circle" @click="goToPage(currentPage - 1)" :disabled="currentPage <= 1">上一页</u-button>
    <text>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</text>
    <u-button size="mini" shape="circle" @click="goToPage(currentPage + 1)" :disabled="currentPage >= totalPages">下一页</u-button>
  </div>
</template>
 
<script>
export default {
  name: 'UniPagesNav',
  props: {
    currentPage: {
      type: Number,
      required: true
    },
    totalPages: {
      type: Number,
      required: true
    }
  },
  methods: {
    goToPage(page) {
      if (page >= 1 && page <= this.totalPages) {
        this.$emit('pagechanged', page);
      }
    }
  }
}
</script>
 
<style scoped>
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  padding: 20rpx;
  border-radius: 20rpx;
  box-shadow: 1px 1px 5px #eee;
}
.pagination text {
  margin: 0 10px;
}
</style>