<template>
	<view class="container">
	<!-- 	
		<view class="banner-box">
			<image v-if="currentTabIndex == 0" src="/static/imgs/visitor.png" mode=""></image>
			<image v-if="currentTabIndex == 3" src="/static/imgs/visitor.png" mode=""></image>
		</view> -->
		<view class="main">
			<!--  <view class="tab-box">
				<view class="tab-item" :class="currentTabIndex == 0 ? 'active' : ''" @click="currentTabIndex = 0">考试列表</view>
				<view class="tab-item" :class="currentTabIndex == 3 ? 'active' : ''" @click="currentTabIndex = 3">考试记录</view> 
			</view>  -->
			<!-- 访客预约表单 -->
			<view v-if="currentTabIndex == 0">
				 
				<view style="margin-bottom:2upx; padding-bottom: 10upx;" class="list-item form-box" v-for="(item,index) in examlist" :key="index">
					<radio-group @change="radioChange" :data-id="item.projectId" v-if="item.type == 0">
						<view style="padding: 10upx 0upx 10upx 0upx;font-size: 26upx;"> {{index+1}}，{{item.subject}}
						</view>
						<label v-if="item.optionA != null" class="uni-list-cell uni-list-cell-pd breakLine" >
							<view style="display: inline-block;padding-top: 10upx;padding-left:40upx;">
								<radio style="transform:scale(0.8)" value="A"/>
							</view>
							<view  class="fs30" style="display: inline-block;font-size: 22upx;">A {{item.optionA}}</view>
							
						</label>
						<label v-if="item.optionB != null" class="uni-list-cell uni-list-cell-pd breakLine" >
							<view style="display: inline-block;padding-top: 10upx;padding-left:40upx;">
								<radio style="transform:scale(0.8)" value="B"/>
							</view>
							<view  class="fs30" style="display: inline-block;font-size: 22upx;">B {{item.optionB}}</view>
							
						</label>
						<label  v-if="item.optionC != null" class="uni-list-cell uni-list-cell-pd breakLine" >
							<view style="display: inline-block;padding-top: 10upx;padding-left:40upx;">
								<radio style="transform:scale(0.8)" value="C"/>
							</view>
							<view  class="fs30" style="display: inline-block;font-size: 22upx;">C {{item.optionC}}</view>
							
						</label>
						<label v-if="item.optionD != null" class="uni-list-cell uni-list-cell-pd breakLine" >
							<view style="display: inline-block;padding-top: 10upx;padding-left:40upx;">
								<radio style="transform:scale(0.8)" value="D"/>
							</view>
							<view  class="fs30" style="display: inline-block;font-size: 22upx;">D {{item.optionD}}</view>
							
						</label>
						<label  v-if="item.optionE != null && item.optionE != ''" class="uni-list-cell uni-list-cell-pd breakLine" >
							<view style="display: inline-block;padding-top: 10upx;padding-left:40upx;">
								<radio style="transform:scale(0.8)" value="E"/>
							</view>
							<view  class="fs30" style="display: inline-block;font-size: 22upx;">E {{item.optionE}}</view>
							
						</label>
						<!-- <view class="xx" v-if="item.optionA != null"><radio value="A" /> A，{{item.optionA}}
						</view>
						<view class="xx" v-if="item.optionB != null"> <radio value="B" />B，{{item.optionB}}
						</view>
						<view class="xx" v-if="item.optionC != null"> <radio value="C" />C，{{item.optionC}}
						</view>
						<view class="xx" v-if="item.optionD != null"><radio value="D" />D，{{item.optionD}}
						</view>
						<view class="xx" v-if="item.optionE != null && item.optionE != ''"> <radio :value="E" />E， {{item.optionE}}
						</view> -->
					</radio-group>
					               
										 
					<checkbox-group @change="checkboxChange" :data-id="item.projectId" v-else-if="item.type == 1">
						<!-- <label class="uni-list-cell uni-list-cell-pd" v-for="item in items" :key="item.value">
							<view>
								<checkbox :value="item.value" :checked="item.checked" />
							</view>
							<view>{{item.name}}</view>
						</label> -->
						<view style="padding: 10upx 0upx 10upx 0upx;font-size: 26upx;"> {{index+1}}，{{item.subject}}</view>
						<view class="xx" v-if="item.optionA != null"><checkbox value="A" /> A，{{item.optionA}}
						</view>
						<view class="xx" v-if="item.optionB != null"> <checkbox value="B" />B，{{item.optionB}}
						</view>
						<view class="xx" v-if="item.optionC != null"> <checkbox value="C" />C，{{item.optionC}}
						</view>
						<view class="xx" v-if="item.optionD != null"><checkbox value="D" />D，{{item.optionD}}
						</view>
						<view class="xx" v-if="item.optionE != null && item.optionE != ''"> <checkbox :value="E" />E， {{item.optionE}}
						</view>
					</checkbox-group> 
				</view>
				
				<view v-if="currentTabIndex == 0 && examlist.length>0">
					<view class="occupied"></view>
					<view class="footer-btn"><view class="btn" @click="submit">提交</view></view>
				</view>  
			</view>
		
			<!-- 预约记录列表 -->
			<view class="list-box" v-if="currentTabIndex == 3">
				<view class="list-item" v-for="(item,index) in list" :key="index" >
					 <view class="form-item" style="width: 100%;margin: 10upx 0upx 10upx 0upx;padding: 14upx 0upx;">
					 	<view class="visitcon w35">名称</view>
					 	<view class="visitcon w35">时间</view>
					 	<view class="visitcon w30">分数</view>
					 </view>
					 <view> 
					 	<view class="visitcon w35" >{{ item.examName }}</view>
					 	<view class="visitcon w35" >{{ item.examTime }}</view>
					 	<view class="visitcon w30">{{ item.fraction }}</view>
					 </view>
				</view>
			</view>
			
			<!-- 预约记录列表 -->
			<view class="list-box" v-if="currentTabIndex == 4">
				<view class="list-item" v-for="(item,index) in list" :key="index" 
				@click='toDetail("/pages/visitorInvited/visitorInvited?id="+item.detail_id+"&userId="+userId)'>
					<view class="title">
						<text class="line"></text>
						<text class="text">被邀记录</text>
						<text class="status2" v-if="item.current_status.charAt(item.current_status.length-1)==0">待审核</text>
						<text class="status" v-if="item.current_status==1">已同意</text>
						<text class="status1" v-if="item.current_status==2">已拒绝</text>
						<text class="status1" v-if="item.current_status==3">待本人确认</text>
						<text class="status1" v-if="item.current_status==4">已取消</text>
					</view>
					<view class="content">
						<view class="info-item">
							<view class="fl-text">被访人:</view>
							<view class="fr-text">{{item.visited_person_name}}</view>
						</view>
						<view class="info-item">
							<view class="fl-text">被访时间:</view>
							<view class="fr-text">{{item.visit_start_time}}</view>
						</view>
						<view class="info-item">
							<view class="fl-text">主访人:</view>
							<view class="fr-text">{{item.visitor_name}}</view>
						</view>
						<view class="info-item">
							<view class="fl-text">申请时间:</view>
							<view class="fr-text">{{item.apply_time}}</view>
						</view>
						<!-- <view class="comment-btn" @click.stop="del(item.detail_id,4,index)">删除</view> -->
					</view>
				</view>
			</view>
			<content-none v-if="currentTabIndex != 0 && list.length == 0" :padTop="20"></content-none>
		</view>
		<uni-calendar
			ref="calendar"
			:insert="false"
			@confirm="confirm"
			>
		</uni-calendar>
		<uni-calendar
			ref="calendar2"
			:insert="false"
			@confirm="confirm2"
			>
		</uni-calendar>
		<load-more v-show="currentTabIndex == 3 || currentTabIndex == 4"
		:loadingType="loadingType" :contentText="contentText"></load-more>
	</view>
</template>

<script>
	import uniCalendar from '@/components/uni-calendar/uni-calendar.vue';
	import {getExamList,getExamDetail,saveExam,getMyExamAnswerList,greenVisitorInfo,getOrargs,getAllDept} from '@/common/api.js';
	import {callbackRequest,convertImgToBase64,alertTip,getStorage,formatDate,setStorage} from '@/common/util.js';
	import loadMore from '@/components/loadMore.vue'; 
	import contentNone from '@/components/contentNone.vue';
	import datetimePicker from '@/components/dateTime.vue';
	import xflSelect from '@/components/xfl-select/xfl-select.vue'
	//import test from '@/js_sdk/leiqch-exif/exif/exif.js'
	let currentTime = new Date().getTime();
	let millisecond = 24 * 7 * 60 * 60 * 1000; // 七天
	let tenMin = 10 * 60 * 1000; // 十分钟
	let twoHtenMin = 2*60 * 60 * 1000 +tenMin; // 两小时十分钟
	export default {
		
		data() {
			return {
				userId:getStorage('userInfo').userId,//登录用户id
				examlist:[],
				examId :'1',
				myexam:{},
				
				selectedTime:"",
				currentTabIndex:0,
				page:1,
				page3:1,
				page4:1,
				pageSize:5,
				deptList: ['科技楼', '物业楼'],
				departmentIndex: 0, //选择的地点下标
				deptmentList: [{name:"请选择..."}], //部门列表
				deptmentListIndex:0,
				num:[{}],
				number:0,
				button_text:"提交预约",
				role:1,
				list:[],
				list2:[],
				
				orgName:'',
				visitPlace:"0",
				visitedPersonName:"",
				visitedPersonTel:"",
				visitStartTime:"",
				visitEndTime:"",
				visitReason:"",
				
				zhu_visitorName:getStorage('userInfo').username,
				zhu_visitorTel:getStorage('userInfo').telnumber,
				zhu_idcard:getStorage('userInfo').idnumber,
				zhu_orgName:getStorage('userInfo').orgName,
				imgs:[],//用户上传的图片
				identityAuth:getStorage('userInfo').identityAuth,
				idCard_imgs:[],
				loadingType:0,//0-loading前；1-loading中；2-没有更多了
				loadingType2:0,//0-loading前；1-loading中；2-没有更多了
				contentText: {
					contentdown: "上拉加载更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
				defaultMinDate: currentTime,// 最小时间
				minTime: '00:00',
				defaultMaxDate: new Date(currentTime+millisecond).getTime(),// 最大时间
				maxTime: '24:00',
				defaultBeginTime: formatDate(currentTime+tenMin,'mTime'), // 默认来访时间
				defaultEndTime: formatDate(currentTime+twoHtenMin,'mTime'), // 默认结束时间
				list_dep:[],
				finalList:[],
				showList:false,
				submitFlag:true,
				items: [{
							value: '0',
							name: '普通访客',
							checked: 'true'
						},
						{
							value: '1',
							name: '参会人员',
						},
						
					],
				appointmentType:0,
			 
				isCar:0,
				licensePlate:'',
				
			}
		},
		components: {
			uniCalendar,
			loadMore,
			datetimePicker,
			contentNone,
			xflSelect
		},
		created() {
			var param = getStorage('userInfo').face_Pic1;
			 this.getExamList()
			this.myexam = new Map();
			if(param!=""){
				this.imgs.push(param);
				// var p1 = param.split(":80")[1];
				// p1="http://zhhq.cdzywpt.cn:80"+p1;
				// //param.replace("http://47.99.190.179:80/","http://zhhq.cdzywpt.cn/");
				// convertImgToBase64(p1, function(base64) {
				// 	console.log(base64);
				// 	this.imgs.push(base64)
				// });
			}
		},
		onLoad(option) {
			this.examId =option.examId;
			
			this.getDepartment();
		}, 
		 
		watch:{
			currentTabIndex:function(newVal,oldVal){
				 
			}
		},
		methods: {
			radioChange: function(e) {
				 this.myexam.set(e.currentTarget.dataset.id, e.target.value);
				// this.myexam[e.currentTarget.dataset.id] = e.target.value; // 新增键值对
				
			},
			getExamList(){
				var data = {userId:this.userId,uuid:this.examId};
				let params = {
					"method": getExamDetail,
					"data": data
				};
				self  = this;
				console.log(" === ", data.userId);
				callbackRequest(params)
				.then(res =>{
					if(res.data.returnCode == 1){
						let result = res.data.returnData.list;
						console.log(' -result- ',result);
						self.examlist = result; 
					}else {
						alertTip(res.data.returnMsg);
					}
				})
			},
			checkboxChange: function (e) {
				this.myexam.set(e.currentTarget.dataset.id, e.detail.value.toString());
			},
		  
			 
			toDetail(url){
				uni.navigateTo({
					url
				})
			},
			 
			confirm(e) {
				this.selectedTime = e.fulldate;
		    },
			open(type){
				if(type == 1){
					this.$refs.calendar.open();
				}else{
					this.$refs.calendar2.open();
				}
			},
			addBtn(){
				// var o = {flag:1}
				// this.num.push(o);
				// this.number++;
				var o = {
					zvisitorName:"",
					visitorTel:"",
					idcard:"",
					flag:1
					}
				this.num.push(o);
				this.number++;
			},
			jianBtn(index){
				this.num[index].flag = 0;
				this.number--;
			},
			getDepartment() {
				let data = {
					method: getAllDept,
					data: {}
				};
				callbackRequest(data).then(res => {
					if (res.data.returnCode == 1) {
						// console.log("---",res.data.returnData);
						this.deptmentList = this.deptmentList.concat(res.data.returnData);
					}
				});
			},
			submit(){
				var data1 = this.myexam;
				var inde = data1.size;
				
				if(inde != this.examlist.length){
					alertTip("请做完所有题目后再提交。");	
				}else{
					self  = this;
					var answer = "";
					 for( var key in this.myexam){
					 	var dvalue = this.myexam[key]
						var dataa = Array.from(dvalue);
						
						for(var i= 0; i<dataa.length ;i++){
							var dvalue2 = dataa[i]
							// console.log("---",dvalue2[0]+"----->"+dvalue2[1]);
							if(i == dataa.length-1){
								answer +=  dvalue2[1];
							}else{
								answer +=  dvalue2[1] +"&";
							}
							
						}
					 }
					 
					let params = {
						"method": saveExam,
						"data": {answer:answer,userId:this.userId,examId:this.examId}
					};
					uni.showModal({
					 	title: '提示',
					 	content: "确定要提交么？",
					 	success: function(res){
					 		if (res.confirm) {
					 			// var data = {userId:this.userId,uuid:this.examId};
					 			// console.log(" === ", data.userId);
					 			callbackRequest(params)
					 			.then(res =>{
					 				if(res.data.returnCode == 1){
					 					// let result = res.data.returnData.list;
					 					// console.log(' -result- ',result);
					 					// self.examlist = result; 
										 
										alertTip('提交成功');
										setTimeout(function() {
											uni.navigateTo({
												url: '/pages/exam/exam'
											});
										}, 1500);
					 				}else {
					 					alertTip(res.data.returnMsg);
					 				}
					 			})
					 		}
					 	}
					})
				}
				 
				
			},
			//主访客上传图片
			chooseImg(){
				let _this = this;
				uni.chooseImage({
					count:2,
					success:res => {
						let param = "";
						let imgArr =  res.tempFilePaths
						for (var i = 0; i < imgArr.length; i++) {
							param = imgArr[i];
							//convertImgToBase64(param, function(base64) {
							var EXIF=require('@/js_sdk/leiqch-exif/exif/exif.js');
							var image = new Image();
							image.onload = function() {
								EXIF.getData(image, function() {
									_this.resetOrientation(param,EXIF.getTag(this, 'Orientation'),function(base64Correct){
										_this.imgs.push(base64Correct)
									});
								});
							};
							image.src = param;
							//})
						}
					}
					
				})
			},
		 
			idCard_chooseImg(){
				let _this = this;
				uni.chooseImage({
					count:2,
					success:res => {
						let param = "";
						let imgArr =  res.tempFilePaths
						for (var i = 0; i < imgArr.length; i++) {
							param = imgArr[i];
							convertImgToBase64(param, function(base64) {
								_this.idCard_imgs.push(base64)
							})
						}
					}
				})
			},
			//删除图片
			removeImg(index){
				this.imgs.splice(index,1);
			},
			removeIdCardImg(index){
				this.idCard_imgs.splice(index,1);
			},
			del(id,val,index){
				// console.log(id,val);
				let params = {
					"method": greenVisitorInfo,// 申请的删除
					"data": {userId:this.userId,applyId:id,applyType:"3"}//分三种情况
				};
				callbackRequest(params)
				.then(res =>{
					// console.log(res);
					//刷新页面
					if(res.data.returnMsg == "删除成功！"){
						if(val == 3){
							this.list.splice(index,1);
						}else{
							this.list2.splice(index,1);
						}
						alertTip(res.data.returnMsg);
					}else{
						alertTip(res.data.returnMsg);
					}
				})
			}
		},
		onReachBottom() {
			if (this.loadingType !== 0 || this.currentTabIndex == 0) {
				return;
			}
			this.loadingType = 1;
			this.page = this.page + 1;
			this.getMyList();
		},
	}
</script>

<style lang="scss">
	@import '@/static/css/common.scss';
	page{
		// background: #f8f8f8;
	}
	.breakLine{
		 display: block;
	}
	.xx{
		padding: 10upx 0upx 10upx 0upx;font-size: 26upx;transform:scale(0.8)
	}
	.w30 {
		width: 30%;
	}
	.w35 {
		width: 35%;
	}
	.w15 {
		width: 15%;
	}
	.w33 {
		width: 33.3%;
	}
	.w45 {
		width: 45%;
	}
	.visitcon {
		display: inline-block;
		text-align: center;
		font-size: 14px;
	}
	.visitconContent {
		text-decoration: underline;
		display: inline-block;
		text-align: center;
		font-size: 14px;
	}
	.container{
		position:relative;
		overflow:hidden;
		background: #f8f8f8;
		min-height:100vh;
		.banner-box{
			width:100%;
			height:240upx;
			position:absolute;
			top:0;
			left:0;
			image{
				width:100%;
				height:100%;
			}
		}
		.main{
			margin:20upx 40upx 0;
			position:relative;
			z-index:10;
			.tab-box{
				overflow:hidden;
				border-radius:10upx 10upx 0 0;
				background: rgba(132,149,167,0.8);
				height:70upx;
				.tab-item{
					float:left;
					height:70upx;
					width:50%;
					font-size:30upx;
					color:#e5f6ff;
					text-align:center;
					line-height:70upx;
				}
				.active{
					background: #fff;
					color:#333;
					border-radius:10upx 10upx 0 0;
					font-weight:bold;
				}
			}
			.form-box{
				padding:20upx 30upx 0upx;
				margin-bottom: 20upx;
				background: #fff;
				.form-item{
					overflow:hidden;
					border-bottom:1px solid #eee;
					padding:30upx 0;
					.label{
						float:left;
						width:150upx;
						font-size:28upx;
						color:#333;
						font-weight:bold;
						line-height:50upx;
					}
					.ipt-box{
						margin-left:160upx;
						input{
							width:100%;
							height:50upx;
							line-height:50upx;
							font-size:26upx;
							color:#666;
						}
						.pic{
							width:60upx;
							height:60upx;
							line-height: 80upx;
						}
					}
					.select{
						.arrow{
							float:right;
							width:16upx;
							height:29upx;
							margin-top:10upx;
						}
						input{
							width:70%;
						}
					}
					.jian{
						width: 50upx;
						height:50upx;
						margin-left: 280upx;
					}
					.select {
						.arrow {
							float: right;
							width: 16upx;
							height: 29upx;
							margin-top: 10upx;
						}
					
						.picker {
							height: 50upx;
							line-height: 50upx;
							font-size: 26upx;
							color: #666;
						}
					}
				}
				.upload-box{
					.label{
						float:none;
					}
					.img-box{
						overflow:hidden;
						padding-top:25upx;
						.img-item{
							float:left;
							width:210upx;
							height:210upx;
							border:1px solid #ddd;
							margin:0 20upx 20upx 0upx;
							position:relative;
							.img{
								display:block;
								width:100%;
								height:100%;
							}
							.remove-btn{
								position:absolute;
								top:-18upx;
								right:-18upx;
								width:44upx;
								height:44upx;
								z-index:2;
							}
						}
						.upload-btn{
							.img{
								width:60upx;
								height:60upx;
								margin:75upx auto 0;
							}
						}
					}
				}
				.sure-btn{
					width:100%;
					height:80upx;
					font-size:28upx;
					color:#fff;
					text-align:center;
					line-height:80upx;
					border-radius:8upx;
					background: #0066CC;
					background:linear-gradient(to right, #ffc200,#ff9000);/*设置按钮为渐变颜色*/
					margin-top:50upx;
				}
			}
			.form-box .form-item:last-child{
				border-bottom:0px;
			}
			.list-box{
				.list-item{
					background: #fff;
					margin-bottom:10upx;
					.title{
						border-bottom:1px solid #eee;
						padding:20upx 10upx;
						overflow:hidden;
						line-height:40upx;
						.line{
							display:inline-block;
							width:10upx;
							height:32upx;
							background: $assistColor;
							margin-top:4upx;
						}
						.text{
							display:inline-block;
							font-size:28upx;
							color:#444;
							font-weight:bold;
							margin-left:10upx;
							vertical-align:top;
						}
						.status{
							font-size:26upx;
							color:$assistColor;
							float:right;
						}
						.status1{
							font-size:26upx;
							color:#5063c3;
							float:right;
						}
						.status2{
							font-size:26upx;
							color:red;
							float:right;
						}
					}
					.content{
						padding:10upx 20upx;
						// padding:10upx 10upx 60upx 10upx;
						.info-item{
							overflow: hidden;
							padding-bottom:10upx;
							.fl-text{
								float:left;
								font-size:26upx;
								color:#444;
								font-weight:bold;
								line-height:40upx;
							}
							.fr-text{
								float:right;
								font-size:26upx;
								color:#666;
								line-height:40upx;
							}
						}
					}
					.comment-btn {
						float: right;
						font-size: 24upx;
						border-radius: 10upx;
						color: #fff;
						line-height: 50upx;
						text-align: center;
						min-width: 140upx;
						background-color: #00c277;
					}
				}
			}
		}
	}
#addbtn{
	height: 100upx;
	background-color: #FFFFFF;
	border-radius: 20upx;
	color: #333333;
	position: relative;
	margin-top: 20upx;
	line-height:100upx;
	text-align:center;
	text{
		font-size: 38upx;
		color: #00c277;
	}
}
.addbtn view text:nth-child(1){
	font-size: 38upx;
	color: #00c277;
}
.addbtn view text:nth-child(2){
	font-size: 32upx;
	color: #00c277;
}
.tips{
	font-size: 22upx;
	// margin-left: 80upx;
	margin-top: 20upx;
}
</style>
