<template>
	<view>
		<view class="form-area">
			<uni-forms ref="driverForm" :rules="rules" :modelValue="driverFormData" label-position="top">
				<uni-forms-item required name="name" label="机手姓名" label-width="150">
					<uni-easyinput placeholder="请输入" v-model="driverFormData.name"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item required name="tel" label="机手电话" label-width="150">
					<uni-easyinput placeholder="请输入" v-model="driverFormData.tel"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item required name="age" label="年龄" label-width="150">
					<uni-easyinput placeholder="请输入" type="number" v-model="driverFormData.age"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item required name="idCard" label="身份证号" label-width="150">
					<uni-easyinput placeholder="请输入" type="number" v-model="driverFormData.idCard"></uni-easyinput>
				</uni-forms-item>
				<button @click="subForm">提交</button>
			</uni-forms>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				driverFormData: {
					name: '',
					tel: '',
					age: '',
					idCard: ''
				},
				rules: {
					name: {
						rules: [
							{
								required: true,
								errorMessage: '请填写机手姓名！'
							}
						]
					},
					tel: {
						rules: [
							{
								required: true,
								errorMessage: '请填写机手电话！'
							}
						]
					},
					age: {
						rules: [
							{
								required: true,
								errorMessage: '请填写年龄！'
							}
						]
					},
					idCard: {
						rules: [
							{
								required: true,
								errorMessage: '请填写身份证号！'
							}
						]
					}
				}
			}
		},
		methods: {
			subForm () {
				let that = this
				this.$refs.driverForm.validate().then(formData => {
					console.log(formData);
				})
			}
		}
	}
</script>

<style lang="scss">
	body{
		background-color: #F3F3F3;
	}
	.form-area{
		width: 95%;
		margin: 20rpx auto;
		background-color: #fff;
		border-radius: 15rpx;
		box-sizing: border-box;
		padding: 20rpx;
	}
</style>
