<template>
	<view class="app">
		<view class="content">
			<view class="text_title">
				<text>家庭医生想要你授权信息</text>
			</view>
			<view class="text_con">
				<view class="text_con_pic">
					<image src="../../static/pagesB/shflt.png" mode=""></image>
				</view>
				<view class="text_con_right">
					信息仅用于授权，您的资料将被严格保密
				</view>
			</view>
			<view class="contentbottom">

				<view class="name">
					身份证号
					<u-input @blur="inputBlur()" v-model="form.identity" placeholder="请输入身份证号" />
					<view class="idScan">
						<!-- <u-icon slot="right" name="arrow-right"></u-icon> -->
						<image style="width: 28rpx;height: 28rpx;" src="../../static/pagesB/sweep.png" mode="">
						</image>
					</view>
				</view>
				<view class="name">
					姓名
					<u-input v-model="value" placeholder="请输入姓名" />
				</view>
				<view class="name">
					性别
					<view class="sex">
						<u-radio-group v-model="form.gender" size='30'>
							<u-radio @change='changeGender' v-for="(item, index) in sexlist" :key="index"
								:name="item.name" active-color="#26A888" :disabled="item.disabled">
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="name">
					民族
					<view class="select" @click="showNation = true;">
						<text>请选择民族</text>
						<image src="../../static/huijiantou.png" mode=""></image>
					</view>
				</view>
				<view class="name">
					出生日期
					<view class="select">
						<text>请选择出生日期</text>
						<image src="../../static/huijiantou.png" mode=""></image>
					</view>
				</view>
				<view class="name">
					与户主的关系
					<view class="select" @click="showRelationshipWithHouseholder = true;">
						<text>请选择与户主的关系</text>
						<image src="../../static/huijiantou.png" mode=""></image>
					</view>
				</view>


				<view class="name">
					居住地址
					<u-input v-model="form.address" placeholder="请输入居住地址" />
				</view>

				<view class="name">
					手机号
					<u-input v-model="form.phone" placeholder="请输入手机号" />
				</view>
			</view>
			<u-select v-model="showNation" :list="actions"  @confirm="nationSelect"></u-select>
			<u-select v-model="showRelationshipWithHouseholder" :list="actions"  @confirm="nationSelect"></u-select>

			<view class="nextpage" @tap="gonextstep">
				添加
			</view>
		</view>

	</view>
	</view>
</template>

<script>
	// import {
	//   bindFamilyUser,
	//   getDictByType
	// } from '@/service/api/api.js'
	// import QQMapWX from '@/utils/qqMap/qqmap-wx-jssdk.js';
	export default {
		data() {
			return {
				sexlist: [{
						name: '男',
						disabled: false
					},
					{
						name: '女',
						disabled: false
					}
				],
				mode: '',
				newTime: '',
				barTitle: '添加成员',
				showBirthday: false,
				showNation: false,
				showRelationshipWithHouseholder: false,
				// isShow: false,
				loading: false,
				// value1: '',
				//校验性别 flag
				ifSex: '',
				form: {
					identity: '',
					residentName: '',
					gender: '',
					nation: '汉族',
					address: '',
					phone: '',
					birthday: '',
					relationshipWithHouseholder: '',
					bindingCity: ''
				},
				relationshipWithHouseholder: '',
				actions: [{
						value: '1',
						label: '汉族'
					
					},
					{
						value: '2',
						label: '少数名族'
					}
				],
				radiolist: [{
						name: '男',
						disabled: false
					},
					{
						name: '女',
						disabled: false
					}
				],
				rules: {
					identity: [{
						//必填
						required: true,
						message: '请输入身份证号',
						trigger: ['change', 'blur'],
					}, {
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// uni.$u.test.mobile()就是返回true或者false的
							return uni.$u.test.idCard(value);
						},
						message: '请输入正确的身份证号',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur'],
					}],
					residentName: [{
						required: true,
						message: '请输入姓名',
						trigger: ['change', 'blur']
					}],
					gender: [{
						min: 1,
						required: true,
						message: '请选择性别',
						trigger: ['change']
					}],
					nation: [{
						min: 1,
						required: true,
						message: '请选择民族',
						trigger: ['blur', 'change']
					}],
					birthday: [{
						min: 1,
						required: true,
						message: '请选择出生日期',
						trigger: ['blur', 'change']
					}],
					// relationshipWithHouseholder: [{
					//   min: 1,
					//   required: true,
					//   message: '请选择与户主关系',
					//   trigger: ['blur', 'change']
					// }],
					address: [{
						required: true,
						message: '请输入居住地址',
						trigger: ['change', 'blur']
					}],
					phone: [{
						// type: 'number',
						// len: 13,
						required: true,
						message: '请输入正确手机号',
						trigger: ['change', 'blur']
					}, {
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// uni.$u.test.mobile()就是返回true或者false的
							return uni.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['change', 'blur'],
					}]
				},
				columns: [
					['山东省'],
					['德州市', '东营市', '济南市']
				],
				columnData: [
					['德州市', '东营市', '济南市']
				],
				gxcolumn: [],
				dictList: [],
				address: uni.getStorageSync('location'),
				addInfo: {
					longitude: '', //经度
					latitude: '', //纬度
				},
			}
		},
		onLoad(options) {
			console.log(this.address, '546545454');
			getDictByType('householderRelationship').then(res => {
				this.dictList = res.data.data
				console.log(res);
				let arr = []
				for (let i of res.data.data) {
					arr.push(i.dictLabel)
				}
				this.gxcolumn.push(arr)
			})
			this.form.openid = uni.getStorageSync('openId')
			if (uni.getStorageSync('location') == '德州市') {
				this.form.bindingCity = '1'
			} else if (uni.getStorageSync('location') == '东营市') {
				this.form.bindingCity = '2'
			} else if (uni.getStorageSync('location') == '济南市') {
				this.form.bindingCity = '3'
			}
			console.log(this.form.bindingCity);
			if (options.mode) {
				this.mode = options.mode
				this.barTitle = '授权登录'
			} else {
				return
			}

			this.qqmapsdk = new QQMapWX({
					// 在腾讯平台自己申请的秘钥
					key: 'Q4DBZ-UIMC2-B63UX-CUZ6A-S3UT7-TBF3V'
				}),
				this.getAddress(),
				this.getLocal(),
				//进入页面调用
				this.getAtTime()
		},
		onShow() {
			if (this.address != uni.getStorageSync('location')) {
				uni.navigateBack({
					delta: 1
				})
			}
			this.address = uni.getStorageSync('location')
			// console.log('aaaa',this.address);
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			// this.$refs.uForm.setRules(this.rules);
		},
		beforeDestroy() {
			wx.exitMiniProgram({
				success(e) {
					console.log(e)
				}
			})
		},
		methods: {
			// 注册
			register() {
				const _this = this
				this.$refs.uForm.validate().then(res => {
					if (this.form.gender == '男') {
						this.form.gender = '1'
					} else {
						this.form.gender = '2'
					}
					if (this.form.gender) {
						bindFamilyUser(_this.form).then(res => {
							if (res.data.code == '0') {
								uni.showModal({
									title: '提示',
									content: res.data.msg,
								})
							}
							if (res.header.Authorization) {
								uni.setStorageSync('token', res.header.Authorization)
							}
							if (res.data.msg == '请求成功') {
								if (_this.mode == '注册') {
									uni.setStorageSync('userInfo', res.data.data)
									uni.showToast({
										title: '注册成功',
										duration: 1000
									});
									setTimeout(function() {
										uni.switchTab({
											url: '/pages/user/user'
										})
									}, 1000);
								} else {
									uni.showToast({
										title: '添加成功',
										duration: 1000
									});
									setTimeout(function() {
										uni.navigateBack({
											delta: 1
										})
									}, 1000);
								}
							}

						})
					} else {
						uni.showToast({
							title: "校验失败"
						})
					}
				}).catch(errors => {
					uni.showToast({
						title: "校验失败"
					})
				})
				if (this.ifSex == '') {
					this.ifSex = true
				}
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			changeGender(e) {
				if (e == '男') {
					this.form.gender = '1'
				} else {
					this.form.gender = '2'
				}
			},
			nationSelect(e) {
				this.form.nation = e.name
				this.$refs.uForm.validateField('nation')
			},
			//点击出生日期按钮 获取当前时间戳  赋值data的newTime  newTime传入 最大限制时间
			getAtTime() {
				const atNewdate = new Date().getTime();
				this.newTime = atNewdate
			},
			//身份证 自动截取渲染出生日期
			inputBlur(e) {
				this.$refs.uForm.validateField('identity', (errorsRes) => {
					if (errorsRes == '') {
						const cutIdYear = e.substr(6, 4) //截取年
						const cutIdMonth = e.substr(10, 2) //截取月
						const cutIdDay = e.substr(12, 2) //截取日
						const newCutId = cutIdYear + "-" + cutIdMonth + "-" + cutIdDay //拼接年月日  xxxx-xx-xx
						this.form.birthday = newCutId
						this.$refs.uForm.validateField('birthday') //单独校验  修复不实时校验的bug
						// 渲染性别
						let mySex = e.substr(16, 1)
						console.log(mySex)
						if (parseInt(mySex) % 2 === 1) {
							this.form.gender = this.radiolist[0].name;
						} else {
							this.form.gender = this.radiolist[1].name;
						}
						console.log(mySex);
					} else {
						this.form.birthday = ''
					}
				})
			},
			//出生日期确定按钮
			confirm(e) {
				this.showBirthday = false //隐藏弹出层
				const timeFormat = uni.$u.timeFormat //时间戳  →  年月日
				const newDate = timeFormat(e.value, 'yyyy-mm-dd') //年月日格式
				this.form.birthday = newDate //赋值
				this.$refs.uForm.validateField('birthday') //单独校验
			},
			//出生日期取消按钮
			cancel() {
				this.showBirthday = false //隐藏弹出层 
				this.$refs.uForm.validateField('birthday') //单独校验
			},
			gxcancel() {
				this.showRelationshipWithHouseholder = false
				this.$refs.uForm.validateField('relationshipWithHouseholder')
			},
			gxconfirm(e) {
				this.relationshipWithHouseholder = e.value[0]
				this.form.relationshipWithHouseholder = this.dictList.find(item => item.dictLabel == e.value[0]).dictValue
				this.showRelationshipWithHouseholder = false
				this.$refs.uForm.validateField('relationshipWithHouseholder')
			},
			//校验性别按钮
			radioChange(e) {
				this.ifSex = e
				// if(e == '男') {
				// 	this.form.gender = '1'
				// } else {
				// 	this.form.gender = '2'
				// }

			},

			//获取当前位置
			getAddress() {
				//vm ===  vue实例对象
				let vm = this;
				uni.getLocation({
					type: 'wgs84',
					//成功
					success: (res) => {
						// console.log(res);
						vm.addInfo.latitude = res.latitude
						vm.addInfo.longitude = res.longitude
						//vm.getLocal    Vue实例对象的方法 
						vm.getLocal(vm.addInfo.latitude, vm.addInfo.longitude)
					},
					//失败
					fail: (res) => {
						// console.log('fail' + JSON.stringify(res))
						uni.showToast({
							icon: 'none',
							title: '获取地址失败,请打开定位',
						})
					}
				})
			},
			getLocal(latitude, longitude) {
				let vm = this
				//调用qqmap里面的 reverseGeocoder 方法
				vm.qqmapsdk.reverseGeocoder({
					location: {
						latitude: latitude,
						longitude: longitude
					},
					success: (res) => {
						// vm.address = res.result.ad_info.city

						// uni.setStorageSync('location', res.result.ad_info.city)
						// if (res.result.ad_info.city == '德州市') {
						// 	this.form.bindingCity = '1'
						// } else if (res.result.ad_info.city == '东营市') {
						// 	this.form.bindingCity = '2'
						// }
					},
					fail: (res) => {
						// console.log(res)
					}
				})
			},
			// goLocation() {
			//   uni.navigateTo({
			//     url: '/pages/location/location'
			//   })
			// },
			//赋值定位
			// FunConfirm(e) {
			//   console.log(e);
			//   this.isShow = false
			//   this.address = e.value[1]
			// },


		}
	}
</script>
<style lang="scss">
	.app {
		height: 100vh;
		background-color: #F7F5F5;
		padding: 30rpx 0 0 0;

		.content {
			width: 95%;
			height: 100%;
			overflow: scroll;
			background: #FFFFFF;
			box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
			border-radius: 5rpx;
			margin: 15rpx auto;
			position: relative;
			::v-deep .u-input {
				width: 630rpx;
				height: 63rpx;
				background: #F6F6F6;
				color: #8E8E8E;
				// border:  1rpx solid red;
				// margin: 12rpx auto;
				border: none;
				border-radius: 5rpx;
			
			
				.u-input__input {
					font-size: 26rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #000000 !important;
					padding-left: 20rpx;
			
				}
			
			}

			.text_title {
				// width: 358rpx;
				height: 29rpx;
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				line-height: 42rpx;
				margin: 40rpx 30rpx 0 7%;
			}

			.text_con {
				display: flex;
				// align-items: center;
				// justify-content: center;
				width: 42%;
				margin: 23rpx 30rpx 0 55rpx;

				color: rgb(23, 20, 22);
				border-radius: 16rpx;
				background: #E9F6F3;
				border-radius: 2rpx;

				.text_con_pic {
				    margin-right: 10rpx;
				    margin-left: 9rpx;

					image {
						width: 14rpx;
						height: 18rpx;
					}
				}

				.text_con_right {
					// width: 251rpx;
					// height: 15rpx;
					font-size: 14rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
					line-height: 42rpx;


				}
			}

			.nextpage {
				width: 496rpx;
				height: 61rpx;
				background: #26A888;
				border-radius: 5rpx;
				line-height: 61rpx;
				color: white;
				text-align: center;
				position: relative;
				left: 50%;
				transform: translateX(-50%);
				top: 4%;
			}

			.contentbottom {
				position: relative;
				top: 2%;
			}

			.name {
				padding: 10rpx 30rpx 0 7%;
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #333333;
				line-height: 38rpx;

				::v-deep .input-placeholder {
					color: #8E8E8E !important;
					font-size: 20rpx;

					font-family: Source Han Sans CN;
					font-weight: 400;
					padding-left: 20rpx;
				}

				.idScan {
					position: absolute;
					top: 87rpx;
					right: 60rpx;
					transform: translate(0%, -40%);
				}

				.sex {
					width: 630rpx;
					height: 63rpx;
					background: #F6F6F6;
					margin: 12rpx 0 12rpx 0;
					border: none;
					border-radius: 5rpx;

				}

				::v-deep .u-radio {
					margin-top: 8rpx !important;
					margin-left: 20rpx !important;

				}

				::v-deep .u-input {
					width: 636rpx;
					height: 63rpx;
					background: #F6F6F6;
					margin: 12rpx auto;
					border: none;
					border-radius: 5rpx;

				}

				// ::v-deep.uni-input-placeholder {
				// 	color: #8E8E8E !important;
				// 	font-size: 20rpx !important;
				// }
				
				::v-deep.input-placeholder {
					color: #8E8E8E !important;
					font-size: 20rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
				}
				
				::v-deep.uni-input-placeholder {
					color: #8E8E8E !important;
					font-size: 20rpx;
				}

				::v-deep .u-input__input.data-v-fdbb9fe6 {
					font-size: 26rpx !important;
				}

				// ::v-deep.input-placeholder {
				// 	color: #8E8E8E !important;
				// 	font-size: 20rpx !important;
				// }
				::v-deep .uni-input-input{
					padding-left: 20rpx !important;
					
				}

				.select {
					width: 636rpx;
					height: 63rpx;
					background: #F6F6F6;
					margin: 12rpx auto;
					border-radius: 5rpx;
					display: flex;
					position: relative;

					text {
						padding-left: 20rpx;
						line-height: 63rpx;
						font-size: 20rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #8E8E8E;
					}

					image {
						width: 9rpx;
						height: 17rpx;
						position: absolute;
						right: 40rpx;
						top: 50%;
						-webkit-transform: translateY(-50%);
						transform: translateY(-50%);
					}
				}
			}

			.numberone {
				width: 90rpx;
				height: 90rpx;
				position: absolute;
				top: 6%;
				left: 15%;
				background: #26A888;
				border-radius: 50%;
				color: #fff;
				line-height: 90rpx;
				text-align: center;
				font-size: 50rpx;
				font-family: Source Han Sans CN;
				font-weight: bold;

				.information {
					width: 160rpx;
					margin: 11px 4px 4px -10px;
					font-size: 26rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #26A888;
					line-height: 38rpx;
				}
			}

			.number {
				.numbertwo:hover {
					background-color: #26A888;
					color: #fff;
				}

				.information:hover {
					color: #26A888;
				}
			}

			// ::v-deep .uni-input-input {
			// 	left: 20rpx;
			// }

			.number {
				width: 180rpx;
				height: 150rpx;
				position: absolute;
				top: 6%;
				left: 65%;

				.numbertwo {
					width: 90rpx;
					height: 90rpx;
					left: 50%;
					transform: translateX(50%);
					background: #F0F1F6;
					border-radius: 50%;
					line-height: 90rpx;
					text-align: center;
					font-size: 50rpx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					// border: 1rpx solid #A6C8C0;
					color: #A6C8C0;

				}

				.information {
					padding-top: 20rpx;
					font-size: 26rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #8E8E8E;
					line-height: 38rpx;
					text-align: center;
				}
			}


			.item {
				position: absolute;
				width: 202rpx;
				height: 1rpx;
				top: 10%;
				left: 34%;
				background: linear-gradient(-90deg, #E6E6E6, #26A888);
			}
		}
	}
</style>