<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)
			const userInfo = JSON.parse(uni.getStorageSync('userInfo'));
			this.callerInfo.staffCode = userInfo.account
			this.callerInfo.staffName = userInfo.name
		},
		methods: {
			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
					}
			},
			//确定选择时间
			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) {
				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>