<!-- 访客信息提交页面 -->
<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="isinTimeShow=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" disabled border="none" placeholder="请输入申请者工号"></u--input>
				</u-form-item>
				<u-form-item label="申请者名字" borderBottom labelWidth="100">
					<u--input v-model="callerInfo.staffName" disabled border="none" placeholder="请输入申请者姓名"></u--input>
				</u-form-item>
				<u-form-item label="申请者手机号" borderBottom labelWidth="100">
					<u--input v-model="callerInfo.phone" disabled 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" @cancel="show=false" @confirm="getPurpose"></u-picker>
			<!-- 访问楼栋 -->
			<u-picker :show="buildingShow" :columns="buildingColumns" @cancel="buildingShow=false"
				@confirm="getBuilding">
			</u-picker>
			<!-- 选择开始时间 -->
			<u-datetime-picker 
				:show="isinTimeShow" 
				v-model="callerInfo.inTime" 
				mode="datetime" 
				title="请选择开始时间"
				:formatter="formatter" 
				:minDate="inTimeMinDate"
				:maxDate="inTimeMaxDate"
				@cancel="isinTimeShow=false" 
				@change="change" 
				@confirm="closeinTime">
			</u-datetime-picker>
			<!-- 选择结束时间 -->
			<u-datetime-picker 
				:show="isTimeShow" 
				v-model="callerInfo.outTime" 
				mode="datetime" 
				title="请选择结束时间"
				:minDate="outTimeMinDate"
				:maxDate="outTimeMaxDate"
				:formatter="formatter" 
				@cancel="closeTime" 
				@change="change" 
				@confirm="confirmTime">
			</u-datetime-picker>
		</view>
		<view style="margin-top: 42rpx;">
			<u-button type="error" v-if="isForm" @click="submit"> 提交</u-button>
			<u-button type="error" v-else @click="switchTabClick">完成</u-button>
		</view>
	</view>
</template>

<script>
	import { getSubmit , getDictCode, getResourceType} from '@/api/information.js'
	import { subscription } from "@/utils/common.js"
	import { toHandlerKey } from "vue";
	export default {
		data() {
			return {
				callerInfo: {
					visitorName: '',
					visitorIdCard: '',
					visitorPhone: '',
					visitReason: '',
					visitPosition: '',
					inTime: new Date(new Date().toLocaleDateString()).getTime()+86400000, //开始时间
					staffCode: '',
					staffName: '',
					remarks: '',
					phone: '', // 申请者手机号
					outTime: new Date(new Date().toLocaleDateString()).getTime()+86400000 //结束时间
				},
				rules: {
					visitorName: [{
						required: true,
						message: '请填写访问姓名',
						trigger: ['blur', 'change'],
					}],
					visitorIdCard: [{
						required: true,
						message: '请填写访问身份证',
						trigger: ['blur', 'change'],
					},
					{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							return uni.$u.test.idCard(value);
						},
						message: '身份证号不正确',
						// 触发器可以同时用blur和change
						trigger: ['change','blur'],
					}
					],
					visitorPhone: [
						{
							required: true, 
							message: '请输入手机号',
							trigger: ['change','blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					],
					staffCode: [{
						required: true,
						message: '请填写申请者工号',
						trigger: ['blur', 'change'],
					}]
				},
				show: false,
				isForm: true,
				submitButton:true,
				isTimeShow: false,
				buildingShow: false,
				isinTimeShow: false,
				columns: [],
				buildingColumns: [],
				//开始时间最小时间-明天0点的时间戳
				inTimeMinDate: new Date(new Date().toLocaleDateString()).getTime()+86400000,
				//开始时间最大时间（一周之内）
				inTimeMaxDate: new Date(new Date().toLocaleDateString()).getTime()+86400000 + 24 * 60 * 60 * 1000 * 7 - 1,
				//结束时间最小时间（明天0点）
				outTimeMinDate: new Date(new Date().toLocaleDateString()).getTime()+86400000,
				//结束时间最大时间-默认一周之内
				outTimeMaxDate: new Date(new Date().toLocaleDateString()).getTime()+86400000 + 24 * 60 * 60 * 1000 * 7 - 1,
			}
		},
		watch: {
			//开始时间和结束时间要求是同一天
			"callerInfo.inTime"(value) {
				//苹果手机不兼容2020-20-20这样的时间，只兼容2020/20/20
				const newValue = value.replace(/-/g,"/")
				this.outTimeMinDate = new Date(newValue).getTime() //结束时间的最小时间是选择的开始时间
				this.outTimeMaxDate = new Date(new Date(newValue).toLocaleDateString()).getTime() + 24 * 60 * 60 * 1000 - 1
			},
		},
		onLoad() {
			this.callerInfo.inTime = this.shijianc(this.callerInfo.inTime)
			this.callerInfo.outTime = this.shijianc(this.callerInfo.outTime)
			const userInfo = JSON.parse(uni.getStorageSync('userInfo'));
			this.callerInfo.staffCode = userInfo.account
			this.callerInfo.staffName = userInfo.name
			this.callerInfo.phone = userInfo.phone
			this.getDictMap()
		},
		mounted() {
			this.$refs.form1.setRules(this.rules)
		},
		methods: {
		  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)
			},
			change(e) {},
			//点击提交访客记录
			async submit() {
				if (this.callerInfo.visitorName.trim() == '' || this.callerInfo.visitorIdCard.trim() == '' || this.callerInfo
					.visitorPhone.trim() == '' || this.callerInfo.visitReason.trim() == '' || this.callerInfo.visitPosition.trim() == '' || this.callerInfo.staffCode.trim() == ''){
						return uni.showToast({
							title: `请将提交信息填写完整`,
							icon: 'none',
							duration: 2000,
						})
					}else if(this.callerInfo.inTime >= this.callerInfo.outTime){
						return uni.showToast({
							title: `结束时间必须得大于开始时间`,
							icon: 'none',
							duration: 2000,
						})
					}
					if (this.isForm && this.submitButton) {
						this.submitButton = false
						wx.showLoading({
							title: '提交中'
						})
						let res = await getSubmit(this.callerInfo)
						wx.hideLoading()
						this.isForm = false
						this.submitButton = true
					} 
					
					if (uni.getStorageSync("userInfo")) {
					  const userInfo = JSON.parse(uni.getStorageSync("userInfo"));
					  if (userInfo.salt !== "物业人员" && userInfo.salt !== '运维人员') {
					    subscription();
					  } else {
							console.log('不提醒订阅')
						}
					}
			},
			// 点击完成
			switchTabClick() {
				wx.switchTab({
					url: `/pages/index/index`,
				});
				this.isForm = true
			},
			//确定选择结束时间
			async confirmTime(e) {
				this.callerInfo.outTime = await this.shijianc(e.value)
				this.isTimeShow = false
			},
			// 确定选择开始时间
			async closeinTime(e) {
			   this.callerInfo.inTime = await this.shijianc(e.value)
			   this.isinTimeShow = false
			   this.isTimeShow = true
			},
			//取消选择时间
			closeTime() {
				this.isinTimeShow = false
				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.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: 40rpx 32rpx;
			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>