<template>
	<div class="self-container">
		<div class="title title1">
			<span>资料正在审核：</span>
		</div>
		<div style="margin: 35px 18px 0px 70px;">
			<template v-for="n in 50">
				<div class="loaded" v-if="n <= loaded"></div>
				<div class="loading" v-else></div>
			</template>
		</div>

		<div class="content">
			<div class="title title2">
				<span>审核结果：</span>
			</div>
			<div style="margin: 0 18px 0 70px;">
				<div class="layui-row">
					<div class="layui-col-md5" v-for="(item, index) in tempData" :key="item.fileId">
						<div class="simpleItem">
							<div class="imga">
								<img class="img" :src="item.fileUrl" />
							</div>
							<div class="imga">
								<img src="../assets/images/filebox2.png" />
							</div>
							<div class="imga">
								<img :id="item.fileId" />
							</div>
						</div>
						<div class="fileName">{{item.name}}</div>
					</div>
				</div>
			</div>
			<div class="button">
				<div class="prePage prePage1" v-show="hasPre" @click="prePage"></div>
				<div class="prePage prePage2" v-show="!hasPre" @click="prePage"></div>
				<div class="nextPage nextPage1" v-show="hasNext" @click="nextPage"></div>
				<div class="nextPage nextPage2" v-show="!hasNext"></div>
			</div>
		</div>


	</div>
</template>
<script>
	import commonUtil from '../assets/js/commonUtil';
	import websocket from '../assets/js/websocket';
	import abnormal from '../assets/images/ico/ico_abnormal.png';
	import normal from '../assets/images/ico/ico_normal.png';
	import {
		layer
	} from "@layui/layer-vue";
	export default {
		data() {
			return {
				pageSize: 10,
				currentPage: 0,
				totalPage: 1,
				hasPre: false,
				hasNext: false,
				tempData: [],
				totalNum: 0,
				loaded: 0,
				acceptHandler: '',
				success: false,
				artificialType: '0',
				temp: {
					serviceId: '',
					projectId: '',
					projectName: '',
					userId: '',
					batchId: '',
					source: "1",
					fileData: [],
					name: '',
					mobile: '',
					idcard: ''
				}
			}
		},
		mounted() {
			// 将Vue方法传到全局对象window中
			window.receiveMsg = this.receiveMsg;
		},
		created() {
			var caseData = this.$LocalStorage.SessionGet("caseData");
			Object.assign(this.temp, caseData);
			/*this.temp.fileData =JSON.parse(caseData.fileData);*/
			this.temp.userId = commonUtil.genUserId();
			this.temp.batchId = commonUtil.genRanNo();

			this.totalNum = this.temp.fileData.length;
			this.temp.totalNum = this.totalNum;
			this.totalPage = Math.ceil(this.totalNum / this.pageSize);
			this.hasNext = this.totalPage > 1 ? true : false;

			this.initTemp();
			this.initWebSocket(this.temp.userId);
			this.accept();
			if (robotType) {
				robotsdk.playAudio({
					cmd: 'playAudio',
					animation: 0,
					videocontent: '资料正在核验中，请稍等片刻！',
					callback: ""
				});
			}

		},
		methods: {
			initTemp() {
				var _this = this;
				this.acceptHandler = setInterval(function() {
					_this.loaded++;
					if (_this.loaded == 51) {
						_this.loaded = 0;
					}
				}, 500);
				this.nextPage();
			},
			initWebSocket(userId) {
				console.log("userId:" + userId);
				websocket.openClick(userId);
			},
			accept() {
				$.ajax({
					type: "post",
					url: window.config.rocrUrl + 'lilo/aiCase/accept',
					async: false, //改为同步请求
					data: {
						jsonData: JSON.stringify(this.temp)
					},
					success: function(data) {
						if (data.success) {
							console.log("提交成功");
						} else {
							layer.msg("系统繁忙，请到窗口办理！", {
								time: 1500,
								icon: 3
							});
							console.log(data.msg);
						}
					},
					error: function(error) {
						layer.msg("系统繁忙，请到窗口办理！", {
							time: 1500,
							icon: 3
						});
						console.log(error);
					}
				})
			},
			receiveMsg(obj) {
				clearInterval(this.acceptHandler);
				//保存到缓存中
				Object.assign(this.temp, obj);
				delete this.temp.userId;
				this.$LocalStorage.SessionPut("caseData", this.temp);
				this.success = obj.success;
				this.artificialType = obj.artificialType;

				var errors = obj.errors;
				var pageUrl = obj.pageUrl; //表单页面地址
				var isPrintWord = obj.isPrintWord; //是否不走页面表单打印word
				var map = new Map();
				//返回结果fileId有重复，需要去重，当重复时，其中一个为false时当前资料为false
				for (var i = 0, e = errors.length; i < e; i++) {
					var errorType = errors[i].errorType;
					var fileId = errors[i].fileId;
					if (fileId != '') {
						var flag = map.has(fileId);
						if (flag) {
							var errorType2 = map.get(fileId);
							if (errorType != errorType2 && errorType == 2) {
								map.set(fileId, errorType);
							}
						} else {
							map.set(fileId, errorType);
						}
					}
				}
				//实现进度条效果
				var length = 1;
				if (map.size > 0){
					length = map.size;
				}
				var keys = map.keys();
				var t = 0;
				var times = this.loaded;
				var _this = this;
				var handler = setInterval(function() {
					if (_this.loaded == times) {
						t++;
						times = Math.ceil(t / length * 50) > _this.loaded ? Math.ceil(t / length * 50) : _this.loaded + 1;
						var runHandler = setInterval(function() {
							_this.loaded++;
							if (_this.loaded == times) {
								var key = keys.next().value;
								var value = map.get(key);
								if (value == 2) {
									$("#" + key).attr("src", abnormal);
								} else if (value == 0) {
									$("#" + key).attr("src", normal);
								}
								clearInterval(runHandler);
							}
						}, 100);
						if (t == length) {
							clearInterval(handler);
							//验证结束页面停留几秒后跳转
							setTimeout(function() {
								if (_this.success) { //预审通过
									if ('0' == _this.artificialType) { //等于0不需要远程核验
										//判断是否需要表单页面
										if (pageUrl != null) {
											_this.$router.push({
												path: '/dataView'
											});
										} else {
											if (isPrintWord == '1') { //需要打印word
												_this.$router.push({
													path: '/print'
												});
											} else {
												_this.$router.push({
													path: '/report'
												});
											}
										}
									} else {
										//需要远程核验
										var artificialData = [];
										var artificialFiles = [];
										for (var i = 0, t = _this.temp.fileData.length; i < t; i++) {
											var artificialType = _this.temp.fileData[i].artificialType;
											if ('0' != artificialType) {
												artificialData.push(_this.temp.fileData[i].type);
												artificialFiles.push(_this.temp.fileData[i].name);
											}
										}
										var caseData = this.$LocalStorage.SessionGet("caseData");
										caseData.artificialData = artificialData.join(",");
										caseData.artificialFiles = artificialFiles.join(",");
										_this.$LocalStorage.SessionPut("caseData", caseData);
										if (artificialData.length > 0) {
											_this.$router.push({
												path: '/remoteCheck'
											}); //远程核验页面
										} else {
											_this.$router.push({
												path: '/report'
											});
										}
									}
								} else { //预审不通过
									_this.$router.push({
										path: '/auditTips'
									});
								}

							}, 10 * 1000)
						}
					}
				}, 100);
			},
			prePage() {
				this.tempData = [];
				if (this.currentPage > 1) {
					for (var i = 0; i < this.pageSize; i++) {
						var index = (this.currentPage - 2) * this.pageSize + i;
						if (index < this.totalNum) {
							this.tempData[i] = this.temp.fileData[index];
						}
					}
					this.currentPage = (this.currentPage - 1) > 0 ? this.currentPage - 1 : this.currentPage;
				}
				this.show();
			},
			nextPage() {
				this.tempData = [];
				if (this.currentPage < this.totalPage) {
					for (var i = 0; i < this.pageSize; i++) {
						var index = this.currentPage * this.pageSize + i;
						if (index < this.totalNum) {
							this.tempData[i] = this.temp.fileData[index];
						}
					}
					this.currentPage = (this.currentPage + 1) <= this.totalPage ? this.currentPage + 1 : this.currentPage;
				}

				this.show();
			},
			show() {
				if (this.currentPage < this.totalPage) {
					this.hasNext = true;
				} else {
					this.hasNext = false;
				}
				if (this.currentPage > 1) {
					this.hasPre = true;
				} else {
					this.hasPre = false;
				}
			}
		},
		unmounted() {
			if (this.acceptHandler) {
				clearInterval(this.acceptHandler);
			}
		}
	}
</script>

<style scoped>
	.loading {
		float: left;
		width: 17px;
		height: 33px;
		margin: 0 3px 0 3px;
		background: #0961D2;
	}

	.loaded {
		float: left;
		width: 17px;
		height: 33px;
		margin: 0 3px 0 3px;
		background: #07F6EC;
	}


	.self-container {
		background-image: url('../assets/images/background.png');
		background-repeat: no-repeat;
		background-size: cover;
		overflow: auto;
		height: 100%;
		padding: 0;
		margin: 0;
	}

	.title {
		height: 67px;
		line-height: 67px;
		color: #ffffff;
		font-size: 26px;
		text-align: center;
		margin-top: 15px;
	}

	.title1 {
		margin-top: 30px;
		width: 299px;
		background-image: url('../assets/images/title2.png');
		background-repeat: no-repeat;
		background-size: cover;
	}

	.title2 {
		width: 228px;
		background-image: url('../assets/images/title3.png');
		background-repeat: no-repeat;
		background-size: cover;
	}

	.layui-row {
		margin: 20px 0;
	}

	.layui-col-md5 {
		width: 229px;
	}

	.simpleItem {
		width: 100%;
		height: 133px;
	}

	.img {
		width: 211px;
		height: 115px;
	}

	.imga {
		position: absolute;
		left: 50%;
		top: 39%;
		transform: translate(-50%, -50%);
	}

	.content {
		margin-top: 11%;
	}

	.fileName {
		color: #ffffff;
		font-size: 18px;
		margin: 10px 30px 0 30px;
		height: 54px;
	}

	.button {
		width: 100%;
		position: absolute;
		top: 52%;
	}

	.prePage {
		width: 34px;
		height: 164px;
		background-repeat: no-repeat;
		float: left;
		margin-left: 20px;
	}

	.prePage1 {
		background-image: url('../assets/images/btn/btnLeft.png');
	}

	.prePage2 {
		background-image: url('../assets/images/btn/btnLeft2.png');
	}

	.nextPage {
		width: 34px;
		height: 164px;
		background-repeat: no-repeat;
		float: right;
		margin-right: 20px;
	}

	.nextPage1 {
		background-image: url('../assets/images/btn/btnRight.png');
	}

	.nextPage2 {
		background-image: url('../assets/images/btn/btnRight2.png');
	}
</style>