<template>
	<view class="content">
		<view class="bg" v-if="isAddShow">
			<image class="bg-img" src="/static/images/bind-child-bg.png" mode="widthFix"></image>
		</view>
		<view class="form-area">
			<view class="form-inner">
				<view class="form-item">
					<view class="form-item-label">儿童姓名</view>
					<view class="form-item-input">
						<u--input inputAlign="right" placeholder="请输入孩子姓名" border="none" clearable v-model="children.username" placeholderStyle="color:#8C8C8C;text-align:right;"
							fontSize="24rpx"></u--input>
					</view>
				</view>
				<view class="form-item">
					<view class="form-item-label">儿童性别</view>
					<view class="form-item-input" @click="childSexClick">
						<u--input inputAlign="right" v-model="children.sex" placeholder="请选择孩子性别" border="none" clearable placeholderStyle="color:#8C8C8C;text-align:right;" fontSize="24rpx"
							readonly></u--input>
					</view>
				</view>
				<view class="form-item">
					<view class="form-item-label">儿童出生年月</view>
					<view class="form-item-input" @click="childDateClick">
						<u--input inputAlign="right" v-model="children.birthday" placeholder="请选择孩子出生日期" border="none" clearable placeholderStyle="color:#8C8C8C;text-align:right;" fontSize="24rpx"
							readonly></u--input>
					</view>
				</view>
			<!-- 	<view class="form-item">
					<view class="form-item-label">儿童身份证号</view>
					<view class="form-item-input">
						<u--input inputAlign="right" placeholder="请输入18位身份证号" border="none" clearable v-model="children.idCard" placeholderStyle="color:#8C8C8C;text-align:right;"
							fontSize="24rpx"></u--input>
					</view>
				</view> -->
				<view class="form-item">
					<view class="form-item-label">家长姓名</view>
					<view class="form-item-input">
						<u--input inputAlign="right" placeholder="请输入家长姓名" border="none" clearable v-model="children.parentName" placeholderStyle="color:#8C8C8C;text-align:right;"
							fontSize="24rpx"></u--input>
					</view>
				</view>
				<view class="form-item">
					<view class="form-item-label">手机号</view>
					<view class="form-item-input">
						<u--input inputAlign="right" placeholder="请输入家长手机号" border="none" clearable v-model="children.tel" placeholderStyle="color:#8C8C8C;text-align:right;"
							fontSize="24rpx"></u--input>
					</view>
				</view>
				<view class="form-item">
					<view class="form-item-label">与儿童关系</view>
					<view class="form-item-input">
						<u--input inputAlign="right" placeholder="请输入与孩子的关系" border="none" clearable v-model="children.relation" placeholderStyle="color:#8C8C8C;text-align:right;"
							fontSize="24rpx"></u--input>
					</view>
				</view>

				<view class="form-item">
					<view class="form-item-label">家庭住址</view>
					<view class="form-item-input" @click="cityClick">
						<u--input inputAlign="right" :value="cityName" border="none" placeholder="请选择省市县区" readonly placeholderStyle="color:#8C8C8C;text-align:right;" fontSize="24rpx"></u--input>
						<!-- 城市选择 -->
						<u-picker :show="cityShow" ref="uPicker" :columns="cityList" @confirm="cityConfirm" @change="changeHandler" @cancel="cityShow = false"></u-picker>
					</view>
				</view>
				<view class="form-item">
					<view class="form-item-label">详细地址</view>
					<view class="form-item-input">
						<u--input inputAlign="right" placeholder="请输入详细地址" border="none" clearable v-model="children.address" placeholderStyle="color:#8C8C8C;text-align:right;"
							fontSize="24rpx"></u--input>
					</view>
				</view>
				<view class="form-item">
					<view class="form-item-label">所在学校(选填)</view>
					<view class="form-item-input">
						<u--input inputAlign="right" placeholder="请输入所在学校" border="none" clearable v-model="children.school" placeholderStyle="color:#8C8C8C;text-align:right;"
							fontSize="24rpx"></u--input>
					</view>
				</view>
			</view>
		</view>
		<view class="privacy-policy" v-if="isAddShow">
			<view class="privacy-policy-checkbox">
				<u-checkbox-group @change="checkboxChange" v-model="privacyPolicyChecked">
					<u-checkbox activeColor="#FFA521" size="16" name="1"></u-checkbox>
				</u-checkbox-group>
			</view>
			<view class="privacy-policy-text">
				<text>同意运营商收集以上信息，</text>
				<text class="privacy-policy-text-btn" @click="goPolicy">《隐私政策》</text>
			</view>
		</view>

		<view class="btn" @tap="userAddChildren" v-if="isAddShow">
			提交申请
		</view>

		<view class="btn" style="margin-top:50rpx" @tap="userEditChildren" v-else>
			保存信息
		</view>
		<u-picker :show="childSexShow" :columns="childSexColumns" @confirm="childSexConfirm" @cancel="childSexCancel" :defaultIndex="childSexDefaultIndex"></u-picker>
		<u-datetime-picker :show="childDateShow" mode="date" @confirm="childDateConfirm" :maxDate="maxDate" :minDate="minDate" @cancel="childDateCancel"></u-datetime-picker>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import cityData from '@/util/city.js'

	export default {
		data() {
			return {
				children: {
					"parentName": "",
					"tel": "",
					"username": "",
					"sex": null,
					"birthday": "",
					"idCard": "",
					"relation": "",
					"address": "",
					"state": "",
					"city": "",
					"district": "",
					"school": ""
				},
				cityName: "",

				// 城市选择器
				cityShow: false,
				// 打开选择器显示默认城市
				cityList: [],

				cityLevel1: [],
				cityLevel2: [],
				cityLevel3: [],
				show: false, //是否显示
				columns: [], //省份数据显示，三级联动需要三维数组，展示初始数据
				columnData: [], //市数据
				columnDatas: [], //区地址			
				privacyPolicyChecked: [],
				childSexShow: false,
				childSexColumns: [
					['男', '女']
				],
				childSexDefaultIndex: [0],
				childDate: "",
				childDateShow: false,
				maxDate: new Date((new Date().getFullYear()) + "/12/31").getTime(),
				minDate: new Date("2000/1/1").getTime(),
				isAddShow: true //新增时显示 修改时不显示
			}
		},
		onLoad(option) {
			this.initCityData();
			if (option.id) {
				uni.setNavigationBarTitle({
					title: '修改信息'
				});
				this.isAddShow = false;
				this.children.id = option.id;
				this.userChildrenById(option.id);
			}
		},
		methods: {
			goPolicy(){
				uni.navigateTo({
					url:"/loginPackage/pages/PrivacyPolicy"
				})
			},
			//复选框
			checkboxChange(e) {
				// console.log(e);
				console.log(this.privacyPolicyChecked);
			},
			childSexClick() {
				this.childSexShow = true;
			},
			childSexConfirm(e) {
				console.log('176',e)
				this.children.sex = e.value[0];
				this.childSexShow = false
			},
			childSexCancel() {
				this.childSexShow = false
			},

			childDateClick() {
				this.childDateShow = true;
			},
			childDateCancel() {
				this.childDateShow = false;
			},
			childDateConfirm(date) {
				this.children.birthday = uni.$u.timeFormat(date.value, 'yyyy-mm-dd');
				this.childDateShow = false;
			},
			cityClick() {
				console.log(342);
				this.cityShow = true
			},
			// 城市选择器
			initCityData() {
				// 遍历城市js
				cityData.forEach((item1, index1) => {
					let temp2 = [];
					this.cityLevel1.push(item1.provinceName);
					let temp4 = [];
					let temp3 = [];
					// 遍历市
					item1.cities.forEach((item2, index2) => {
						temp2.push(item2.cityName);
						// 遍历区
						item2.counties.forEach((item3, index3) => {
							temp3.push(item3.countyName);
						})
						temp4[index2] = temp3;
						temp3 = [];
					})
					this.cityLevel3[index1] = temp4;
					this.cityLevel2[index1] = temp2;
				})
				// 选择器默认城市
				this.cityList.push(this.cityLevel1, this.cityLevel2[0], this.cityLevel3[0][0]);
			},
			// 选中时执行
			changeHandler(e) {
				const {
					columnIndex,
					index,
					indexs,
					value,
					values,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e;
				if (columnIndex === 0) { // 选择第一列数据时
					// 设置第二列关联数据
					picker.setColumnValues(1, this.cityLevel2[index]);
					// 设置第三列关联数据
					picker.setColumnValues(2, this.cityLevel3[index][columnIndex]);
				} else if (columnIndex === 1) { // 选择第二列数据时
					// 设置第三列关联数据
					picker.setColumnValues(2, this.cityLevel3[indexs[0]][index]);
				}
			},

			// 单击确认按钮时执行
			cityConfirm(e) {
				// 输出数组 [省, 市, 区]
				console.log(e.value);
				this.cityName = e.value.join("-");
				this.children.state = e.value[0];
				this.children.city = e.value[1];
				this.children.district = e.value[2];
				// 隐藏城市选择器
				this.cityShow = false;
			},


			addressClick() {
				this.show = true
			},
			cancel() {
				this.show = false
			},
			confirm(e) {
				console.log(e.value);
				this.children.state = e.value[0].name
				this.children.city = e.value[1].name
				this.children.district = e.value[2].name
				this.cancel()
			},
			// 添加儿童信息
			async userAddChildren() {
				if (uni.$u.test.isEmpty(this.privacyPolicyChecked.length)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "请查看隐私政策",
						complete() {
							// params.url && uni.navigateTo({
							// 	url: params.url
							// })
						}
					})
					return
				}
				if (uni.$u.test.isEmpty(this.children.username)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "请填写儿童姓名",
					})
					return
				}
				if (uni.$u.test.isEmpty(this.children.sex)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "请选择儿童性别",
					})
					return
				}
				if (uni.$u.test.isEmpty(this.children.birthday)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "请选择出生日期",
					})
					return
				}
				// if (uni.$u.test.isEmpty(this.children.idCard)) {
				// 	this.$refs.uToast.show({
				// 		type: 'error',
				// 		message: "请填写身份证号码",
				// 	})
				// 	return
				// }
				// if (!uni.$u.test.idCard(this.children.idCard)) {
				// 	this.$refs.uToast.show({
				// 		type: 'error',
				// 		message: "身份证号码不正确",
				// 	})
				// 	return
				// }
				if (uni.$u.test.isEmpty(this.children.parentName)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "请填写家长姓名",
					})
					return
				}
				if (uni.$u.test.isEmpty(this.children.tel)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "请填写家长手机号",
					})
					return
				}
				if (!uni.$u.test.mobile(this.children.tel)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "家长手机号填写不正确",
					})
					return
				}
				if (uni.$u.test.isEmpty(this.children.relation)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "请填写与儿童关系",
					})
					return
				}
				if (uni.$u.test.isEmpty(this.children.state) || uni.$u.test.isEmpty(this.children.city) || uni.$u.test
					.isEmpty(this.children.district)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "请选择省市县",
					})
					return
				}
				if (uni.$u.test.isEmpty(this.children.address)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "请填写详细地址",
					})
					return
				}

				const res = await this.$myRequest({
					url: '/system/children/userAddChildren',
					method: 'POST',
					data: this.children
				})
				if (res.data.code == 200) {
					this.$refs.uToast.show({
						type: 'success',
						message: res.data.msg,
						complete() {
							uni.switchTab({
								url: '/pages/tabbar/mine/Mine'
							})
						}
					})
				}
			},
			async userChildrenById(id) {
				const res = await this.$myRequest({
					url: '/system/children/userChildrenById/' + id,
					method: 'GET'
				})
				console.log(res)
				this.children = res.data.data
				this.cityName = res.data.data.state + '-' + res.data.data.city + '-' + res.data.data.district;

			},
			// 添加儿童信息
			async userEditChildren() {
				if (uni.$u.test.isEmpty(this.children.username)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "请填写儿童姓名",
					})
					return
				}
				if (uni.$u.test.isEmpty(this.children.sex)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "请选择儿童性别",
					})
					return
				}
				if (uni.$u.test.isEmpty(this.children.birthday)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "请选择出生日期",
					})
					return
				}
				// if (uni.$u.test.isEmpty(this.children.idCard)) {
				// 	this.$refs.uToast.show({
				// 		type: 'error',
				// 		message: "请填写身份证号码",
				// 	})
				// 	return
				// }
				// if (!uni.$u.test.idCard(this.children.idCard)) {
				// 	this.$refs.uToast.show({
				// 		type: 'error',
				// 		message: "身份证号码不正确",
				// 	})
				// 	return
				// }
				if (uni.$u.test.isEmpty(this.children.parentName)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "请填写家长姓名",
					})
					return
				}
				if (uni.$u.test.isEmpty(this.children.tel)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "请填写家长手机号",
					})
					return
				}
				if (!uni.$u.test.mobile(this.children.tel)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "家长手机号填写不正确",
					})
					return
				}
				if (uni.$u.test.isEmpty(this.children.relation)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "请填写与儿童关系",
					})
					return
				}
				if (uni.$u.test.isEmpty(this.children.state) || uni.$u.test.isEmpty(this.children.city) || uni.$u.test
					.isEmpty(this.children.district)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "请选择省市县",
					})
					return
				}
				if (uni.$u.test.isEmpty(this.children.address)) {
					this.$refs.uToast.show({
						type: 'error',
						message: "请填写详细地址",
					})
					return
				}

				const res = await this.$myRequest({
					url: '/system/children/userEditChildren',
					method: 'PUT',
					data: this.children
				})
				if (res.data.code == 200) {
					this.$refs.uToast.show({
						type: 'success',
						message: res.data.msg,
						complete() {
							uni.switchTab({
								url: '/pages/tabbar/mine/Mine'
							})
						}
					})
				}
			},
		}
	}
</script>

<style lang="less">
	page {
		background-color: #287BCE;
	}

	.content {
		width: 100%;

		.bg {
			width: 100%;

			.bg-img {
				width: 100%;
			}
		}

		.form-area {
			width: 100%;

			.form-inner {
				width: 90%;
				margin: 0 auto;
				height: 100%;
				background-color: #fff;
				border-radius: 20rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.form-item {
					width: 95%;
					height: 100rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 2rpx #EEEEF0 solid;

					.form-item-label {
						font-size: 28rpx;
						font-weight: bold;
						color: #101010;
						margin-left: 10rpx;
					}

					.form-item-input {
						width: 350rpx;
						height: 50rpx;
						margin-right: 10rpx;
					}
				}
			}
		}

		.privacy-policy {
			width: 90%;
			margin: 0 auto;
			height: 100rpx;
			display: flex;
			align-items: center;

			.privacy-policy-checkbox {
				margin-left: 20rpx;
			}

			.privacy-policy-text {
				margin-left: 10rpx;
				font-size: 26rpx;
				color: #fff;

				.privacy-policy-text-btn {
					color: #fff;
				}
			}

		}


		.btn {
			width: 80%;
			margin: 0 auto 30rpx;
			padding: 30rpx 0;
			text-align: center;
			background-color: #FFA521;
			color: #fff;
			border-radius: 30rpx;
		}
	}
</style>