<template>
	<div class="pagination">
		<!-- 上 -->
		<!-- pageNo是当前页,父组件传递过来的数据 -->
		<button @click="beforeclick(pageNo - 1)" :disabled="pageNo == 1">上一页</button>

		<button v-if="startendcontinues.start > 1" @click="topclick(1)">1</button>
		<button v-if="startendcontinues.start > 2">···</button>

		<!-- 中间部分 -->
		<block v-for="(page, index) in startendcontinues.end" :key="index" name="block">
			<button v-if="page >= startendcontinues.start" @click="centerclick(page)" :class="{ active: page == pageNo }">{{ page }}</button>
		</block>

		<!-- 下 -->
		<button v-if="startendcontinues.end < totalPage - 1">···</button>
		<button v-if="startendcontinues.end < totalPage" @click="bottomclick(totalPage)">{{ totalPage }}</button>

		<button @click="afterclick(pageNo + 1)" :disabled="pageNo == totalPage">下一页</button>

		<button style="margin-left: 30px">共 {{ total }} 条</button>
		<h1 class="h1">当前页<input type="text" v-model.number.lazy="pageNo1" id="input" /></h1>
	</div>
</template>

<script>
export default {
	name: 'Pagination',
	props: {
		pageNo: {
			type: Number,
			default: 1,
			required: true
		},
		pagesize: {
			type: Number,
			default: 3,
			required: true
		},
		total: {
			type: Number,
			default: 10,
			required: true
		},
		continues: {
			type: Number,
			default: 5,
			required: true
		}
	},
	data() {
		return {
			pageNo1: this.pageNo
		}
	},
	computed: {
		// 一共多少页
		totalPage() {
			// 向上取整  总数/一页数
			return Math.ceil(this.total / this.pagesize)
		},
		// 算出当前页的起始页和结束页
		startendcontinues() {
			let start = 0
			let end = 0
			const { pageNo, continues, totalPage } = this
			// 1.非正常 连续页是5页 总页数是4页
			if (continues > totalPage) {
				start = 1
				end = totalPage
				// 正常
			} else {
				start = pageNo - parseInt(continues / 2)
				end = pageNo + parseInt(continues / 2)
				// end小于1
				if (start <= 0) {
					start = 1
					end = continues
					// end大于总页数
				} else if (end > totalPage) {
					end = totalPage
					start = totalPage - continues + 1
				}
			}
			return { start, end }
		}
	},
	methods: {
		// 连续的页码
		centerclick(page) {
			// console.log(page);
			this.$emit('pagechangelist', page)
			this.pageNo1 = page
		},
		// 第一页
		topclick(page) {
			// console.log(page);
			this.$emit('pagechangelist', page)
			this.pageNo1 = page
		},
		// 最后一页
		bottomclick(page) {
			// console.log(page);
			this.$emit('pagechangelist', page)
			this.pageNo1 = page
		},
		// 点击上一页
		beforeclick(page) {
			if (this.pageNo > 1) {
				this.$emit('pagechangelist', page)
				this.pageNo1 = page
			}
		},
		// 下一页
		afterclick(page) {
			if (this.pageNo < this.totalPage) {
				this.$emit('pagechangelist', page)
				this.pageNo1 = page
			}
		}
	},
	// 通过watch监听用户input输入的值
	// 1.小于1 字符串 小数 报错
	// 一旦监听得到就立马触发以下函数
	watch: {
		// isNaN检测字符串 是字符串就返回true
		pageNo1: {
			handler(newValue, oldValue) {
				const result = parseInt(newValue)
				if (isNaN(result) || result < 1) {
					alert('您输错了')
					this.pageNo1 = 1
				}
				/* indexOf检测是否有小数点 */
				// 要先转换为String才可以进行检测
				// -1找不到 >0找得到
				if (String(newValue).indexOf('.') !== -1) {
					alert('您输错了')
					// 取整数
					// this.pageNo1=parseInt(newValue)
					// 向上取整
					this.pageNo1 = Math.ceil(newValue)
				}
				this.$emit('pagechangelist', this.pageNo1)
			}
		}
	}
}
</script>

<style lang="less" scoped>
.active {
	background-color: blue;
}
.h1 {
	display: inline;
	margin-left: 20px;
	font-size: 12px;
	line-height: 28px;
	input {
		width: 25px;
		margin-left: px;
		text-align: center;
	}
}
.pagination {
	text-align: center;
	button {
		margin: 0 5px;
		background-color: #f4f4f5;
		color: #606266;
		outline: none;
		border-radius: 2px;
		padding: 0 4px;
		vertical-align: top;
		display: inline-block;
		font-size: 13px;
		min-width: 35.5px;
		height: 28px;
		line-height: 28px;
		cursor: pointer;
		box-sizing: border-box;
		text-align: center;
		border: 0;

		&[disabled] {
			color: #c0c4cc;
			cursor: not-allowed;
		}

		&.active {
			cursor: not-allowed;
			background-color: #409eff;
			color: #fff;
		}
	}
}
</style>
