<template>
	<view class="registerDriver content_box">
		<u-toast ref="uToast" />
		<!-- 注册内容 -->
		<u--form :model="formData" :rules="rules" ref="myForm" errorType='none'>
			<view class="basicInfo">
				<u-form-item label="拜访人" prop="driverName" required labelWidth="25%" borderBottom>
					<u-input placeholder="请输入姓名" v-model="formData.driverName"  placeholder-class="placeholder" border="none" fontSize="28rpx" color="#434343"/>
				</u-form-item>

				<u-form-item label="联系方式" prop="driverPhone" required  labelWidth="25%" borderBottom>
					<u-input placeholder="请输入联系方式" v-model="formData.driverPhone" placeholder-class="placeholder" border="none" fontSize="28rpx" color="#434343"/>
				</u-form-item>

				<u-form-item label="车牌号" prop="truckNo" required  labelWidth="25%">
					<u-input placeholder="请输入车牌号" v-model="formData.truckNo" placeholder-class="placeholder" border="none" fontSize="28rpx" color="#434343"/>
				</u-form-item>
			</view>

			<view class="module-title flex"></view>

			<view class="driverLicense">
				<u-form-item prop="address" label="拜访地点" required labelWidth="25%" borderBottom @click="goToSelectAddress">
					<view>
						<u-input v-model="formData.addressName" border="none" readonly placeholder="请选择拜访地点" placeholder-class="placeholder" fontSize="28rpx" color="#434343"/>
					</view>
					<u-icon slot="right" name="arrow-right"/>
				</u-form-item>
				<u-form-item prop="bookingTime" label="拜访时间" required labelWidth="25%" @click="onVisibleDate">
					<view>
						<u-input border="none" readonly placeholder="请选择拜访时间" :value="convertTime(formData.bookingTime)" placeholder-class="placeholder" fontSize="28rpx" color="#434343"/>
					</view>
					<u-icon slot="right" name="arrow-right"/>
				</u-form-item>
			</view>

			<view class="module-title flex">
			</view>

			<view class="driverJobCertificate">
				<u-form-item label="被访部门" prop="visitedDepartment" @click="goToVisitDepartment" required labelWidth="25%" borderBottom >
					<view>
						<u-input v-model="formData.visitedDepartment" border="none" readonly placeholder="请选择被访部门" placeholder-class="placeholder" fontSize="28rpx" color="#434343"/>
					</view>
					<u-icon slot="right" name="arrow-right" index="driverLicense.effectiveDate" />
				</u-form-item>
				<u-form-item prop="name" label="被访人" labelWidth="25%" borderBottom>
					<u-input border="none" placeholder="请输入被访人" v-model="formData.visitedStaff" placeholder-class="placeholder" fontSize="28rpx" color="#434343"/>
				</u-form-item>
				<u-form-item prop="name" label="被访人联系方式" labelWidth="25%">
					<u-input border="none" placeholder="请输入被访人联系方式" v-model="formData.visitedTel"  placeholder-class="placeholder" fontSize="28rpx" color="#434343"/>
				</u-form-item>
			</view>
			<view class="module-title flex">
			</view>
			<view class="driverJobCertificate" style="padding-bottom: 24rpx;">
				<u-form-item prop="name" label="备注" labelWidth="25%" ></u-form-item>
				<u--textarea  placeholder="请输入备注……" v-model="formData.remarks" :maxlength="200"  :height="160" border="none" count :placeholderStyle="{'fontSize':'28rpx','color':'#BFBFBF'}"></u--textarea>
			</view>
		</u--form>
		
		
		<!-- 底部按钮 -->
		<view class="footer-btns flex">
			<button class="info-btn size-small" @click="onNavBack">返回</button>
			<button class="primary-btn  size-small" @click="onSubmitForm">提交</button>
		</view>

		<!-- 类型选择动作面板 -->
		<bs-datetimePicker ref="myTimePicker" :visible="showPopup" @onVisible="onVisibleDate" @onSelsectDate="onSelsectDate" />
	</view>
</template>

<script>
	import {
		addVisitOrder
	} from '../../api/apiList'
	import {
		formatTime
	} from '../../utils/util.js'
	export default {
		options: {
			styleIsolation: 'shared'
		},
		data() {
			return {
				formData: {
					visitedDepartment:"", //被访问部门
					visitedStaff:"", //被访问人
					visitedTel:"", //被访问人手机号
					bookingTime:"", //预约时间
					remarks:"", //备注
					auditRemarks:"", //审核备注
					truckNo:"", //车牌号
					driverName:"",
					driverPhone:"",
					addressName:"",
					addressId:""
				},
				rules: {
					'driverName': {
						required: true
					},
					'truckNo': {
						required: true
					},
					'address': {
						required: true
					},
					'bookingTime': {
						required: true
					},
					'visitedDepartment': {
						required: true
					},
				},

				visibleKey: '', //当前显示字段的key
				optionEnums: [], //候选项枚举
				genderViewEnums: [], //性别枚举
				viewEnums: [], //视图枚举
				visible: false, //类型选择
				showPopup:false,
			}
		},
		onLoad(options) {
			uni.$on("selectedDepart",this.getDepart)
			uni.$on("selectedAddress",this.getAddress)
		},
		onUnLoad() {
			uni.$off("selectedDepart")
			uni.$off("selectedAddress")
		},
		methods: {
			getDepart(data){
				let {id,name} = data
				this.formData.visitedDepartment = name
			},

			getAddress(data){
				let {id,name} = data
				this.formData.addressName = name
				this.formData.address = id
			},

			//返回上一级页面
			onNavBack() {
				uni.navigateBack()
			},
			
			// 提交表单数据
			onSubmitForm() {
				this.$refs.myForm.validate().then(res => {
					let header = {...this.formData}
					header.bookingTime = formatTime(new Date(header.bookingTime))
					header['address.name'] = header.addressName
					header.status = '100.Auditing'
					let reqData = {
						"aux": {
							header
						}
					}
					addVisitOrder(reqData).then(res => {
						if (res.data.messageType === 'success') {
							uni.showToast({
								title: '新增成功',
								duration: 3000
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 1500)
						}
					})
				}).catch(errors => {
					console.log(errors)
					this.$refs.uToast.show({
						message: "请完善必填信息",
					})
				})
			},

			goToVisitDepartment(){
				uni.navigateTo({
					url:'/subpkg/visitDepartment/visitDepartment'
				})
			},

			goToSelectAddress(){
				uni.navigateTo({
					url:'/subpkg/visitAddressSelect/visitAddressSelect'
				})
			},
			convertTime(timestamp) {
				if (!timestamp) return
				const nowDate = new Date(timestamp)
				var year = nowDate.getFullYear();
				var month = nowDate.getMonth() + 1;
				var date = nowDate.getDate();

				return `${year}-${ month}-${date}`
			},
			// 时间选择
			onSelsectDate(dateInfo) {
				const {
					timestamp
				} = dateInfo
				console.log(dateInfo)
				this.formData.bookingTime = timestamp
				this.showPopup = false
			},

			//关闭时间选择框
			onVisibleDate() {
				this.showPopup = !this.showPopup
			},
		}
	}
</script>

<style lang="scss">
	.registerDriver {
		padding-bottom: 144rpx;
		.module-title {
			padding: 32rpx 32rpx 16rpx;

			.vertical-separate {
				height: 40rpx;
				border-left: 7rpx solid #797979;
				margin-right: 20rpx;
			}
		}

		/deep/.basicInfo,
		/deep/.driverLicense,
		/deep/.driverJobCertificate {
			padding: 0 40rpx;
			background-color: #ffffff;

			.input-tip {
				font-size: 28rpx;
				color: #BFBFBF;
			}

			.u-form-item__body__left__content__label {
				color: #8C8C8C;
				font-size: 28rpx;
			}

			.u-form-item__body {
				padding: 40rpx 0;
			}

			.u-icon {
				margin-left: 20rpx;
			}
			
			.u-textarea{
				background-color: #FAFAFA;
			}
		}

		/deep/.driverLicense-uploader-img,
		/deep/.driverJobCertificate {
			.u-upload__wrap>view {
				width: 100%;
			}

			.previewImages {
				width: 100%;

				.previewImg {
					width: 100% !important;
					height: 240rpx !important;
				}
			}

			.uploadeBtn {
				width: 100% !important;
				height: 240rpx !important;
				margin-bottom: 30rpx;
				margin-left: 0 !important;
			}

			.orderTotal {
				display: none;
			}
		}

		/deep/.placeholder{
			color:#BFBFBF !important;
			font-size:28rpx !important;
		}
		/deep/.u-form-item__body{
			padding: 35rpx 0 !important;
		}
		/deep/.u-textarea__field{
			font-size:28rpx !important;
		}
	}	
</style>
