<template>
	<view class="main" v-bind:style="{height: client.win_height + 'px'}">
		<view class="one">
			<u--form :model="form" :rules="rules" ref="form" labelWidth="80">
				<u-form-item label="联系电话" prop="phone">
					<u--input v-model="form.phone" type="number" maxlength="11" placeholder="请输入联系电话" />
				</u-form-item>
				<u-form-item label="姓名" prop="name">
					<u--input v-model="form.name" placeholder="请输入姓名" />
				</u-form-item>
				<u-form-item label="曾用名" prop="beforeName">
					<u--input v-model="form.beforeName" placeholder="请输入曾用名" />
				</u-form-item>
				<u-form-item label="身份证号" prop="card">
					<u--input v-model="form.card" placeholder="请输入身份证号" />
				</u-form-item>
				<u-form-item label="性别" prop="gender" @click="oneShow = true;">
					<u--input v-model="form.gender" disabledColor="#ffffff" placeholder="请选择性别">
					</u--input>
				</u-form-item>
				<u-form-item label="民族" prop="nation" @click="twoShow = true;">
					<u--input v-model="form.nation" disabledColor="#ffffff" placeholder="请选择民族">
					</u--input>
				</u-form-item>
				<u-form-item label="出生日期" prop="birth" @click="thrShow=true">
					<u--input v-model="form.birth" placeholder="请输入出生日期" />
				</u-form-item>
				<u-form-item label="政治面貌" prop="politics" @click="fourShow = true;">
					<u--input v-model="form.politics" placeholder="请输入政治面貌" />
				</u-form-item>
				<u-form-item label="文化程度" prop="education" @click="fiveShow = true;">
					<u--input v-model="form.education" placeholder="请输入文化程度" />
				</u-form-item>
			</u--form>
			<view class="btn">
				<button type="warn" size="mini" @click="toReset('form')">重置信息</button>
				<button type="primary" size="mini" @click="onSubmit('form')">提交注册</button>
				<!-- 		<u-button type="warning" text="重置信息" size="small" @click="toReset('form')"></u-button>
				<u-button type="success" text="提交注册" size="small" @click="onSubmit('form')"></u-button> -->
			</view>
			<u-picker :show="oneShow" :columns="genderList" @cancel="oneShow=false" @confirm="oneSelect"></u-picker>
			<u-picker :show="twoShow" :columns="nationList" @cancel="twoShow=false" @confirm="twoSelect"></u-picker>
			<u-datetime-picker :show="thrShow" v-model="birthDate" mode="date" :minDate="2209017600"
				@cancel="thrShow=false" @confirm="thrSelect"></u-datetime-picker>
			<u-picker :show="fourShow" :columns="politicsList" @cancel="fourShow=false" @confirm="fourSelect">
			</u-picker>
			<u-picker :show="fiveShow" :columns="educationList" @cancel="fiveShow=false" @confirm="fiveSelect">
			</u-picker>
		</view>
	</view>
</template>

<script>
	const {
		gender,
		nation,
		politics,
		education
	} = require('../../layout/deploy/dict.js');
	const moment = require('moment');
	export default {
		name: 'index',
		props: {},
		components: {},
		data: function() {
			return {
				client: {},
				form: {},
				rules: {
					phone: {
						type: 'string',
						required: true,
						message: '请输入账号',
						trigger: ['blur', 'change']
					},
					name: {
						type: 'string',
						required: true,
						message: '请输入姓名',
						trigger: ['blur', 'change']
					},
					beforeName: {
						type: 'string',
						required: false,
						message: '请输入曾用名',
						trigger: ['blur', 'change']
					},
					card: {
						type: 'string',
						required: true,
						message: '请输入身份证号',
						trigger: ['blur', 'change']
					},
					gender: {
						type: 'string',
						required: true,
						message: '请选择性别',
						trigger: ['blur', 'change']
					},
					nation: {
						type: 'string',
						required: true,
						message: '请选择民族',
						trigger: ['blur', 'change']
					},
					birth: {
						type: 'string',
						required: true,
						message: '请选择出生日期',
						trigger: ['blur', 'change']
					},
					politics: {
						type: 'string',
						required: true,
						message: '请选择政治面貌',
						trigger: ['blur', 'change']
					},
					education: {
						type: 'string',
						required: true,
						message: '请选择学历',
						trigger: ['blur', 'change']
					},
				},
				// 性别
				oneShow: false,
				genderList: [gender],
				// 民族
				twoShow: false,
				nationList: [nation],
				// 出生日期
				thrShow: false,
				birthDate: '2001-01-01',
				// 政治面貌
				fourShow: false,
				politicsList: [politics],
				// 文化程度
				fiveShow: false,
				educationList: [education]

			};
		},
		created() {},
		methods: {
			// 选择性别
			oneSelect(e) {
				this.form.gender = e.value[0];
				this.$refs.form.validateField('gender');
				this.oneShow = false;
			},
			// 选择民族
			twoSelect(e) {
				this.form.nation = e.value[0];
				this.$refs.form.validateField('nation');
				this.twoShow = false;
			},
			// 选择出生日期
			thrSelect(e) {
				let date = moment(e.value).format('YYYY-MM-DD');
				if (date) {
					this.form.birth = date;
					this.$refs.form.validateField('birth');
					this.thrShow = false
				}
			},
			// 选择政治面貌
			fourSelect(e) {
				this.form.politics = e.value[0];
				this.$refs.form.validateField('politics');
				this.fourShow = false;
			},
			// 选择文化程度

			fiveSelect(e) {
				this.form.education = e.value[0];
				this.$refs.form.validateField('education');
				this.fiveShow = false;
			},
			// 重置信息
			toReset(name) {
				this.$refs[name].resetFields()
			},
			// 提交注册
			onSubmit(name) {
				this.$refs[name].validate().then(res => {
					uni.$u.toast('校验通过')
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			},
		},
		computed: {},
		onLoad() {
			// 获取设备信息
			uni.getSystemInfo({
				success: (res) => {
					this.client = {
						win_top: res.windowTop,
						win_width: res.windowWidth,
						win_height: res.windowHeight,
						scr_width: res.screenWidth,
						scr_height: res.screenHeight,
					};
				}
			})
		},
	}
</script>

<style lang="scss">
	.main {
		background-color: #409eff;
		overflow-y: auto;

		.one {
			.u-form {
				padding: 0 10px;
			}

			.btn {
				text-align: center;

				button {
					margin: 0 10px;
				}
			}
		}
	}
</style>
