<template>
	<view class="information">
		<view class="form">
			<u--form labelPosition="left" :model="callerInfo" :rules="rules"  ref="form1" v-if="isForm" >
					<u-form-item label="访客姓名" prop="callerNmae" labelWidth="100" borderBottom>
						<u--input v-model="callerInfo.callerNmae" border="none" placeholder="请输入访客姓名"></u--input>
					</u-form-item>
					<u-form-item label="访客身份证" prop="id" borderBottom labelWidth="100">
						<u--input v-model="callerInfo.id" border="none" placeholder="请输入访客身份证"></u--input>
					</u-form-item>
					<u-form-item label="访客联系方式" prop="contact" borderBottom labelWidth="100">
						<u--input v-model="callerInfo.contact" border="none" placeholder="请输入访客联系方式"></u--input>
					</u-form-item>
					<u-form-item label="访客目的" prop="purpose" borderBottom labelWidth="100">
						<u-button v-model="callerInfo.purpose"  class="arrow-right-icon"   @click="show=true">{{callerInfo.purpose || '请选择访客目的'}}
						<u-icon name="arrow-right" ></u-icon>
						</u-button>
					</u-form-item>
					<u-form-item label="访客楼栋" prop="building" borderBottom labelWidth="100">
						<u-button v-model="callerInfo.building" class="arrow-right-icon"  @click="buildingShow=true">{{callerInfo.building || '请选择访客楼栋'}}
						<u-icon name="arrow-right" ></u-icon>
						</u-button>
					</u-form-item>
					<u-form-item label="访客时间" prop="time" borderBottom labelWidth="100">
						<u-button  @click="isTimeShow=true" >
							<view style="font-size: 24rpx;">{{`开始时间:${callerInfo.time}`}}</view>
							<view style="font-size: 24rpx;">{{`结束时间:${callerInfo.endTime}`}}</view>
						</u-button>
					</u-form-item>
					<u-form-item label="申请者工号" prop="number" borderBottom labelWidth="100">
						<u--input v-model="callerInfo.number" border="none" placeholder="请输入申请者工号"></u--input>
					</u-form-item>
					<u-form-item label="申请者名字"  borderBottom labelWidth="100">
						<u--input v-model="callerInfo.name" border="none" placeholder="请输入申请者姓名"></u--input>
					</u-form-item>
					<u-form-item label="备注"  borderBottom labelWidth="100">
						<u--input v-model="callerInfo.bz" border="none" placeholder="请输入备注"></u--input>
					</u-form-item>
				</u--form>
				<view v-else class="informationSubmit">
					<view class="informationSubmit-box">
						<u-icon name="checkbox-mark" color="#fff" size="72"></u-icon>
					</view>
					<view class="informationSubmit-text">
					 信息提交成功，请等待物业管理员处理。
					</view>
				</view>
				<u-picker :show="show" :columns="columns" @close="show=false" @confirm="getPurpose"></u-picker>
				<u-picker :show="buildingShow" :columns="buildingColumns" @close="buildingShow=false" @confirm="getBuilding">
				</u-picker>
				<u-datetime-picker
					:show="isTimeShow"
					v-model="callerInfo.endTime"
					mode="datetime"
					title="请选择结束时间"
					:formatter="formatter"
					:minDate="minTime"
					@cancel="closeTime"
					@change="change"
					@confirm="confirmTime"
			></u-datetime-picker>
				
		</view>
		<view style="margin-top: 42rpx;">
			<u-button type="error" @click="submit" >{{isForm ? '提交' : '完成'}}</u-button>
		</view>
	</view>
</template>

<script>
	export default {
	data(){
		return{
			callerInfo: {
			callerNmae: '',
			id: '',
			contact: '',
			purpose: '',
			building: '',
			time: Number(new Date()),
			number: '',
			name: '',
			bz: '',
			endTime:Number(new Date()) 
		},
		minTime:Number(new Date()),
		rules:{
			callerNmae:[{
						required: true,
						message: '请填写访客姓名',
						trigger: ['blur', 'change'],
					}],
					id:[{
						required: true,
						message: '请填写访客身份证',
						trigger: ['blur', 'change'],
					}],
					contact:[{
						required: true,
						message: '请填写访客联系方式',
						trigger: ['blur', 'change'],
					}],
					number:[{
						required: true,
						message: '请填写申请者工号',
						trigger: ['blur', 'change'],
					}]
		},
		show:false,
		isForm:true,
		isTimeShow:false,
		buildingShow:false,
		columns:[['商务会议','安装维修','其他事宜']],
		buildingColumns:[['一期主楼','二期主楼','录制楼','1600演播厅']]
		}
	},
	onLoad(){
		this.callerInfo.time = this.shijianc(this.callerInfo.time)
		this.callerInfo.endTime = this.shijianc(this.callerInfo.endTime)
	},
	methods:{
		change(e){
			console.log(e,'111')
		},
		//点击提交访客记录
		 submit(){
			console.log(this.callerInfo)
			if(this.isForm){
				this.isForm = false
			}else {
				wx.switchTab({
					url: `/pages/index/index`,  
				});
				this.isForm = true
			}
		},
		//确定选择时间
	   async confirmTime(e){
		this.callerInfo.endTime = await this.shijianc(e.value)
		this.isTimeShow = false
		},
		//取消选择时间
		closeTime(){
			this.isTimeShow = false
		},
		 shijianc(time) {
		      let date = new Date(time)
		      let Y = date.getFullYear() + '-'
		      let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
		      let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
		      let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
		      let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
		      let s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
		      return Y + M + D + h + m + s
		    },
		//格式化时间
		formatter(type, value) {
			if (type === 'year') {
				return `${value}年`
			}
			if (type === 'month') {
				return `${value}月`
			}
			if (type === 'day') {
				return `${value}日`
			}
			return value
		},
		//获取访问目的
		  getPurpose(val){
		  this.callerInfo.purpose = val.value[0]
		  this.show = false
	  },
	  //获取访问楼栋
	  getBuilding(val){
		  this.callerInfo.building = val.value[0]
		  this.buildingShow = false
	  }
	},
	}
</script>

<style scoped lang="scss">
	.information{
		padding: 22rpx;
		.form{
			padding: 0 32rpx 0;
			border-radius: 10rpx;
			background-color: #fff;	
		}
	}
	.informationSubmit{
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 680rpx;
		.informationSubmit-box{
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 150rpx;
			width: 300rpx;
			height: 300rpx;
			background-color: #0ade13;
		}
		.informationSubmit-text{
			position: absolute;
			top: 42%;
		}
	}
	/deep/.uicon-arrow-right{
		position: absolute !important;
		right: 10rpx;
		bottom: 0;
	}
</style>