<template>
	<view class="container">
		<view class="banner-box">
			<image v-if="currentTabIndex == 0" src="/static/imgs/visitor.png" mode=""></image>
			<image v-if="currentTabIndex == 1" src="/static/imgs/visitor.png" mode=""></image>
			<image v-if="currentTabIndex == 2" 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 == 1 ? 'active' : ''" @click="currentTabIndex = 1">审批授权</view>
				<view class="tab-item" :class="currentTabIndex == 2 ? 'active' : ''" @click="currentTabIndex = 2">邀约记录</view>
			</view>
			<!-- 访客预约表单 -->
			<view v-if="currentTabIndex == 0">
				<view class="form-box" >
					<view class="form-item">
						<text class="label">到访地点</text>
						<view class="ipt-box">
							<input type="text" placeholder="请填写到访地点" v-model="deptList[visitPlace]" disabled>
						</view>
						<!-- <text class="label">到访地点</text>
						<view class="ipt-box select" @click="open">
							<image class="arrow" src="/static/icons/right-arrow.png" mode=""></image>
							<picker class="picker" :range="deptList" @change="changeDepartment">
								<view>{{deptList[departmentIndex]}}</view>
							</picker>
						</view> -->
					</view>
					<view class="form-item">
						<text class="label">被访人姓名</text>
						<view class="ipt-box">
							<input type="text" placeholder="请填写被访人姓名" v-model="visitedPersonName">
						</view>
					</view>
					<view class="form-item">
						<text class="label">手机号码</text>
						<view class="ipt-box">
							<input type="text"  placeholder="请填写手机号码" v-model="visitedPersonTel">
						</view>
					</view>
					<view class="form-item">
						<text class="label">来访时间</text>
						<!-- <view class="ipt-box select" @click="open(1)"> -->
						<view class="ipt-box select" >
							<image class="arrow" src="/static/icons/right-arrow.png" mode=""></image>
							<!-- <input type="text" :value="visitStartTime" placeholder="请选择来访时间"> -->
							<datetime-Picker class="picker" :placeholder="'请选择来访时间'"
												:maxDate="defaultMaxDate" 
												:minDate="defaultMinDate"
												:minTime="minTime"
												:maxTime="maxTime"
												:pickerIndex="1"
												@getData="chooseDate" :type="'anyTime'">
							 </datetime-Picker>
						</view>
					</view>
					<view class="form-item">
						<text class="label">结束时间</text>
						<!-- <view class="ipt-box select" @click="open(2)"> -->
						<view class="ipt-box select">
							<image class="arrow" src="/static/icons/right-arrow.png" mode=""></image>
							<!-- <input type="text" :value="visitEndTime" placeholder="请选择结束时间"> -->
							<datetime-Picker class="picker" :placeholder="'请选择结束时间'"
												:maxDate="defaultMaxDate" 
												:minDate="defaultMinDate"
												:minTime="minTime"
												:maxTime="maxTime"
												:pickerIndex="2"
												@getData="chooseDate" :type="'anyTime'">
							 </datetime-Picker>
						</view>
					</view>
					<view class="form-item">
						<text class="label">来访事由</text>
						<view class="ipt-box">
							<input type="text" placeholder="请填写来访事由" v-model="visitReason">
						</view>
					</view>
					<!-- <view class="sure-btn">确认申请</view> -->
				</view>
				
				<view class="form-box">
					<!-- 主访客 -->
					<view id="visitor">
						<view class="visitor">
							<view class="form-item">
								<text class="label">访客姓名</text>
								<view class="ipt-box">
									<input class="name" type="text" v-model="zhu_visitorName" placeholder="请填写姓名">
								</view>
							</view>
							<view class="form-item">
								<text class="label">手机号</text>
								<view class="ipt-box">
									<input class="name" type="tel" v-model="zhu_visitorTel" placeholder="请填写访客手机号" />
								</view>
							</view>
							<view class="form-item">
								<text class="label">身份证号</text>
								<view class="ipt-box">
									<input class="name" type="text" v-model="zhu_idcard" placeholder="请填写访客身份证号" />
								</view>
							</view>
						</view>
					</view>
				</view>
				
				<view class="form-box" v-if="number > 0">
					<!-- 随行人员 -->
					<view id="visitor" v-for="(item,index) in num" :key="index">
						<view class="visitor" v-if='item.flag == 1'>
							<view class="form-item">
								<text class="label">访客姓名</text>
								<view class="ipt-box">
									<input class="name" type="text" v-model="item.visitorName" placeholder="请填写姓名">
								</view>
							</view>
							<view class="form-item">
								<text class="label">手机号</text>
								<view class="ipt-box">
									<input class="name" type="tel" v-model="item.visitorTel" placeholder="请填写访客手机号" />
								</view>
							</view>
							<view class="form-item">
								<text class="label">身份证号</text>
								<view class="ipt-box">
									<input class="name" type="text" v-model="item.idcard" placeholder="请填写访客身份证号" />
								</view>
							</view>
							
							<view class="form-item" v-if="number>0">
								<image class="jian" src="../../static/imgs/jian.png"  @click="jianBtn(index)" alt=""></image>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 添加 -->
				<view id="addbtn" class="add clear">
					<view class="addbtn">
						<view>
							<text @click="addBtn()">+ 新增人员</text>
							<!-- <text>历史记录</text> -->
						</view>
					</view>
				</view>
				<view class="tips" >温馨提醒：<br>      访客来访时间为8:00-18:00，特殊情况请联系接待室办理！</view>
				
				<view class="occupied"></view>
				<view class="footer-btn footer-btn-color" @click="submit()">
					<view class="btn">确认邀请</view>
				</view>
			</view>
		
			<!-- 预约记录列表 -->
			<view class="list-box" v-if="currentTabIndex == 1">
				<view class="list-item" v-for="(item,index) in list" :key="index" 
				@click='toDetail("/pages/visitorAppointment/visitorAppointment?id="+item.detail_id+"&role=2&userId="+userId)'>
					<view class="title">
						<text class="line"></text>
						<text class="text">访客预约</text>
						<text class="status2" v-if="item.first_status==0">待审核</text>
						<text class="status" v-if="item.first_status==1">已同意</text>
						<text class="status1" v-if="item.first_status==2">已拒绝</text>
						<text class="status1" v-if="item.first_status==3">待本人确认</text>
						<text class="status1" v-if="item.first_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,1,index)">删除</view> -->
					</view>
				</view>
			</view>
			
			<!-- 预约记录列表 -->
			<view class="list-box" v-if="currentTabIndex == 2">
				<view class="list-item" v-for="(item,index) in list" :key="index" 
				@click='toDetail("/pages/visitorAppointment/visitorAppointment?id="+item.detail_id+"&userId="+userId)'>
					<view class="title">
						<text class="line"></text>
						<text class="text">邀约记录</text>
						<text class="status2" v-if="item.first_status==0">待审核</text>
						<text class="status" v-if="item.first_status==1">已同意</text>
						<text class="status1" v-if="item.first_status==2">已拒绝</text>
						<text class="status1" v-if="item.first_status==3">待本人确认</text>
						<text class="status1" v-if="item.first_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,2,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 == 1 || currentTabIndex == 2" 
		:loadingType="loadingType" :contentText="contentText"></load-more>
	</view>
</template>

<script>
	import uniCalendar from '@/components/uni-calendar/uni-calendar.vue';
	import {invite,getMyVisitorList,greenVisitorInfo} from '@/common/api.js';
	import {callbackRequest,alertTip,getStorage} from '@/common/util.js';
	import loadMore from '@/components/loadMore.vue';
	import datetimePicker from '@/components/dateTime.vue';
	import contentNone from '@/components/contentNone.vue';
	let currentTime = new Date().getTime();
	let millisecond = 24 * 7 * 60 * 60 * 1000; 
	export default {
		data() {
			return {
				userId:getStorage('userInfo').userId,
				currentTabIndex:0,
				page:1,
				page2:1,
				pageSize:5,
				deptList: ['本部大楼', '银座'],
				departmentIndex: 0, //选择的地点下标
				num:[{}],
				button_text:"提交预约",
				number:0,
				role:2,//管理员
				list:[],
				list2:[],
				visitPlace:"0",
				visitedPersonName:getStorage('userInfo').username,
				visitedPersonTel:getStorage('userInfo').telnumber,
				visitStartTime:"",
				visitEndTime:"",
				visitReason:"",
				
				zhu_visitorName:"",
				zhu_visitorTel:"",
				zhu_idcard:"",
				loadingType:0,//0-loading前；1-loading中；2-没有更多了
				contentText: {
					contentdown: "上拉加载更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
				defaultMinDate: currentTime,// 最小时间
				minTime: '08:00',
				defaultMaxDate: new Date(currentTime+millisecond).getTime(),// 最大时间
				maxTime: '18:00',
			}
		},
		components: {
		    uniCalendar,
			loadMore,
			datetimePicker,
			contentNone
		},
		watch:{
			currentTabIndex:function(newVal,oldVal){
				this.currentTabIndex = newVal;
				if(this.currentTabIndex){
					this.page = 1;
					this.loadingType = 0;
					this.getMyList();
				}
			}
		},
		onLoad(options) {
			// 审批授权 与 邀约记录 共用一个页面
			// 根据 页面传值 type 区分，显示默认页面
			if (options.type == 1) {
				this.currentTabIndex = 1
			} else if (options.type == 2) {
				this.currentTabIndex = 0;
			}
		},
		methods: {
			getMyList(newVal){
				let params = {
					"method": getMyVisitorList,
					"data": {userId:this.userId,type:'03',flag:this.currentTabIndex,pageSize:this.pageSize,page:this.page}
				};
				callbackRequest(params)
				.then(res =>{
					if(res.data.returnCode == 1){
						let result = res.data.returnData;
						if(this.page == 1){
							this.list = result;
						}else {
							if(result.length > 0){
								this.list = [...this.list,...result];
								this.loadingType = 0;
							}else {
								this.loadingType = 2;
							}
						}
					}
				})
			},
			chooseDate(e){
				if(e.pickerIndex == 1){
					this.visitStartTime = e.time;
				}else {
					this.visitEndTime = e.time;
				}
			},
			changeDepartment(e) {
				// console.log(e)
				this.departmentIndex = e.detail.value;
			},
			toDetail(url){
				uni.navigateTo({
					url
				})
			},
			confirm(e) {
				this.visitStartTime = e.fulldate;
		    },
			confirm2(e) {
				this.visitEndTime = e.fulldate;
			},
			open(type){
				if(type == 1){
					this.$refs.calendar.open();
				}else{
					this.$refs.calendar2.open();
				}
			},
			addBtn(){
				var o = {
					zvisitorName:"",
					visitorTel:"",
					idcard:"",
					flag:1
					}
				this.num.push(o);
				this.number++;
			},
			jianBtn(index){
				this.num[index].flag = 0;
				this.number--;
			},
			submit(){
				var data = {userId:this.userId};
				data.id = ""; data.visitedPersonId = "";
				//被访人信息
				data.stayArea = this.visitPlace;
				data.visitedPersonName = this.visitedPersonName; data.visitedPersonTel = this.visitedPersonTel;
				data.visitStartTime = this.visitStartTime; data.visitEndTime = this.visitEndTime;
				data.visitReason = this.visitReason; 
				//主访客信息
				data.visitorName = this.zhu_visitorName; 
				data.visitorTel = this.zhu_visitorTel;
				data.idcard = this.zhu_idcard;
				
				data._status = "3";/*0待审批 1已同意 2已拒绝 3待本人确认*/
				data.creator = this.userId; data.modifier = this.userId;/*修改人*/
				// data.gmtCreated = "";/*创建时间*/ 
				// data.gmtModified = "";/*修改时间*/
				data.isDeleted = "N"; data.mxVirtualId = "";
				//验证数据
				if ((data.stayArea) == undefined || (data.stayArea+"").replace(/\s*/g,"") == ""
				|| (data.visitedPersonName) == undefined || (data.visitedPersonName+"").replace(/\s*/g,"") == ""
				|| (data.visitedPersonTel) == undefined || (data.visitedPersonTel+"").replace(/\s*/g,"") == "") {
					alertTip("访问人员地址、姓名、电话不能为空");
					return;
				};
				if ((data.visitStartTime) == undefined || (data.visitStartTime+"").replace(/\s*/g,"") == ""
				|| (data.visitEndTime) == undefined || (data.visitEndTime+"").replace(/\s*/g,"") == ""
				|| (data.visitReason) == undefined || (data.visitReason+"").replace(/\s*/g,"") == "") {
					alertTip("访问人员时间、理由不能为空！");
					return;
				};
				var curDate = new Date();
				var start = new Date(Date.parse(data.visitStartTime.replace(/-/g,"/")));
				var end = new Date(Date.parse(data.visitEndTime.replace(/-/g,"/")));
				if(start < curDate){
					alertTip("开始时间需大于现在时间");
					return;
				}
				if(end < start){
					alertTip("结束时间需大于开始时间");
					return;
				}
				if( start<start.setHours(8, 0, 0, 0) || end>end.setHours(18, 0, 0, 0)){
					alertTip("开始时间需在8点后，结束时间需在18点前");
					return;
				}
				if((start.setHours(0, 0, 0, 0) != end.setHours(0, 0, 0, 0))){
					alertTip("结束时间和开始时间必须为同一天");
					return;
				}
				if ((data.visitorName) == undefined || (data.visitorName+"").replace(/\s*/g,"") == ""
				|| (data.visitorTel) == undefined || (data.visitorTel+"").replace(/\s*/g,"") == "") {
					alertTip("访问人员姓名、手机号不能为空！");
					return;
				};
				//验证数据格式
				var reg = new RegExp("^[0-9]*$");
				var regex = /^1[3456789]\d{9}$/;
				// var regex = new RegExp("^((13[0-9])|(14[5,7,9])|(15[^4])|(18[0-9])|(17[0,1,3,5,6,7,8]))[0-9]{8}$");
				if (reg.test(data.visitorTel) === false
				|| regex.test(data.visitorTel) === false) {
					alertTip("访客手机号格式不正确");
					return;
				}
				if (reg.test(data.visitedPersonTel) === false
				|| regex.test(data.visitedPersonTel) === false) {
					alertTip("被访人手机号格式不正确");
					return;
				}
				if(data.visitedPersonName == data.visitorName && data.visitedPersonTel == data.visitedPersonTel){
					alertTip("被访人和访问人不可以为同一人！");
					return;
				}
				var id=/^[1-9][0-9]{5}(19|20)[0-9]{2}((01|03|05|07|08|10|12)(0[1-9]|[1-2][0-9]|31)|(04|06|09|11)(0[1-9]|[1-2][0-9]|30)|02(0[1-9]|[1-2][0-9]))[0-9]{3}([0-9]|x|X)$/;
				if (data.idcard && id.test(data.idcard) === false) {
					alertTip("访客身份证格式不正确");
					return;
				}
				
				data.greenRetinueInfoList = new Array();
				if(this.num.length > 1){
					var j = 0;
					for(var i = 1; i < this.num.length;i++){
						if(this.num[i].flag == 1){
							var visitors = {};
							visitors.retinueName = this.num[i].visitorName;
							visitors.visitorTel = this.num[i].visitorTel;
							visitors.idcard = this.num[i].idcard;
							if ((visitors.retinueName) == undefined || (visitors.retinueName).replace(/\s*/g,"") == ""
							|| (visitors.visitorTel) == undefined || (visitors.visitorTel).replace(/\s*/g,"") == "") {
								alertTip("随从人员姓名、电话、身份证不能为空");
								return;
							};
							//验证数据格式 
							if (reg.test(visitors.visitorTel) === false
							|| regex.test(visitors.visitorTel) === false) {
								alertTip("随从人手机号格式不正确");
								return;
							};
							if (visitors.idcard && id.test(visitors.idcard) === false) {
								alertTip("随从人员身份证格式不正确");
								return;
							}
							data.greenRetinueInfoList[j++] = visitors;
						}
					}
				}
				let params = {
					"method": invite,
					"data": data
				};
				console.log(data);
				callbackRequest(params)
				.then(res =>{
					// console.log(res);
					// console.log(res.data.returnMsg);
					alertTip(res.data.returnMsg);
					if("预约成功" == res.data.returnMsg){
						//刷新列表
						this.page = 1;
						this.list = [];
						this.visitStartTime = '';this.visitEndTime = '';
						this.visitReason = ''; 
						//主访客信息
						this.zhu_visitorName = ''; 
						this.zhu_visitorTel = '';
						this.zhu_idcard = '';
						this.num = [{}];
						setTimeout(_ => {
							this.currentTabIndex = 2;
						}, 2000)
					}
				})
			},
			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);
					//刷新页面
					console.log(this.list2);
					if(res.data.returnMsg == "删除成功！"){
						if(val == 1){
							this.list.splice(index,1);
							console.log(this.list);
						}else{
							this.list2.splice(index,1);
							console.log(this.list2);
						}
						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;
	}
	.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:172upx 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:33.33%;
					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;
						}
					}
				}
				.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;
				}
			}
			.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: 120upx;
		background-color: #FFFFFF;
		padding: 30upx;
		border-radius: 30upx;
		color: #333333;
		border-bottom: .033333rem solid #eee;
		align-items: center;
		position: relative;
		margin-top: 20upx;
}
.addbtn view text:nth-child(1){
	font-size: 32upx;
	margin-left: 220upx;
	color: #00c277;
}
.addbtn view text:nth-child(2){
	font-size: 32upx;
	margin-left: 180upx;
	color: #00c277;
}
.tips{
	font-size: 22upx;
	// margin-left: 80upx;
	margin-top: 20upx;
}
</style>
