<!-- 申请者访客信息提交模板页面 -->
<template>
	<view class="submit-info">
		<view class="form"> 
			<u--form labelPosition="left" :model="form" :rules="rules" ref="formRef">
				<u-form-item label="申请单号" prop="staffCode" borderBottom labelWidth="100">
					<!-- <u--input v-model="form.applyNo" disabled border="none" ></u--input> -->
					{{form.applyNo}}
				</u-form-item>
				<u-form-item label="申请状态" borderBottom labelWidth="100">
					<!-- <u--input v-model="form.status" disabled border="none" ></u--input> -->
					{{form.status}}
				</u-form-item>
				<u-form-item label="申请者工号" prop="staffCode" borderBottom labelWidth="100">
					<!-- <u--input v-model="form.staffCode" disabled border="none" placeholder="请输入申请者工号"></u--input> -->
					{{form.staffCode}}
				</u-form-item>
				<u-form-item label="申请者名字" borderBottom labelWidth="100">
					<!-- <u--input v-model="form.staffName" disabled border="none" placeholder="请输入申请者姓名"></u--input> -->
					{{form.staffName}}
				</u-form-item>
				<u-form-item label="申请者手机号" borderBottom labelWidth="100">
					<!-- <u--input v-model="form.staffPhone" disabled border="none" placeholder="请输入申请者姓名"></u--input> -->
					{{form.staffPhone}}
				</u-form-item>
				<u-form-item label="访客姓名" prop="visitorName" labelWidth="100" borderBottom>
					<!-- <u--input v-model="form.visitorName" disabled border="none" placeholder="请输入访问姓名"></u--input> -->
					{{form.visitorName}}
				</u-form-item>
				<u-form-item label="访客身份证" prop="visitorIdCard" borderBottom labelWidth="100">
					<!-- <u--input v-model="form.visitorIdCard" disabled border="none" placeholder="请输入访问身份证"></u--input> -->
					{{form.visitorIdCard}}
				</u-form-item>
				<u-form-item label="访客联系方式" prop="visitorPhone" borderBottom labelWidth="100">
					<u--input v-model="form.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">{{form.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">
						{{form.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="isStartTimeShow=true">
						<view style="font-size: 24rpx;">{{`开始时间:${form.inTime}`}}</view>
						<view style="font-size: 24rpx;">{{`结束时间:${form.outTime}`}}</view>
					</u-button>
				</u-form-item>
				
				<u-form-item label="备注" borderBottom labelWidth="100">
					<u--input v-model="form.remarks" border="none" placeholder="请输入备注"></u--input>
				</u-form-item>
			</u--form>
		</view>
		<u-picker :show="show" :columns="columns" @cancel="show=false" @confirm="getPurpose"></u-picker>
		<u-picker :show="buildingShow" :columns="buildingColumns" @cancel="buildingShow=false"
			@confirm="getBuilding">
		</u-picker>
		<!-- 选择开始时间 -->
		<u-datetime-picker 
			:show="isStartTimeShow" 
			v-model="form.inTime" 
			mode="datetime" 
			title="请选择开始时间"
			:formatter="formatter" 
			:minDate="startTimeMinDate"
			:maxDate="startTimeMaxDate"
			@cancel="isStartTimeShow=false" 
			@change="change" 
			@confirm="closestartTime">
		</u-datetime-picker>
		<!-- 选择结束时间 -->
		<u-datetime-picker 
			:show="isEndTimeShow" 
			v-model="form.outTime" 
			mode="datetime" 
			title="请选择结束时间"
			:minDate="endTimeMinDate"
			:maxDate="endTimeMaxDate"
			:formatter="formatter" 
			@cancel="closeTime" 
			@change="change" 
			@confirm="confirmTime">
		</u-datetime-picker>
		
		<view style="display: flex;justify-content: space-around;margin-top: 32px;">
			<u-button customStyle="border: none;background-color: #9c9d9d;color: #fff;font-weight: 600;width: 200rpx;font-size:16px;" type="info" @click="cancle">取消</u-button>
			<u-button customStyle="border: none;background-color:#f56c6c;color: #fff;font-weight: 600;width: 200rpx;font-size:16px;" type="primary" @click="submit">提交</u-button>
		</view>
	</view>
</template>

<script>
	import { getSubmit , getDictCode, getResourceType} from '@/api/information.js'
	export default {
		data() {
			return {
				rules: {
					//验证身份证号
					visitorIdCard: [
						{
							required: true,
							message: '请填写访问身份证',
							trigger: ['blur', 'change'],
						},{
							validator: (rule, value, callback) => {
								return uni.$u.test.idCard(value);
							},
							message: '身份证号不正确',
							trigger: ['change','blur'],
						}
					],
					//验证手机号
					visitorPhone: [
						{
							required: true, 
							message: '请输入手机号',
							trigger: ['change','blur'],
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change','blur'],
						}
					],
				},
				form: {
					applyNo: '系统自动生成', //申请单号
					visitorName: '',
					visitorIdCard: '',
					visitorPhone: '',
					visitReason: '', //访问目的
					visitPosition: '', //访问楼栋
					inTime: Number(new Date()), //开始时间
					outTime: Number(new Date()), //结束时间
					staffCode: '',
					staffName: '',
					remarks: '',
					staffPhone: '', // 申请者手机号
					status: '', //申请状态
				},
				show: false, //访问目的筛选框显隐
				buildingShow: false, //访问楼体筛选框显隐
				isStartTimeShow: false, //开始时间显隐
				isEndTimeShow: false, //结束时间显隐
				columns: [], //访问目的筛选列表
				buildingColumns: [], //访问楼体筛选列表
				//开始时间最小时间-当前时间
				startTimeMinDate: new Date(new Date()).getTime(),
				//开始时间最大时间（一周之内）
				startTimeMaxDate: new Date(new Date().toLocaleDateString()).getTime()+ 24 * 60 * 60 * 1000 * 7 - 1,
				//结束时间最小时间（当前时间）
				endTimeMinDate: new Date(new Date()).getTime(),
				//结束时间最大时间-默认一周之内
				endTimeMaxDate: new Date(new Date().toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 * 7 - 1,
			}
		},
		mounted() {
			this.$refs.formRef.setRules(this.rules)
		},
		onLoad(options) {
			const getFormData = JSON.parse(decodeURIComponent(options.form))
			this.form.inTime = getFormData.inTime //开始时间
			this.form.outTime = getFormData.outTime //结束时间
			this.form.visitorName = getFormData.visitorName //访客姓名
			this.form.visitorIdCard = getFormData.visitorIdCard //访客身份证
			this.form.visitorPhone = getFormData.visitorPhone
			this.form.visitReason = getFormData.visitReason //访问目的
			this.form.visitPosition = getFormData.visitPosition //访问楼栋
			this.form.staffCode = getFormData.staffCode //申请者工号
			this.form.staffName = getFormData.staffName //申请者姓名
			this.form.remarks = getFormData.remarks //备注
			this.form.staffPhone = getFormData.staffPhone || '' // 申请者手机号
			this.getDictMap()
		},
		watch: {
			//开始时间和结束时间要求是同一天
			"form.inTime"(newValue) {
				this.endTimeMinDate = new Date(newValue).getTime() //结束时间的最小时间是选择的开始时间
				this.endTimeMaxDate = new Date(new Date(newValue).toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1
			},
		},
		methods: {
			//点击提交
			async submit() {
				if (this.form.visitorPhone.trim() == '' ){
					return wx.showToast({
						title: `请将提交信息填写完整`,
						icon: 'none',
						duration: 2000,
					})
				}
				if(new Date(this.form.inTime).getTime() < new Date().getTime()) {
					return wx.showToast({
						title: '访客时间应大于当前时间',
						icon: 'none'
					})
				}
				wx.showLoading({
					title: '提交中'
				})
				const res = await getSubmit(this.form)
				wx.hideLoading()
				wx.showToast({
					title: `提交成功`,
					icon: 'sucess',
					duration: 2000,
				})
				wx.switchTab({
					url: '/pages/list/list'
				})
			},
			//点击取消
			cancle() {
				wx.navigateBack()
			},
			//获取访问目的和楼栋字典
			async	getDictMap() {
			  const res = await getDictCode()
			  this.columns[0] = res.map(item=>item.name)
			  const ResourceList = await getResourceType()
			  this.buildingColumns[0] = ResourceList.map(item=>item.name)
			},
			//选好访问目的
			getPurpose(val) {
				this.form.visitReason = val.value[0]
				this.show = false
			},
			//选好访问楼栋
			getBuilding(val) {
				this.form.visitPosition = val.value[0]
				this.buildingShow = false
			},
			//确定选择结束时间
			async confirmTime(e) {
				this.form.outTime = await this.shijianc(e.value)
				this.isEndTimeShow = false
			},
			// 确定选择开始时间
			async closestartTime(e) {
			   this.form.inTime = await this.shijianc(e.value)
			   this.isStartTimeShow = false
			   this.isEndTimeShow = true
			},
			//取消选择时间
			closeTime() {
				this.isStartTimeShow = false
				this.isEndTimeShow = 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
			},
		}
	}
</script>

<style lang="scss" scoped>
	.submit-info {
		padding: 22rpx;
	
		.form {
			padding: 40rpx 32rpx;
			border-radius: 10rpx;
			background-color: #fff;
		}
	}
</style>
<style lang="scss">
	.submit-info {
		.u-form-item__body__right__content__slot {
			text-align: right;
			color: #999;
		}
		.uicon-arrow-right {
			position: absolute !important;
			right: 10rpx;
			bottom: 0;
		}
		.u-input__content__field-wrapper__field {
			text-align: right !important;
		}
		.u-form-item__body__right__message {
			text-align: right !important;
		}
		.u-form-item__body__left__content__label {
			font-weight: 600;
		}
	}
</style>