<template>
	<!-- 完善信息最大盒子 -->
	<view class="modify_revise">
		<!-- 姓名身份证手机号信息 -->
		<view class="nameshenfen">
			<view class="name">
				<text>真实姓名</text> <input type="text" v-model="realName" @blur="realNameinp" placeholder="请输入真实姓名" />
			</view>
			<view class="name">
				<text>身份证号</text> <input type="text" v-model="idcard" @blur="idcardinp" placeholder="请输入身份证号" />
			</view>
			<view class="name">
				<text>手机号码</text> <input type="text" v-model="tel" @blur="telinp" placeholder="133****3635" />
			</view>
		</view>

		<!-- 文字提示 -->
		<view class="modifytext">
			<text>请上传本人真实有效的身份证原件</text> <text>未带身份证原件</text>
		</view>
		<!-- 上传身份件 -->
		<view class="identity">
			<view class="idCard-box">
				<view class="positive">
					<image :src="upLoadPositiveImg == ''?positiveImg:upLoadPositiveImg" @click.stop='uploadpic'>
					</image>
				</view>
				<view class="reverse">
					<image :src="upLoadReverseImg == ''?reverseImg:upLoadReverseImg" @click.stop='uploadpics'>
					</image>
				</view>
			</view>
		</view>

		<!-- 添加紧急联系人 -->
		<view class="emergency_contact">
			<view class="name" @click="openPopup('bottom')">
				<view class="jinj">紧急联系人</view>
				<view class="lianx"><text>{{lxrmoren}}</text> <uni-view data-v-064d693c=""
						class="iconfont icon-jiantou"></uni-view></view>
			</view>
			<view class="name">
				<text>联系人姓名</text> <input type="text" v-model="realNameone" @blur="realNameinpone"
					placeholder="请输入联系人姓名" />
			</view>
			<view class="name">
				<text>联系人手机</text> <input type="text" v-model="telone" @blur="telinpone" placeholder="请输入联系人手机" />
			</view>
		</view>
		<!-- 添加多个紧急联系人 -->
		<view class="emergency_contact">
			<view class="name" @click="openPopups('bottoms')">
				<view class="jinj">紧急联系人</view>
				<view class="lianx"><text>{{lxrmorens}}</text> <uni-view data-v-064d693c=""
						class="iconfont icon-jiantou"></uni-view></view>
			</view>
			<view class="name">
				<text>联系人姓名</text> <input type="text" v-model="realNametwo" @blur="realNameinptwo"
					placeholder="请输入联系人姓名" />
			</view>
			<view class="names">
				<text>联系人手机</text> <input type="text" v-model="teltwo" @blur="telinptwo" placeholder="请输入联系人手机" />
			</view>
			<view class="addname">
				<a href="javascript:;" @click="btnadd">
					<view class="add">+</view>
					<text>继续添加(有助于提高审核成功率)</text>
				</a>
			</view>
		</view>
		<!-- 常用邮箱 -->
		<view class="cye_mail">
			<view class="email">
				<text>常用邮箱</text> <input type="text" v-model="emitext" @blur="emitextinp" placeholder="请输入常用邮箱(必填)" />
			</view>
			<text class="bz">为保障您的权益,物流信息将发送至您的邮箱</text>
		</view>
		<!-- 常用手机号 -->
		<view class="commontel">
			<view class="email">
				<text>常用手机号</text> <input type="text" v-model="telthre" @blur="telinpthre" placeholder="请输入常用手机号(必填)" />
			</view>
			<text class="bz">为尽快完成申核发货，请输入能联系到您的常用手机号</text>
		</view>

		<!-- 确定 -->
		<a href="javascript:;" class="btntrue" @click="btnclick">确定</a>

		<!-- 联系人弹出框 -->
		<liu-popup type="bottom" ref="bottom" class="boxlist">
			<view class="lxrlist">
				<view @click="btnlxr(item)" v-for="(item,index) in lxrarr" :key="index">{{item}}</view>
			</view>
		</liu-popup>
		<!-- 多个联系人弹出框 -->
		<liu-popup type="bottom" ref="bottoms" class="boxlist">
			<view class="lxrlist">
				<view @click="btnlxrs(item)" v-for="(item,index) in lxrarr" :key="index">{{item}}</view>
			</view>
		</liu-popup>
	</view>
</template>

<script>
	import {
		getInformation
	} from '@/api/api.js'
	export default {
		data() {
			return {
				// 正面身份证
				positiveImg: '', //自己图片路径
				upLoadPositiveImg: 'https://tse1-mm.cn.bing.net/th/id/OIP-C.zrlmSg7klHyl3uDBB-nG3wAAAA?w=280&h=170&c=7&r=0&o=5&pid=1.7', // 反面身份证
				reverseImg: '', //自己图片路径
				upLoadReverseImg: 'https://ha.hainanu.edu.cn/__local/2/05/F5/E22F199DEFB4C9D81BED08639F8_1DB89F92_17BD.jpg',
				baidu_token: ' ', //百度token
				realName: '', //真实姓名,
				idcard: '', //身份证号,
				tel: '', //手机号
				realNameone: '',
				realNametwo: '',
				telone: '',
				teltwo: '',
				telthre: '',
				lxrarr: ['爸爸', '妈妈', '哥哥', '姐姐'],
				lxrmoren: '请选择您与联系人的关系',
				lxrmorens: '请选择您与联系人的关系',
				emitext: '', //邮箱
				shenfenpic: '', //身份证正面的base64格式
				shenfenpics: '', //身份证反面的base64格式
			}
		},
		onLoad() {

		},
		methods: {
			// 判断姓名
			realNameinp() {
				let that = this
				let namepatten = /^[\u4e00-\u9fa5a-zA-Z\s\-]+$/
				if (this.realName == '') {
					return that.$util.Tips({
						title: '姓名不能为空'
					});
				} else if (namepatten.test(this.realName)) {

				} else {
					return that.$util.Tips({
						title: '请填写正确的姓名'
					});
				}
			},
			realNameinptwo() {
				let that = this
				let namepatten = /^[\u4e00-\u9fa5a-zA-Z\s\-]+$/
				if (this.realNametwo == '') {
					return that.$util.Tips({
						title: '联系人姓名不能为空'
					});
				} else if (namepatten.test(this.realNametwo)) {

				} else {
					return that.$util.Tips({
						title: '请填写正确的联系人姓名'
					});
				}
			},
			realNameinpone() {
				let that = this
				let namepatten = /^[\u4e00-\u9fa5a-zA-Z\s\-]+$/
				if (this.realNameone == '') {
					return that.$util.Tips({
						title: '联系人姓名不能为空'
					});
				} else if (namepatten.test(this.realNameone)) {

				} else {
					return that.$util.Tips({
						title: '请填写正确的联系人姓名'
					});
				}
			},
			// 判断身份证
			idcardinp() {
				let result = /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/
				if (this.idcard == '') {
					return this.$util.Tips({
						title: '身份证不能为空'
					});
				} else if (result.test(this.idcard)) {

				} else {
					return this.$util.Tips({
						title: '请填写正确的身份证'
					});
				}
			},
			// 判断手机号
			telinp() {
				let photopatten = /^1[3456789]\d{9}$/
				if (this.tel == '') {
					return this.$util.Tips({
						title: '手机号不能为空'
					});
				} else if (photopatten.test(this.tel)) {

				} else {
					return this.$util.Tips({
						title: '请填写正确的手机号'
					});
				}
			},
			telinpone() {
				let photopatten = /^1[3456789]\d{9}$/
				if (this.telone == '') {
					return this.$util.Tips({
						title: '联系人手机号不能为空'
					});
				} else if (photopatten.test(this.telone)) {

				} else {
					return this.$util.Tips({
						title: '请填写正确的手机号'
					});
				}
			},
			telinptwo() {
				let photopatten = /^1[3456789]\d{9}$/
				if (this.teltwo == '') {
					return this.$util.Tips({
						title: '联系人手机号不能为空'
					});
				} else if (photopatten.test(this.teltwo)) {

				} else {
					return this.$util.Tips({
						title: '请填写正确的手机号'
					});
				}
			},
			telinpthre() {
				let photopatten = /^1[3456789]\d{9}$/
				if (this.telthre == '') {
					return this.$util.Tips({
						title: '常用手机号不能为空'
					});
				} else if (photopatten.test(this.telthre)) {

				} else {
					return this.$util.Tips({
						title: '请填写正确的手机号'
					});
				}
			},
			// 点击显示联系人关系
			openPopup(e) {
				this.$refs[e].open();
			},
			openPopups(e) {
				this.$refs[e].open();
			},
			// 选择联系人关系
			btnlxr(val) {
				this.lxrmoren = val
			},
			btnlxrs(val) {
				this.lxrmorens = val
			},

			// 判断邮箱
			emitextinp() {
				let aqq = /^[1-9][0-9]{4,10}@qq.com$/
				if (this.emitext == '') {
					return this.$util.Tips({
						title: '常用邮箱不能为空'
					});
				} else if (!aqq.test(this.emitext)) {
					return this.$util.Tips({
						title: '请填写正确的邮箱'
					});
				}
			},

			// 点击确定调用判断
			btnclick() {
				let namepatten = /^[\u4e00-\u9fa5a-zA-Z\s\-]+$/ //姓名正则
				let result = /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/ //身份证正则
				let photopatten = /^1[3456789]\d{9}$/ //手机号正则
				let aqq = /^[1-9][0-9]{4,10}@qq.com$/ //邮箱正则
				if (this.realName == '') {
					return this.$util.Tips({
						title: '姓名不能为空'
					});
				} else if (!namepatten.test(this.realName)) {
					return this.$util.Tips({
						title: '请填写正确的姓名'
					});
				} else if (this.idcard == '') {
					return this.$util.Tips({
						title: '身份证不能为空'
					})
				} else if (!result.test(this.idcard)) {
					return this.$util.Tips({
						title: '请填写正确的身份证'
					});
				} else if (this.tel == '') {
					return this.$util.Tips({
						title: '手机号不能为空'
					});
				} else if (!photopatten.test(this.tel)) {
					return this.$util.Tips({
						title: '请填写正确的手机号'
					})
				} else if (this.upLoadPositiveImg ==
					'https://tse1-mm.cn.bing.net/th/id/OIP-C.zrlmSg7klHyl3uDBB-nG3wAAAA?w=280&h=170&c=7&r=0&o=5&pid=1.7' ||
					this.upLoadReverseImg ==
					'https://ha.hainanu.edu.cn/__local/2/05/F5/E22F199DEFB4C9D81BED08639F8_1DB89F92_17BD.jpg') {
					return this.$util.Tips({
						title: '身份证正反面不能为空'
					})
				} else if (this.lxrmoren == '请选择您与联系人的关系') {
					return this.$util.Tips({
						title: '请选择联系人与您的关系'
					})
				} else if (this.lxrmoren == '请选择您与联系人的关系') {
					return this.$util.Tips({
						title: '请选择联系人与您的关系'
					})
				} else if (this.realNameone == '') {
					return this.$util.Tips({
						title: '联系人姓名不能为空'
					});
				} else if (!namepatten.test(this.realNameone)) {
					return this.$util.Tips({
						title: '请填写正确的联系人姓名'
					});
				} else if (this.telone == '') {
					return this.$util.Tips({
						title: '联系人手机号不能为空'
					});
				} else if (!photopatten.test(this.telone)) {
					return this.$util.Tips({
						title: '请填写正确的手机号'
					});
				} else if (this.realNametwo == '') {
					return this.$util.Tips({
						title: '联系人姓名不能为空'
					});
				} else if (!namepatten.test(this.realNametwo)) {
					return this.$util.Tips({
						title: '请填写正确的联系人姓名'
					});
				} else if (this.teltwo == '') {
					return this.$util.Tips({
						title: '联系人手机号不能为空'
					});
				} else if (!photopatten.test(this.teltwo)) {
					return this.$util.Tips({
						title: '请填写正确的手机号'
					});
				} else if (this.emitext == '') {
					return this.$util.Tips({
						title: '常用邮箱不能为空'
					});
				} else if (!aqq.test(this.emitext)) {
					return this.$util.Tips({
						title: '请填写正确的邮箱'
					});
				} else if (this.telthre == '') {
					return this.$util.Tips({
						title: '常用手机号不能为空'
					});
				} else if (!photopatten.test(this.telthre)) {
					return this.$util.Tips({
						title: '请填写正确的手机号'
					});
				} else {
					this.getList()
					return this.$util.Tips({
						title: '申请成功',
					})
				}
			},
			// 请求保存个人信息
			getList: function() {
				let data = {
					realName: this.realName,
					idCardNumber: this.idcard,
					phoneNumber: this.tel,
					idCardFrontPhoto: this.upLoadPositiveImg,
					idCardBackPhoto: this.upLoadReverseImg,
					email: this.emitext,
					commonPhoneNumber: this.telthre,
					uid: this.$store.getters.uid
				}
				getInformation(data).then(res => {
					let data = res.data;
					console.log(data)
				})
			},

			// 点击继续添加联系人
			btnadd() {
				// console.log(this.$store.getters.uid)
			},



			// file文件转base64
			// getImageBase64(blob) {
			// 	return new Promise((resolve, reject) => {
			// 		const reader = new FileReader();
			// 		reader.readAsDataURL(blob);
			// 		reader.onload = () => {
			// 			const base64 = reader.result;
			// 			resolve(base64);
			// 		}
			// 		reader.onerror = error => reject(error);
			// 	});
			// },
			// 身份证正面上传
			// uploadPositive() {
			// 	uni.chooseImage({
			// 		count: 1,
			// 		sizeType: ['original', 'compressed'],
			// 		sourceType: ['album', 'camera'],
			// 		success: (res) => {
			// 			this.upLoadPositiveImg = res.tempFilePaths[0]
			// 			this.getImageBase64(res.tempFiles[0]).then(res => {
			// 				this.shenfenpic = res
			// 			})
			// 		}
			// 	})
			// },

			uploadpic: function() {
				let that = this;
				that.$util.uploadImageOne({
					url: that.upLoadPositiveImg,
					name: 'multipart',
					model: 'user',
					pid: 7
				}, function(res) {
					that.upLoadPositiveImg = res.data.url;
					console.log(that.upLoadPositiveImg)
				});
			},
			uploadpics: function() {
				let that = this;
				that.$util.uploadImageOne({
					url: 'upload/image',
					name: 'multipart',
					model: 'user',
					pid: 7
				}, function(res) {
					// console.log(res)
					that.upLoadReverseImg = res.data.url;
				});
			},

			// 身份证反面上传
			// uploadReverse() {
			// 	uni.chooseImage({
			// 		count: 1,
			// 		sizeType: ['original', 'compressed'],
			// 		sourceType: ['album', 'camera'],
			// 		success: (res) => {
			// 			this.upLoadReverseImg = res.tempFilePaths[0]
			// 			this.getImageBase64(res.tempFiles[0]).then(res => {
			// 				this.shenfenpics = res
			// 			})
			// 		}
			// 	})
			// }
		}
	}
</script>

<style lang="less">
	.lxrlist {
		width: 100%;
		padding: 20rpx 30rpx !important;
		box-sizing: border-box;
		color: gray;

		view:hover {
			background-color: aqua;
			color: #000;
			font-size: 14px;
			font-weight: 700;
		}

		view {
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			border-bottom: 1px solid #ccc;
		}
	}

	.box {
		padding: 32rpx;
	}

	.btn {
		width: 686rpx;
		height: 88rpx;
		background: #2182fe;
		border-radius: 8rpx;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		color: #ffffff;
		margin-top: 20rpx;
	}

	.modify_revise {
		width: 100%;
		background-color: rgb(228, 228, 228);
		padding: 20rpx;
		box-sizing: border-box;
		font-size: 11px !important;

		// 身份姓名手机号信息
		.nameshenfen {
			width: 100%;
			background-color: #fff;
			border-radius: 10rpx;
			padding: 0 30rpx;
			box-sizing: border-box;

			.name:nth-of-type(3) {
				border: 0;
			}

			.name {
				height: 80rpx;
				line-height: 80rpx;
				display: flex;
				width: 100%;
				border-bottom: 1px solid #ccc;

				text {
					margin-right: 80rpx;
				}

				input {
					height: 80rpx;
					line-height: 80rpx;
					font-size: 26rpx;
				}
			}
		}

		// 文字提示
		.modifytext {
			width: 100%;
			display: flex;
			justify-content: space-between;
			margin-top: 50rpx;
			padding: 0 20rpx;
			box-sizing: border-box;

			text:nth-of-type(1) {
				color: rgb(166, 166, 166);
			}

			text:nth-of-type(2) {
				color: rgb(161, 0, 0);
			}

			text {
				font-size: 24rpx;
			}
		}

		// 上传身份件照
		.identity {
			.idCard-box {
				margin-top: 20rpx;
				width: 100%;
				display: flex;
				background-color: #fff;
				padding: 30rpx;
				box-sizing: border-box;
				border-radius: 10rpx;

				.positive {
					flex: 1;
					height: 200rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border: 1px dashed #ccc;
					margin-right: 20rpx;

					image {
						width: 70%;
						height: 80%;
					}
				}

				.reverse {
					flex: 1;
					height: 200rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border: 1px dashed #ccc;

					image {
						width: 70%;
						height: 80%;
					}
				}
			}
		}

		// 添加紧急联系人
		.emergency_contact {
			width: 100%;
			background-color: #fff;
			margin-top: 30rpx;
			padding: 20rpx 30rpx;
			box-sizing: border-box;
			border-radius: 10rpx;

			.name:nth-of-type(3) {
				border: 0;
			}

			.name {
				display: flex;
				// justify-content: space-between;
				height: 80rpx;
				line-height: 80rpx;
				border-bottom: 1px solid #ccc;

				.jinj {
					width: 160rpx;
				}

				input {
					height: 80rpx;
					line-height: 80rpx;
					font-size: 11px;
					width: 45%;
					margin-left: 80rpx;
				}

				.lianx {
					width: 100%;
					display: flex;
					justify-content: space-between;
					margin-left: 80rpx;

					text {
						margin-right: 80rpx;
					}
				}
			}

			.addname {
				a {
					text-decoration: none;
					width: 100%;
					display: flex;
					margin-top: 24rpx;
					color: rgba(255, 87, 51, 1);

					.add {
						width: 14px;
						height: 14px;
						line-height: 14px;
						opacity: 1;
						background: rgba(255, 87, 51, 1);
						color: #fff;
						border-radius: 50%;
						text-align: center;
						font-size: 30rpx;
						margin-right: 14rpx;
					}
				}
			}

			.names {
				display: flex;
				// justify-content: space-between;
				height: 80rpx;
				line-height: 80rpx;
				border-bottom: 1px solid #ccc;

				input {
					height: 80rpx;
					line-height: 80rpx;
					font-size: 11px;
					width: 45%;
					margin-left: 80rpx;
				}

				.lianx {
					display: flex;

					text {
						margin-right: 20rpx;
					}
				}
			}
		}

		// 常用邮箱
		.cye_mail {
			width: 100%;
			background-color: #fff;
			border-radius: 10rpx;
			margin-top: 30rpx;
			padding: 20rpx 30rpx;
			box-sizing: border-box;

			.email {
				display: flex;
				height: 80rpx;
				line-height: 80rpx;
				border-bottom: 1px solid #ccc;

				input {
					height: 80rpx;
					line-height: 80rpx;
					font-size: 11px;
					width: 45%;
					margin-left: 100rpx;
				}
			}

			.bz {
				color: rgba(166, 166, 166, 1);
				margin-top: 15rpx;
				display: block;
			}
		}

		// 常用手机号
		.commontel {
			width: 100%;
			background-color: #fff;
			border-radius: 10rpx;
			margin-top: 30rpx;
			padding: 20rpx 30rpx;
			box-sizing: border-box;

			.email {
				display: flex;
				height: 80rpx;
				line-height: 80rpx;
				border-bottom: 1px solid #ccc;

				input {
					height: 80rpx;
					line-height: 80rpx;
					font-size: 11px;
					width: 45%;
					margin-left: 80rpx;
				}
			}

			.bz {
				color: rgba(166, 166, 166, 1);
				margin-top: 15rpx;
				display: block;
			}
		}

		// 确定按钮
		.btntrue {
			text-decoration: none;
			color: #fff;
			display: block;
			width: 100%;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			border-radius: 17px;
			background: rgba(255, 141, 26, 1);
			margin-top: 176rpx;
		}
	}
</style>