<template>
	<view class="container">	
		<view class="main">
			<!-- 预约表单 -->
			<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>
					</view>
					<!-- <view class="form-item">
						<text class="label">本月余量</text>
						<view class="ipt-box">
							<input type="text" placeholder="10">
						</view>
					</view> -->
					<view class="form-item">
						<text class="label">餐券领取</text>
						<view class="ipt-box">
							<input type="text"  placeholder="午餐券">
						</view>
					</view>
					<view class="form-item">
						<text class="label">餐券数量</text>
						<view class="ipt-box">
							<input type="text"  placeholder="请填写餐券数量">
						</view>
					</view>
					<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 class="picker" mode="date" :start="date" @change="bindDateChange">
								<view class="">{{date}}</view>
							</picker>
							<!-- <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">
							<image class="arrow" src="/static/icons/right-arrow.png" mode=""></image>
							<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="请填写访客姓名">
						</view>
					</view>
					<view class="form-item">
						<text class="label">来访者单位</text>
						<view class="ipt-box">
							<input type="text"  placeholder="请填写访客单位">
						</view>
					</view>
					
					<view class="form-item">
						<text class="label">申请事由</text>
						<view class="ipt-box">
							<input type="text" placeholder="请填写申请事由">
						</view>
					</view>
				</view>
				<view class="occupied"></view>
				<view class="footer-btn footer-btn-color" @click="submit()">
					<view class="btn">确认申请</view>
				</view>
			</view>
		</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: ['010', '银座'],
				departmentIndex: 0, //选择的地点下标
				button_text:"提交预约",
				number:0,
				role:2,//管理员
				list:[],
				list2:[],
				visitPlace:"0",
				visitedPersonName:getStorage('userInfo').username,
				visitedPersonTel:getStorage('userInfo').telnumber,
				date:"",
				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();
				}
			}
		},
		methods: {
			bindDateChange: function(e) {
				this.date = e.target.value
			},
			chooseDate(e) {
				this.date = e.time;
			},
			change(type, e) {
				this.index = e.detail.value;
			},
			// chooseDate(e){
			// 	if(e.pickerIndex == 1){
			// 		this.visitStartTime = e.time;
			// 	}else {
			// 		this.visitEndTime = e.time;
			// 	}
			// },
			changeDepartment(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();
				}
			},
			submit(){
				
			}
		}
	}
</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:40upx 20upx 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%;
						}
					}
					.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>
