<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);
					}
				}
			}
			//实现进度条效果
      if (map.size==0) var length = map.size+1;else 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'});
              }

						}, 3 * 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>
