NEW_FILE_CODE
<template>
	<div class="simple-pagination">
		<div class="pagination-wrapper">
			<el-icon class="pagination-btn" @click="handlePrevPage" :class="{ disabled: currentPage === 1 }">
				<el-icon :size="16">
					<ArrowLeft />
				</el-icon>
			</el-icon>
			<div class="pagination-info">
				<span class="current-page">{{ currentPage }}</span>
				<span>/</span>
				<span>{{ totalPages }}</span>
			</div>
			<el-icon class="pagination-btn" @click="handleNextPage" :class="{ disabled: currentPage === totalPages }">
				<el-icon :size="16">
					<ArrowRight />
				</el-icon>
			</el-icon>
		</div>
	</div>
</template>

<script setup>
import { computed } from "vue";
import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";

const props = defineProps({
	// 当前页码
	currentPage: {
		type: Number,
		default: 1
	},
	// 每页显示条数
	pageSize: {
		type: Number,
		default: 5
	},
	// 总记录数
	total: {
		type: Number,
		default: 0
	}
});

const emit = defineEmits(["update:currentPage", "page-change"]);

// 计算总页数
const totalPages = computed(() => {
	return Math.ceil(props.total / props.pageSize) || 1;
});

// 处理上一页
const handlePrevPage = () => {
	if (props.currentPage > 1) {
		const newPage = props.currentPage - 1;
		emit("update:currentPage", newPage);
		emit("page-change", newPage);
	}
};

// 处理下一页
const handleNextPage = () => {
	if (props.currentPage < totalPages.value) {
		const newPage = props.currentPage + 1;
		emit("update:currentPage", newPage);
		emit("page-change", newPage);
	}
};
</script>

<style lang="scss" scoped>
.simple-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 16px 0;

	.pagination-wrapper {
		display: flex;
		align-items: center;
		gap: 12px;

		.pagination-btn {
			width: 24px;
			height: 24px;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: rgba(231, 243, 255, 1);
			// border: 1px solid #dcdfe6;
			border: none;
			border-radius: 4px;
			color: #055fc2;
			font-size: 20px;
			cursor: pointer;
			transition: all 0.3s;

			&:hover:not(.disabled) {
				background-color: #f5f7fa;
				border-color: #c0c4cc;
			}

			&.disabled {
				opacity: 0.5;
				cursor: not-allowed;
				background-color: #f5f7fa;
				color: #c0c4cc;
			}
		}

		.pagination-info {
			font-size: 14px;
			color: rgba(5, 95, 194, 1);
			// min-width: 60px;
			text-align: center;
			display: flex;
			gap: 5px;
			// letter-spacing: 5px;
		}
	}
}
</style>
