<template>
  <div class="pagination">
    <button @click="prevPage()" :disabled="currentPage === 1">上一页</button>
    <span>{{ currentPage }} / {{ totalPages }}</span>
    <button @click="nextPage()" :disabled="currentPage === totalPages">下一页</button>
  </div>
</template>

<script lang="ts">
export default {
  name: 'ljPagination',
  props: {
    total: {
      type: Number as () => number,
      default: 10,
    },
    pageSize: {
      type: Number as () => number,
      default: 10,
    },
    currentPage: {
      type: Number as () => number,
      default: 1,
    },
  },
  data() {
    return {};
  },
  computed: {
    totalPages(): number {
      return Math.ceil(this.total / this.pageSize);
    },
  },
  methods: {
    prevPage(): void {
      if (this.currentPage > 1) {
        this.$emit('change', this.currentPage - 1);
      }
    },
    nextPage(): void {
      if (this.currentPage < this.totalPages) {
        this.$emit('change', this.currentPage + 1);
      }
    },
  },
};
</script>

<style scoped>
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}

.pagination button {
  font-size: 16rpx;
  cursor: pointer;
}

.pagination span {
  padding: 8px 12px;
  margin: 0 5px;
}
</style>
