<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="visitorName" labelWidth="100" borderBottom>
						<u--input v-model="callerInfo.visitorName" border="none" placeholder="请输入访客姓名"></u--input>
					</u-form-item>
					<u-form-item label="访客身份证" prop="visitorIdCard" borderBottom labelWidth="100">
						<u--input v-model="callerInfo.visitorIdCard" border="none" placeholder="请输入访客身份证"></u--input>
					</u-form-item>
					<u-form-item label="访客联系方式" prop="visitorPhone" borderBottom labelWidth="100">
						<u--input v-model="callerInfo.visitorPhone" border="none" placeholder="请输入访客联系方式"></u--input>
					</u-form-item>
					<u-form-item label="访客目的" prop="visitReason" borderBottom labelWidth="100">
						<u-button   class="arrow-right-icon"   @click="show=true">{{callerInfo.visitReason || '请选择访客目的'}}
						<u-icon name="arrow-right" ></u-icon>
						</u-button>
					</u-form-item>
					<u-form-item label="访客楼栋" prop="visitPosition" borderBottom labelWidth="100">
						<u-button  class="arrow-right-icon"  @click="buildingShow=true">{{callerInfo.visitPosition || '请选择访客楼栋'}}
						<u-icon name="arrow-right" ></u-icon>
						</u-button>
					</u-form-item>
					<u-form-item label="访客时间" prop="inTime" borderBottom labelWidth="100">
						<u-button  @click="isTimeShow=true" >
							<view style="font-size: 24rpx;">{{`开始时间:${callerInfo.inTime}`}}</view>
							<view style="font-size: 24rpx;">{{`结束时间:${callerInfo.outTime}`}}</view>
						</u-button>
					</u-form-item>
					<u-form-item label="申请者工号" prop="staffCode" borderBottom labelWidth="100">
						<u--input v-model="callerInfo.staffCode" border="none" placeholder="请输入申请者工号"></u--input>
					</u-form-item>
					<u-form-item label="申请者名字"  borderBottom labelWidth="100">
						<u--input v-model="callerInfo.staffName" border="none" placeholder="请输入申请者姓名"></u--input>
					</u-form-item>
					<u-form-item label="备注"  borderBottom labelWidth="100">
						<u--input v-model="callerInfo.remarks" 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.outTime"
					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>
	import {getSubmit} from '@/api/information.js'
	export default {
	data(){
		return{
			callerInfo: {
			visitorName: '',
			visitorIdCard: '',
			visitorPhone: '',
			visitReason: '',
			visitPosition: '',
			inTime: Number(new Date()),
			staffCode: '',
			staffName: '',
			remarks: '',
			outTime:Number(new Date()) 
		},
		minTime:Number(new Date()),
		rules:{
			visitorName:[{
						required: true,
						message: '请填写访客姓名',
						trigger: ['blur', 'change'],
					}],
					visitorIdCard:[{
						required: true,
						message: '请填写访客身份证',
						trigger: ['blur', 'change'],
					}],
					visitorPhone:[{
						required: true,
						message: '请填写访客联系方式',
						trigger: ['blur', 'change'],
					}],
					staffCode:[{
						required: true,
						message: '请填写申请者工号',
						trigger: ['blur', 'change'],
					}]
		},
		show:false,
		isForm:true,
		isTimeShow:false,
		buildingShow:false,
		columns:[['商务会议','安装维修','其他事宜']],
		buildingColumns:[['一期主楼','二期主楼','录制楼','1600演播厅']]
		}
	},
	onLoad(){
		this.callerInfo.inTime = this.shijianc(this.callerInfo.inTime)
		this.callerInfo.outTime = this.shijianc(this.callerInfo.outTime)
	},
	methods:{
		change(e){
			console.log(e,'111')
		},
		//点击提交访客记录
		async submit(){
			console.log(this.callerInfo)

			if(this.isForm){
				const res = await getSubmit(this.callerInfo)
				console.log(res)
				this.isForm = false
			}else {
				wx.switchTab({
					url: `/pages/index/index`,  
				});
				this.isForm = true
			}
		},
		//确定选择时间
	   async confirmTime(e){
		this.callerInfo.outTime = 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){
		  console.log(val)
		  this.callerInfo.visitReason = val.value[0]
		  this.show = false
	  },
	  //获取访问楼栋
	  getBuilding(val){
		  this.callerInfo.visitPosition = 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>