<template>
	<div class="pagination">
		<!-- 上一页按钮 -->
		<button class="pagination-btn" :disabled="currentPage === 1" @click="gotoPage(currentPage - 1)">
			<i class="el-icon-arrow-left"></i> </button>

		<!-- 页面范围 -->
		<span v-for="pageNum in visiblePages" :key="pageNum"
			:class="['pagination-number', { active: currentPage === pageNum }]" @click="gotoPage(pageNum)">
			{{ pageNum }}
		</span>

		<!-- 下一页按钮 -->
		<button class="pagination-btn" :disabled="currentPage === totalPages" @click="gotoPage(currentPage + 1)">
			<i class="el-icon-arrow-right"></i>
		</button>
	</div>
</template>

<script>
	export default {
		props: {
			currentPage: {
				type: Number,
				required: true,
				default: 1,
			},
			totalPages: {
				type: Number,
				required: true,
				default: 1,
			},
		},
		methods: {
			// 跳转到指定页
			gotoPage(pageNum) {
				if (pageNum >= 1 && pageNum <= this.totalPages) {
					this.$emit("page-change", pageNum);
				}
			},
		},
		computed: {
			// 计算显示的页码范围
			visiblePages() {
				const range = 5; // 显示的页码数量
				const half = Math.floor(range / 2);
				let start = this.currentPage - half;
				let end = this.currentPage + half;

				// 调整范围，防止超出总页数
				if (start < 1) {
					start = 1;
					end = Math.min(range, this.totalPages);
				}
				if (end > this.totalPages) {
					end = this.totalPages;
					start = Math.max(this.totalPages - range + 1, 1);
				}

				return Array.from({
					length: end - start + 1
				}, (_, i) => start + i);
			},
		},
	};
</script>

<style scoped lang="scss">
	.pagination {
		position: relative;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		gap: 8px;
		margin: 20px 0;
	}

	.pagination-btn,
	.pagination-number {
		width: 32px;
		height: 32px;
		border: 1px solid #E2E8F0;
		border-radius: 6px;
		background-color: $white;
		color: $main-font-color;
		cursor: pointer;
		font-weight: 'Poppins-Regular';
	}

	.pagination-number {
		@include flex-center;
	}

	.pagination-btn:disabled {
		opacity: 0.5;
		color: #E2E8F0;
		cursor: not-allowed;
	}


	.pagination-number.active {
		border-color: $main-color;
		color: $main-color;
		font-weight: bold;
	}
</style>
