<template>
	<div v-if="visible" class="popup-model PDF-model comp-container">
		<i class="icon el-icon-close" @click="close"></i>
		<!-- <div class="station-content">
			<div class="pdf-container-scroll">
				<div class="pdf-container">
					<pdf ref="pdf" :src="pdfData.src" :page="page" :rotate="rotate" @password="password"  @loaded="loadPdfHandler"
						@progress="loadedRatio = $event" @error="error" @num-pages="numPages = $event"
						@link-clicked="page = $event"></pdf>
				</div>
			</div>
			<div class="page-container">
				<el-input-number v-model.number="page"  size="mini"  @input="inputEvent()"/>
				/{{ numPages }}
			</div>
		</div> -->
		<div id="container" @scroll="loadImg($event)">
			<!-- 上一页、下一页 -->
			<div class="right-btn">

				<div @click="changePdfPage('first')" class="turn">
					首页
				</div>
				<!-- 在按钮不符合条件时禁用 -->
				<div @click="changePdfPage('pre')" class="turn-btn"
					:style="currentPage === 1 ? 'cursor: not-allowed;' : ''">
					上一页
				</div>
				<div @click="changePdfPage('next')" class="turn-btn"
					:style="currentPage === pageCount ? 'cursor: not-allowed;' : ''">
					下一页
				</div>
				<div @click="changePdfPage('last')" class="turn">
					尾页
				</div>
				<!-- 输入页码 -->
				<div class="pageNum">
					<input v-model.number="currentPage" type="number" class="inputNumber" @input="inputEvent()"> /
					{{ pageCount }}
				</div>
			</div>

			<div class="pdfArea">
				<pdf :src="src" ref="pdf" v-show="loadedRatio === 1" :page="currentPage" @num-pages="pageCount = $event"
					@progress="loadedRatio = $event" @page-loaded="currentPage = $event" @loaded="loadPdfHandler"
					@link-clicked="currentPage = $event" style="display: inline-block;width:100%" id="pdfID"></pdf>
			</div>
			<!-- 加载未完成时，展示进度条组件并计算进度 -->
			<div class="progress" v-show="loadedRatio !== 1">
				<!--< el-progress type="circle" :width="70" color="#53a7ff" :percentage="Math.floor(0 * 100)">
					</el-progress> -->
				<!-- <br> -->
				<!-- 加载提示语 -->
				<span>{{ remindShow }}</span>
			</div>
		</div>
	</div>
</template>

<script>
import digitalReservoir from '@/api/frontScreen/digitalReservoir.js'
import pdf from 'vue-pdf'
export default {
	name: 'PDFModel',
	components: {
		pdf
	},
	data() {
		return {
			visible: false,
			pdfData: {
				name: '应急预案',
				value: '应急预案',
				src: '',
			},
			page: 1,
			numPages: 0,
			rotate: 0,
			previewUrl: window.context.portal + '/file/onlinePreviewController/v1/getFileById_',

			// ----- loading -----
			remindText: {
				loading: '加载文件中，文件较大请耐心等待...',
				refresh: '若卡住不动，可刷新页面重新加载...'
			},
			remindShow: '加载文件中，文件较大请耐心等待...',
			intervalID: '',
			// ----- vuepdf -----
			// src静态路径: /static/xxx.pdf
			// src服务器路径: 'http://.../xxx.pdf'
			src: '',
			// 当前页数
			currentPage: 0,
			// 总页数
			pageCount: 0,
			// 加载进度
			loadedRatio: 0
		}
	},
	destroyed() {
		// 在页面销毁时记得清空 setInterval
		clearInterval(this.intervalID)
	},
	mounted() {
		// 更改 loading 文字
		this.intervalID = setInterval(() => {
			this.remindShow === this.remindText.refresh ?
				this.remindShow = this.remindText.loading :
				this.remindShow = this.remindText.refresh
		}, 4000)
	},
	methods: {
		open(val, title, id, path) {
			this.title = `${title}`
			this.visible = true
			if (val == 1) {
				this.getDdgcPlan(id)
			} else if (val == 2) {
				this.getReservePlan(id)
			} else if (val == 3) {
				this.src = "http://183.230.17.146:9080" + path
			}
		},

		// loadPdfHandler(e) {
		// 	// 加载的时候先加载第一页
		// 	this.page = 1
		// },
		// inputEvent() {
		// 	if (this.page > this.numPages) {
		// 		// 1. 大于max
		// 		this.page = this.numPages
		// 	} else if (this.page < 1) {
		// 		// 2. 小于min
		// 		this.page = 1
		// 	}
		// },
		loadImg(event) {
			let el = event.target;
			if (el.scrollTop + el.clientHeight >= el.scrollHeight) {
				setTimeout(() => {
					this.changePdfPage('next')
				}, 500)
			}
		},
		// 获取调度规程预案
		getDdgcPlan(val) {
			this.pdfData.src = ''
			this.src = ''
			digitalReservoir.ddgcPlan(val, res => {
				if (res.state) {
					if (res.value) {
						this.pdfData.src = this.previewUrl + JSON.parse(res.value)[0].fileId
						this.src = this.previewUrl + JSON.parse(res.value)[0].fileId
					} else {
						this.remindShow = '暂无文件'
						clearInterval(this.intervalID)
					}
				}
			})
		},
		// 获取水库应急预案
		getReservePlan(val) {
			this.pdfData.src = ''
			this.src = ''
			digitalReservoir.reservePlan(val, res => {
				if (res.state) {
					if (res.value) {
						this.pdfData.src = this.previewUrl + JSON.parse(res.value)[0].fileId
						this.src = this.previewUrl + JSON.parse(res.value)[0].fileId
					} else {
						this.remindShow = '暂无文件'
						clearInterval(this.intervalID)
					}
				}
			})
		},
		// 页面回到顶部
		toTop() {
			document.getElementById('container').scrollTop = 0
		},
		// 输入页码时校验
		inputEvent() {
			if (this.currentPage > this.pageCount) {
				// 1. 大于max
				this.currentPage = this.pageCount
			} else if (this.currentPage < 1) {
				// 2. 小于min
				this.currentPage = 1
			}
		},
		// 切换页数
		changePdfPage(val) {
			if (val === 'pre' && this.currentPage > 1) {
				// 切换后页面回到顶部
				this.currentPage--
				this.toTop()
			} else if (val === 'next' && this.currentPage < this.pageCount) {
				this.currentPage++
				this.toTop()
			} else if (val === 'first') {
				this.currentPage = 1
				this.toTop()
			} else if (val === 'last' && this.currentPage < this.pageCount) {
				this.currentPage = this.pageCount
				this.toTop()
			}
		},

		// pdf加载时
		loadPdfHandler(e) {
			// 加载的时候先加载第一页
			this.currentPage = 1
		},

		// 禁用鼠标右击、F12 来禁止打印和打开调试工具
		prohibit() {
			// console.log(document)
			document.oncontextmenu = function () {
				return false
			}
			document.onkeydown = function (e) {
				if (e.ctrlKey && (e.keyCode === 65 || e.keyCode === 67 || e.keyCode === 73 || e.keyCode === 74 || e
					.keyCode === 80 || e.keyCode === 83 || e.keyCode === 85 || e.keyCode === 86 || e
						.keyCode === 117)) {
					return false
				}
				if (e.keyCode === 18 || e.keyCode === 123) {
					return false
				}
			}
		},
		close() {
			this.visible = false
			this.$emit('close')
		},
		password: function (updatePassword, reason) {
			updatePassword(prompt('password is "test"'))
		},
		error: function (err) {
			this.$message.warning(err.message)
		},
	},
}
</script>

<style lang="scss" scoped>
@import './../css/gisComp.scss';

#container {
	margin-top: 15px;
	overflow: scroll;
	height: 100%;
	font-family: PingFang SC;
	width: 100%;
	display: flex;
	/* justify-content: center; */
	position: relative;
}

/* 右侧功能按钮区 */
.right-btn {
	position: fixed;
	right: 3%;
	bottom: 20%;
	width: 120px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	z-index: 999;
}

.pdfArea {
	width: 95%;
}

/* ------------------- 输入页码 ------------------- */
.pageNum {
	margin: 10px 0;
	font-size: 16px;
}

/*在谷歌下移除input[number]的上下箭头*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none !important;
	margin: 0;
}

/*在firefox下移除input[number]的上下箭头*/
input[type='number'] {
	-moz-appearance: textfield;
}

.inputNumber {
	border-radius: 8px;
	border: 1px solid #999999;
	height: 35px;
	font-size: 16px;
	width: 60px;
	text-align: center;
}

.inputNumber:focus {
	border: 1px solid #00aeff;
	background-color: rgba(18, 163, 230, 0.096);
	outline: none;
	transition: 0.2s;
}

/* ------------------- 切换页码 ------------------- */
.turn {
	background-color: #888888;
	opacity: 0.7;
	color: #ffffff;
	height: 70px;
	width: 70px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 5px 0;
}

.turn-btn {
	background-color: #000000;
	opacity: 0.6;
	color: #ffffff;
	height: 70px;
	width: 70px;
	border-radius: 50%;
	margin: 5px 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.turn-btn:hover,
.turn:hover {
	transition: 0.3s;
	opacity: 0.5;
	cursor: pointer;
}

/* ------------------- 进度条 ------------------- */
.progress {
	position: absolute;
	right: 50%;
	top: 50%;
	text-align: center;
}

.progress>span {
	color: #199edb;
	font-size: 14px;
}

/deep/.el-input__inner {
	background-color: white !important;
	color: black !important;
	border: 1px solid #999 !important;
}

.popup-model {
	width: 1000PX;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: #fff; //rgba(0, 0, 0, 0.8);
	z-index: 99;
	border-radius: 6px;
	color: #d3d4d7;
	padding: 10px;
	box-sizing: border-box;

	.el-icon-close {
		position: absolute;
		right: 6px;
		top: 6px;
		font-size: 16px;
		color: #f56c6c;
		cursor: pointer;
	}

	.station-title {
		text-align: center;
		font-size: 16px;
		height: 20px;
		line-height: 20px;
		font-weight: 700;
		margin-bottom: 16px;
		color: #333;
	}

	.station-content {
		height: calc(100% - 20px);
		width: 100%;
		margin-top: 20px;
	}

	/deep/ .el-tabs__content {
		overflow: visible;
		height: calc(100% - 28px);
		position: relative;
	}

	/deep/ .el-tab-pane {
		height: 98%;
	}

	.page-container {
		margin-top: 5px;
		text-align: right;
		color: #333;
	}

	.pdf-container-scroll {
		height: calc(100% - 28px);
		overflow: auto;
	}

	.pdf-container {
		height: 100%;
	}

}
</style>
