<template>
	<view class="page-bg">
		<view class="btn" @click="next(-1)">上一页</view>
		<view class="c-box">第<input class="input" v-model='crrPage' @blur="blurInput" />/{{pageNumAll}}页 共{{totalNum}}条
		</view>
		<view class="btn" @click="next(1)">下一页</view>
	</view>
</template>

<script>
	export default {
		props: ["totalNum", "pageCount", "crrNum"],
		data() {
			return {
				crrPage: this.crrNum, //当前页
				pageNumAll: 1, //总页数
			}
		},
		watch: {
			crrNum() {
				this.crrPage = this.crrNum
				console.log(this.crrNum)
			},
			totalNum() {
				this.pageNumAll = Math.ceil(this.totalNum / this.pageCount);
				if (this.pageNumAll < 1) this.pageNumAll = 1
			}
		},
		created() {

		},
		methods: {
			next(page) {
				let num = this.crrPage + page
				if (page == -1 && num < 1) return
				if (num > this.pageNumAll) return
				this.$emit('pageClick', num)
			},
			blurInput() {
				let num = parseInt(this.crrPage)
				if (num < 1) num = 1
				if (num > this.pageNumAll) num = this.pageNumAll
				this.crrPage = num
				this.$emit('pageClick', this.crrPage)
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-bg {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;

		.btn {
			padding: 10rpx 20rpx;
			border-radius: 5rpx;
			background-color: #fff;
		}

		.c-box {
			display: flex;
			align-items: center;
			margin: 0 20rpx;
		}

		.input {
			width: 100rpx;
			border-bottom: 1px solid #666;
			text-align: center;
		}
	}
</style>