<template>
	<view class="information">
		<u--form labelPosition="left" :model="callerInfo" :rules="rules" ref="form1">
			<u-form-item label="访客姓名" prop="callerNmae" labelWidth="100" borderBottom>
				<u--input v-model="callerInfo.callerNmae" border="none" placeholder="请输入访客姓名"></u--input>
			</u-form-item>
			<u-form-item label="访客身份证" prop="id" borderBottom labelWidth="100">
				<u--input v-model="callerInfo.id" border="none" placeholder="请输入访客身份证"></u--input>
			</u-form-item>
			<u-form-item label="访客联系方式" prop="contact" borderBottom labelWidth="100">
				<u--input v-model="callerInfo.contact" border="none" placeholder="请输入访客联系方式"></u--input>
			</u-form-item>
			<u-form-item label="访客目的" prop="purpose" borderBottom labelWidth="100">
				<u-button v-model="callerInfo.purpose" @click="show=true">{{callerInfo.purpose || '请选择访客目的'}}</u-button>
			</u-form-item>
			<u-form-item label="访客楼栋" prop="building" borderBottom labelWidth="100">
				<u-button v-model="callerInfo.building" @click="buildingShow=true">{{callerInfo.building || '请选择访客楼栋'}}
				</u-button>
			</u-form-item>
			<u-form-item label="访客时间" prop="time" borderBottom labelWidth="100">
				<u--input v-model="callerInfo.time" border="none"></u--input>
			</u-form-item>
			<u-form-item label="申请者工号" prop="number" borderBottom labelWidth="100">
				<u--input v-model="callerInfo.number" border="none" placeholder="请输入申请者工号"></u--input>
			</u-form-item>
		</u--form>
		<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>
		<view style="margin-top: 42rpx;">
			<u-button type="primary" >提交</u-button>
		</view>
	</view>
</template>

<script>
	export default {
	data(){
		return{
			callerInfo: {
			callerNmae: '',
			id: '',
			contact: '',
			purpose: '',
			building: '',
			time: '',
			number: '',
			name: '',
			bz: ''
		},
		rules:{},
		show:false,
		buildingShow:false,
		columns:[['商务会议','安装维修','其他事宜']],
		buildingColumns:[['一期主楼','二期主楼','录制楼','1600演播厅']]
		}
	},
	methods:{
		  getPurpose(val){
		  this.callerInfo.purpose = val.value[0]
		  this.show = false
	  },
	  //获取访问楼栋
	  getBuilding(val){
		  this.callerInfo.building = val.value[0]
		  this.buildingShow = false
	  }
	},
	}
</script>

<style scoped lang="scss">
	.information{
		padding: 52rpx;
	}
</style>