<template>
	<view class="container">
		
		 
		<view class="main" style="margin-top: 20upx;">
			<!-- <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 class="tab-item" :class="currentTabIndex == 4 ? 'active' : ''" @click="currentTabIndex = 4">被邀记录</view> -->
			<!-- </view> -->
			<!-- 访客预约表单 -->
			<view v-if="currentTabIndex == 0">
				<view class="form-box" >
				 
					<view class="form-item">
						<text class="label">类型</text>
						<view class="ipt-box select">
							<image class="arrow" src="/static/icons/right-arrow.png" mode=""></image>
							<picker :value="resourceIndex" class="picker" v-if="resourceList2.length > 0" 
							:range="resourceList2" @change="changeDepartment1" range-key="name">
								<view>{{ resourceList2[resourceIndex].name }}</view>
							</picker>
						</view>
					</view>
					<view class="form-item">
						<text class="label">数量</text>
						<view class="ipt-box">
							<input type="text"  placeholder="请输入数量" v-model="resourceNum" maxlength="5">
						</view>
					</view>
					<view class="form-item">
						<text class="label">规格</text>
						<view class="ipt-box">
							<input type="text" disabled="true" placeholder="请输入单位" v-model="resourceType" maxlength="11">
						</view>
					</view>
					<view class="form-item">
						<text class="label" >{{timeText}}</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"
												:value="defaultBeginTime"
												@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="company">
						</view>
					</view>
					<view class="form-item">
						<text class="label">型号</text>
						<view class="ipt-box">
							<input type="text" placeholder="请输入型号" v-model="model">
						</view>
					</view>
					<!-- <view class="sure-btn">确认申请</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">{{commitText}}</view>
				</view>
			</view>
		
		 </view>
	</view>
</template>

<script>
	import uniCalendar from '@/components/uni-calendar/uni-calendar.vue';
	import {invite,getMyVisitorList,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
				resourceList:["口罩",'酒精',"消毒液","测温枪"],
				resourceList2:[{name:'口罩',typeCode:'1','st':'包'},
				{name:'酒精',typeCode:'1','st':'瓶'},
				{name:'消毒液',typeCode:'1','st':'瓶'},
				{name:'测温枪',typeCode:'1','st':'个'}],
				resourceIndex:0,
				resourceNum:0,
				company:'',
				model:'',
				timeText:'入库时间',
				commitText:'确认出库',
				resourceType:'包',
				
				
				selectedTime:"",
				currentTabIndex:0,
				page:1,
				page3:1,
				page4:1,
				pageSize:5,
				deptList: ['科技楼', '物业楼'],
				departmentIndex: 0, //选择的地点下标
				deptmentList: [{name:"请选择..."}], //部门列表
				num:[{}],
				number:0,
				button_text:"提交预约",
				role:1,
				list:[],
				list2:[],
				
				orgName:'',
				
				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,
				itemsCar: [{
							value: '0',
							name: '无车辆　',
							checked: 'true'
						},
						{
							value: '1',
							name: '有车辆',
						},
						
					],
				isCar:0,
				licensePlate:'',
				
			}
		},
		components: {
			uniCalendar,
			loadMore,
			datetimePicker,
			contentNone,
			xflSelect
		},
		created() {
			// var param = getStorage('userInfo').face_Pic1;
			
			// 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(obj) {
			// this.getDepartment();
			var type = obj.type;
			if(type ==0){
				this.timeText = '出库时间';
				this.commitText = '确认出库';
			}else if(type ==1){
				this.timeText = '入库时间';
				this.commitText = '确认入库';
			}
			var name = obj.name;
			this.resourceNum = obj.num;
			for(var i=0;i<this.resourceList2.length ;i++){
				if(this.resourceList2[i].name == name ){
					this.resourceIndex = i;
					this.resourceType = this.resourceList2[i].st;
				}
			}
			// console.log("---name--"+name+"--type--"+type+"---num--"+this.resourceNum)
		},
		watch:{
			 
		},
		methods: {
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.target.value) {
						this.appointmentType = i;
						//this.uinfo.isInner = this.items[this.current].value;
						break;
					}
				}
				
			},
			 
			radioChangeCar:function(evt){
				for (let i = 0; i < this.itemsCar.length; i++) {
					if (this.items[i].value === evt.target.value) {
						
						this.isCar = i;
						//this.uinfo.isInner = this.items[this.current].value;
						break;
					}
				}
			},
			changeDepartment(e) {
				this.departmentIndex = e.detail.value;
			},
			changeDepartment1(e) {
				 
				this.resourceIndex = e.detail.value;
				this.resourceType = this.resourceList2[this.resourceIndex].st;
			},
			getMyList(){
				var data = {userId:this.userId,type:'03',flag:this.currentTabIndex,page:this.page,pageSize:this.pageSize};
				let params = {
					"method": getMyVisitorList,
					"data": data
				};
				console.log(" === ", data.userId);
				callbackRequest(params)
				.then(res =>{
					if(res.data.returnCode == 1){
						let result = res.data.returnData;
						console.log(' -- ',result);
						if(this.page == 1){
							this.list = result;
							if(result.length > 0){
								var identityAuth = result[0].identityAuth;
								var userInfo = getStorage('userInfo');
								userInfo.identityAuth = identityAuth;
								setStorage('userInfo',userInfo);
								this.identityAuth = getStorage('userInfo').identityAuth;
							}
						}else {
							if(result.length > 0){
								this.list = [...this.list,result];
								this.loadingType = 0;
							}else {
								this.loadingType = 2;
							}
						}
					}else {
						alertTip(res.data.returnMsg);
					}
				})
			},
	
			chooseDate(e){
				if(e.pickerIndex == 1){
					this.defaultBeginTime = e.time;
				}else {
					this.defaultEndTime = e.time;
				}
			},
			 
			inputSel(e){
				// this.uinfo.orgName = e.detail.value;
				var finalList = [];
				for (var i = 0; i < this.list.length; i++) {
					let ite = this.list[i];
					// 包含某一字符串
					if(ite.indexOf(e.detail.value) !== -1){
						finalList = finalList.concat(ite);
					}
				}
				this.finalList = finalList;
				this.showList = true;
			},
			changeSel(newVal,oldVal,index,orignItem){
				this.uinfo.orgName = newVal;
			},
			confirm(e) {
				this.selectedTime = e.fulldate;
		    },
			open(type){
				if(type == 1){
					this.$refs.calendar.open();
				}else{
					this.$refs.calendar2.open();
				}
			},
			 
			 
			submit(){
				
				if(this.resourceNum == null){
					alertTip("请输入物资数量");
					return;
				}
				if(this.resourceNum <= 0 ){
					alertTip("物资数量必须大于0");
					return;
				}
				var reg = new RegExp("^[0-9]*$");
				if (reg.test(this.resourceNum) === false ) {
					alertTip("物资数量请输入整数");
					return;
				}
				// var data ={
					
				// }
				// console.log("console.log(submitFlag)");
				// this.submitFlag=false;
				// callbackRequest(params)
				// .then(res =>{
				// 	if (res.data.returnCode == 1){
				// 		alertTip(res.data.returnMsg);
						
				// 		//刷新列表
						 
				// 		setTimeout(_ => {
				// 			this.currentTabIndex = 3;
				// 		}, 2000)
				// 		this.submitFlag = true;
				// 	} else {
				// 		alertTip(res.data.returnMsg);
				// 		this.submitFlag = true;
				// 	}
					
				// })
			},
		 
		 
		},
		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: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>
