<template>
	<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm">
		<view class="" @tap="popupTitlelist">
			<u-form-item label="所属幼儿园:" prop="kindergartenName" borderBottom>
				<u--input class="bindtitle" v-model="form.kindergartenName" disabled disabledColor="#ffffff"
					placeholder="请选择所属幼儿园" border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
				<qianziyu-select v-if="show" :show="show" type="radio" :popupTitle="popupTitle" name="cworkStationName"
					:kindergartenId="form.kindergartenId" :dataLists="range" placeholder="输入幼儿园名称搜索" @cancel="cancel"
					@search="selectSearch" @submit="SubmitEvent"></qianziyu-select>
			</u-form-item>
		</view>

		<view class="" @tap="popupTitlelistitem">
			<u-form-item label="所属班级:" prop="className" borderBottom>
				<u--input v-model="form.className" disabled disabledColor="#ffffff" placeholder="请选择所属班级"
					border="none"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
				<qianziyu-select v-if="showitems" :show="showitems" type="radio" :popupTitle="popupTitle"
					name="cworkStationName" :classId="form.classId" :dataListgraded="rangegrade" placeholder="输入班级名称搜索"
					@cancel="cancelgrade" @search="selectSearchgrade" @submit="submitgrade"></qianziyu-select>
			</u-form-item>
		</view>
		<u-form-item label="学生家长:" prop="parentName" borderBottom>
			<u--input v-model="form.parentName" disabled disabledColor="#ffffff" placeholder="学生家长"
				border="none"></u--input>

		</u-form-item>
		<u-form-item label="民族:" prop="nationDictId" borderBottom>
			<uni-data-select v-model="form.nationDictId" placeholder="请选择民族" :localdata="List"
				@change="changenation"></uni-data-select>
		</u-form-item>
		<u-form-item label="学生姓名:" prop="studentName" borderBottom ref="item1">
			<u--input v-model="form.studentName" placeholder="请输入学生姓名" border="none"></u--input>
		</u-form-item>
		<u-form-item label="学生编号:" prop="studentNumber" borderBottom ref="item1">
			<u--input v-model="form.studentNumber" placeholder="请输入学生编号" border="none"></u--input>
		</u-form-item>
		<u-form-item label="证件编号:" prop="cardNumber" borderBottom ref="item1">
			<u--input v-model="form.cardNumber" @input="TypeInput($event)" type="number" placeholder="请输入证件编号"
				border="none" maxlength="18"></u--input>
		</u-form-item>
		<u-form-item label="曾用名:" prop="onceName" borderBottom ref="item1">
			<u--input v-model="form.onceName" placeholder="请输入曾用名" border="none"></u--input>
		</u-form-item>
		<u-form-item label="家庭住址:" prop="homeAddress" borderBottom ref="item1">
			<u--input v-model="form.homeAddress" placeholder="请输入家庭住址" border="none"></u--input>
		</u-form-item>
		<view class="" @tap="birthday">
			<u-form-item label="出生日期:" prop="birthDate" borderBottom>
				<uni-datetime-picker :show="showitem" type="date" placeholder="请选择出生日期" v-model="form.birthDate"
					:clear-icon="false" />
			</u-form-item>
		</view>

		<u-form-item label="学生性别:" borderBottom>
			<u-radio-group v-model="form.studentSex" @change="groupChange">
				<u-radio :customStyle="{marginBottom: '4px'}" v-for="(item, index) in radiolist1" :key="index"
					:label="item.name" :name="item.name" @change="radioChange">
				</u-radio>
			</u-radio-group>

		</u-form-item>
		<view class="submit" @tap="submitend">
			提交
		</view>
		<view class="cancel" @tap="ontouchcancel">
			取消
		</view>
		<u-toast ref="uToast" />
	</u--form>
</template>

<script>
	import {
		getKindergartenList,
		getClassInfo,
		getInfoByPhone,
		typeInfo,
		getStudent,
		updateStudent
	} from '@/api/index/index.js'
	import baseurl from '@/api/baseurl.js'
	export default {
		data() {
			return {
				phone: '',
				range: {},
				rangegrade: [],
				showitems: false,
				show: false,
				showitem: false,
				mode: 'single',

				form: {
					parentName: '',
					birthDate: '',
					kindergartenName: '',
					cardNumber: '',
					classId: '',
					homeAddress: '',
					kindergartenId: '',
					nationDictId: '',
					onceName: '',
					parentIdList: [],
					studentName: "",
					studentNumber: "",
					studentSex: '',
					className: '',
				},
				rules: {
					'birthDate': {
						type: 'string',
						required: true,
						message: '请选择出生日期',
						trigger: ['blur', ]
					},
					'nationDictId': {
						type: 'number',
						required: true,
						message: '请选择民族',
						trigger: ['blur', ]
					},

				},

				radiolist1: [{
						name: '男',
						disabled: false
					},
					{
						name: '女',
						disabled: false
					},

				],
				kindergartenName: '',
				radio: '',
				switchVal: false,
				List: [], //	民族
				studentId: '',
			}
		},
		onLoad(options) {
			if (options.studentId) {
				uni.setNavigationBarTitle({
					title: "修改学生信息"
				});
				this.studentId = options.studentId
				getStudent(this.studentId).then(res => {
					this.form = res.data
					if (res.data.studentSex == 'MALE') {
						this.form.studentSex = '男'
					} else if (res.data.studentSex == 'FEMALE') {
						this.form.studentSex = '女'
					}
					this.form.parentName = res.data.parentName

				})
			} else {
				uni.setNavigationBarTitle({
					title: "新增学生信息"
				});
				this.infolist();
			}

		},
		onShow() {
			this.getinfo();
			var dictType = 'nation_type'
			typeInfo(dictType).then(res => {
				res.data.forEach(e => {
					this.List.push({
						value: e.dictCode,
						text: e.dictLabel
					});

				})

			})

		},
		methods: {
			// 身份证限制数字格式
			TypeInput(e, val) {
				// 只能输入数字的验证;
				var inputType = /[\W]/g; //想限制什么类型在这里换换正则就可以了
				this.$nextTick(function() {
					this.form.cardNumber = e.replace(inputType, '');
				})
			},
			// 取消
			ontouchcancel() {
				uni.reLaunch({
					url: "/pages/Personal/Personal"
				})
			},
			infolist() {
				this.phone = uni.getStorageSync('phone');
				getInfoByPhone(this.phone).then(res => {
					this.form.parentName = res.data.parentName;
					this.form.parentIdList.push(res.data.parentInfoId)

				})
			},
			// 性别
			groupChange(n) {
				if (n == '男') {
					this.form.studentSex = 'MALE'
				} else if (n == '女') {
					this.form.studentSex = 'FEMALE'
				}
			},
			radioChange(n) {
				if (n == '男') {
					this.form.studentSex = 'MALE'
				} else if (n == '女') {
					this.form.studentSex = 'FEMALE'
				}
			},
			// 民族
			changenation(e) {
				// this.form.nationDictId = e
			},
			//提交
			submitend() {
				if (!this.form.kindergartenName) {
					this.$refs.uToast.show({
						message: "请选择所属幼儿园",
						type: 'error',
						duration: '2000'
					})
				} else if (!this.form.className) {
					this.$refs.uToast.show({
						message: "请选择所属班级",
						type: 'error',
						duration: '2000'
					})
				}
				if(this.form.studentSex=='男'){
					this.$set(this.form,'studentSex','MALE')
				}else if(this.form.studentSex=='女'){
					this.$set(this.form,'studentSex','FEMALE')
				}
				this.$refs.uForm.validate().then(res => {
					// uni.$u.toast('校验通过')
					updateStudent(this.form).then(res => {
						if (res.code == 200) {
							this.$refs.uToast.show({
								message: "提交成功",
								type: 'success',
								duration: '2000'
							})
							setTimeout(e => {
								uni.reLaunch({
									url: '/pages/Personal/Personal'
								})
							}, 1000)

						} else if (res.code == 500) {

							uni.showToast({
								title: res.msg,
								duration: 2000,
								mask: true,
								icon: 'none'
							})
						}
					})
				}).catch(errors => {
					uni.showToast({
						title: errors,
						duration: 2000,
						mask: true,
						icon: 'none'
					})
				})

			},

			// 关闭
			cancel() {
				this.show = false,
					this.getinfo()
			},
			cancelgrade() {
				this.showitems = false,
					this.info()
			},
			// 幼儿园确定
			SubmitEvent(e) {
				this.form.kindergartenName = e.kindergartenName
				this.form.kindergartenId = e.id
				this.show = false
			},
			// 班级确定
			submitgrade(e) {
				this.form.className = e.className
				this.form.classId = e.id
				this.showitems = false
			},
			// 出生日期
			closecancel() {
				this.showitem = false
			},
			// 幼儿园搜索
			selectSearch(e) {
				getKindergartenList(e).then(res => {
					console.log(res)
					this.range = res.data
					console.log(this.range)
				})
			},
			// 班级搜索
			selectSearchgrade(e) {
				getClassInfo(this.form.kindergartenId, e).then(res => {
					console.log(res)
					this.rangegrade = res.data

				})
			},
			// 幼儿园
			getinfo() {
				getKindergartenList(this.kindergartenName).then(res => {
					this.range = res.data

				})
			},
			// 班级
			info() {
				this.form.className = ''
				getClassInfo(this.form.kindergartenId, this.form.className).then(res => {
					this.rangegrade = res.data

				})
			},
			//选择所属幼儿园
			popupTitlelist() {
				this.show = true
				this.form.className = ''
			},
			// 选择所属班级
			popupTitlelistitem() {
				if (this.form.kindergartenId == '') {
					this.$refs.uToast.show({
						message: '请先选择幼儿园',
						type: 'error'
					})
				} else {
					this.showitems = true
					this.info();
				}

			},
			birthday() {
				this.showitem = true
			},
			maskClick(e) {
				console.log(e);
				this.form.birthDate = e[0]
				this.showitem = false
			},
		}
	}
</script>

<style lang="scss">
	.sex {
		width: 500rpx;
		display: inline-block;
		// background-color: red;
		height: 50rpx
	}

	.Motion {
		margin-left: 15%;
		font-size: 30rpx;
	}

	::v-deep.u-input__content__field-wrapper__field.data-v-fdbb9fe6 {
		margin-left: 15%;
	}

	::v-deep.uni-select__input-text {
		font-size: 30rpx !important;
	}

	::v-deep.uni-select__selector-item {
		font-size: 30rpx !important;
	}

	::v-deep.u-input__content__field-wrapper__field.data-v-fdbb9fe6 {
		font-size: 30rpx !important;
	}

	.cancel {
		margin-top: 5%;
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 10rpx;
		position: absolute;
		left: 54%;
		color: white;
		background-color: #35A97A;
	}

	.submit {
		margin-top: 5%;
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 10rpx;
		position: absolute;
		left: 20%;
		color: white;
		background-color: #35A97A;
	}

	::v-deep.uni-date-editor--x {
		margin-left: 10%;
	}

	::v-deep .uni-select {
		width: 84% !important;
		margin-left: 10% !important;
	}

	::v-deep .u-input {
		font-size: 5rpx !important;
	}

	::v-deep .u-form-item__body__left__content__label.data-v-5e7216f1 {
		margin-left: 18% !important;
		width: 180rpx !important;
		font-size: 28rpx !important;
	}

	::v-deep.u-radio.data-v-643b3322 {
		margin-left: 10% !important;
	}

	::v-deep .input-placeholder {
		font-size: 30rpx !important;
	}

	::v-deep.u-input__input.data-v-fdbb9fe6 {
		margin-left: 12% !important;
	}

	::v-deep .uni-data-select {
		z-index: 9999 !important;
		height: 200rpx !important;
		overflow: auto;
	}
</style>