<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.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="isinTimeShow" v-model="callerInfo.inTime" mode="datetime" title="请选择开始时间"
				:formatter="formatter" :minDate="minTime" @cancel="isinTimeShow=false" @change="change" @confirm="closeinTime">
			</u-datetime-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 , getDictCode, getResourceType} from '@/api/information.js'
	import { subscription } from "@/utils/common.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'],
					},
					{
						// 自定义验证函数，见上说明
						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,
				isTimeShow: false,
				buildingShow: false,
				isinTimeShow: false,
				columns: [],
				buildingColumns: []
			}
		},
		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.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) {
						let res = await getSubmit(this.callerInfo)
						res === '' ? this.isForm = false : this.isForm = true
					} else {
						wx.switchTab({
							url: `/pages/index/index`,
						});
						this.isForm = true
					}
					
					if (uni.getStorageSync("userInfo")) {
					  const userInfo = JSON.parse(uni.getStorageSync("userInfo"));
					  if (userInfo.salt !== "物业人员") {
					    subscription();
					  } else {
							console.log('不提醒订阅')
						}
					}
			},
			//确定选择结束时间
			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: 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>