<template>
	<view v-if="pagesData.length">
		<view class="u-flex pagination u-row-center u-font-28">
			<view class="prve btn" :class="{disabled:currentPage===1}" @tap="btnClick('')">上一页</view>
			<view>
				<picker @change="pageChange" :value="defaultPaageIndex" :range="pagesData">
					<view class="u-flex current-page u-col-center btn">
						<text class="page color-main font-bold">{{currentPage}}</text>
						<!-- <text class="page color-main font-bold">{{currentPage}}/{{maxPage}}</text> -->
						<view class="arrow-down"></view>
					</view>
				</picker>
			</view>
			<!-- <view class="u-flex current-page u-col-center btn">

				<text class="page color-main font-bold">{{page}}</text>
				<view class="arrow-down"></view>
			</view> -->
			<view class="next btn" :class="{disabled:currentPage===maxPage}" @tap="btnClick('add')">下一页</view>
		</view>

	</view>
</template>

<script setup>
	import {
		computed,
		reactive,
		ref,
		watch
	} from 'vue';
	const props = defineProps({
		size: {
			type: Number,
			default: 10
		},
		totalElements: {
			type: Number,
			default: 0
		},
		page: {
			type: Number,
			default: 1
		},
		pages: {
			type: [Array, Number],
			default: [1]
		},
		defaultPaageIndex: {
			type: Number,
			default: 0
		}
	})
	const emits = defineEmits(['change'])

	let currentPage = ref(props.page === 0 ? 1 : props.page)
	
	function returnMaxPage() {
		return Math.ceil(props.totalElements / props.size)
	}
	let maxPage=ref(returnMaxPage())
	const pagesData = computed(() => {
		maxPage.value=returnMaxPage()
		return new Array(returnMaxPage()).fill(1).map((v, index) => index + 1)
	})


	// const pagesData = ref( Array.isArray(props.pages) ? props.pages : new Array(props.pages).fill(1).map((v,index)=>index+1))
	// const maxPage=ref( Array.isArray(props.pages)?  (props.pages[props.pages.length - 1] +1): (props.pages+1))
	let defaultPaageIndex = ref(props.defaultPaageIndex > 0 ? props.defaultPaageIndex : props.page - 1)

	//设置页码值
	function setCurrentPage(page) {
		currentPage.value = page
	}

	function pageChange(e) {
		setCurrentPage(e.detail.value * 1 + 1)
	}
	//看是否到达临界值来决定是否改变页码
	function btnClick(isAdd) {
		let newPage = currentPage.value * 1 + (isAdd == 'add' ? 1 : -1)
		if (newPage <= 0) {
			return
		}
		if (newPage > maxPage.value) {
			return
		}
		setCurrentPage(newPage)
	}

	watch(() => currentPage.value, (newval) => {
		emits('change', newval)
		defaultPaageIndex.value = newval - 1
	})
</script>

<style lang="scss" scoped>
	.btn {
		box-sizing: border-box;
		border: 2px solid $my-main-color;
		padding: 8rpx 46rpx;
	}

	.pagination {
		gap: 30rpx;

		.current-page {
			position: relative;
			padding-left: 18rpx;

			.page {
				margin-right: 74rpx;
			}
		}

		.prve,
		.next {
			background-color: $my-main-color;
			color: #fff;
		}

		.prve,.next {
			&.disabled {
				background-color: #ccc;
				border-color: #ccc;
			}
		}

	}

	.arrow-down {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 12rpx;
		margin-top: 10rpx;
		width: 0;
		height: 0;
		border-top: 20rpx solid $my-main-color;
		border-right: 20rpx solid transparent;
		border-left: 20rpx solid transparent;
		border-bottom: 20rpx solid transparent;
	}
</style>