<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<z-nav-bar title="个人资料"></z-nav-bar>
		<view class="tabulate">
			<view class="per_list">
				<text class="biaoti">手机号</text>
				<text class="neirong">{{userMsage.tel}}</text>
				<text class="marPer" v-if="!userMsage.tel" @click="phoneShow = true;OpenClear()"
					style="background-color: #ed901d;">点击绑定</text>
			</view>
			<view class="per_list">
				<text class="biaoti">邮箱</text>
				<text class="neirong">{{userMsage.email}}</text>
				<text class="marPer" v-if="!userMsage.email" @click="emailShow = true;OpenClear()"
					style="background-color: #ed901d;">点击绑定</text>
			</view>
			<view class="per_list per_list_arrow" @click="avatarShow = true">
				<text class="biaoti" style="margin-top: 40rpx;">头像</text>
				<text class="neirong" style="margin-top: 0;">
					<image :src="userMsage.avatar" class="per_mes_img"></image>
				</text>
			</view>
			<view class="per_list per_list_arrow" @click="nicknameShow = true">
				<text class="biaoti">昵称</text>
				<text class="neirong">{{userMsage.nickname}}</text>
			</view>
			<view class="per_list per_list_arrow" @click="passwordShow = true">
				<text class="biaoti">密码</text>
				<text v-if="userMsage.YNpass!=''" class="neirong">点击修改</text>
				<text class="marPer" v-if="userMsage.YNpass!=''"
					style="background-color: #92c78c;margin-right: 40rpx;">已设定</text>
				<text v-if="userMsage.YNpass==''" class="neirong">去设置</text>
				<text class="marPer" v-if="userMsage.YNpass==''"
					style="background-color: #9d9d9d;margin-right: 40rpx;">未设定</text>

			</view>
			<view class="per_list per_list_arrow" @click="ageShow = true">
				<text class="biaoti">年龄</text>
				<text class="neirong">{{userMsage.age}}</text>
			</view>
			<view class="per_list per_list_arrow" @click="sexShow = true">
				<text class="biaoti">性别</text>
				<text class="neirong" v-if="userMsage.sex==1">男</text>
				<text class="neirong" v-if="userMsage.sex==0">女</text>
			</view>
		</view>

		<!-- 手机 -->
		<u-popup :show="phoneShow" :round="10" @close="phoneShow=false;">
			<view class="tanchu">
				<view class="dp_title">请输入手机号</view>
				<view style="display: flex;">
					<view class="quhao">
						<uni-data-select class="quhaoSel" placeholder="请选择区号" v-model="userMes.quCode"
							:localdata="quCodeList"></uni-data-select>
					</view> <u--input v-model="userMes.phone" placeholder="请输入手机号" border="surround" clearable>
					</u--input>

				</view>
				<view style="display: flex;">
					<u--input v-model="userMes.phonecode" type="number" placeholder="请输入验证码" border="surround" clearable
						style="margin-top: 20rpx;">
					</u--input>
					<button class="emPHCode" @click="onSetCode('phone')">{{ PhoneEmailNote }}</button>
				</view>
				<u-button color="linear-gradient(to right, #72d386, #317e42)" text="确定" @click="chosePhone()"
					style="margin-top: 50rpx;"></u-button>
				<view @click="phoneShow=false" class="dp_canBtn">
					取消</view>
			</view>
		</u-popup>

		<!-- 邮箱 -->
		<u-popup :show="emailShow" :round="10" @close="emailShow=false;PhoneEmailNote = '获取验证码'">
			<view class="tanchu">
				<view class="dp_title">请输入邮箱</view>
				<u--input v-model="userMes.email" placeholder="请输入邮箱" border="surround" clearable>
				</u--input>
				<view style="display: flex;">
					<u--input v-model="userMes.emailcode" type="number" placeholder="请输入验证码" border="surround" clearable
						style="margin-top: 20rpx;">
					</u--input>
					<button class="emPHCode" @click="onSetCode('email')">{{ PhoneEmailNote }}</button>
				</view>
				<u-button color="linear-gradient(to right, #72d386, #317e42)" text="确定" @click="choseEmail()"
					style="margin-top: 50rpx;"></u-button>
				<view @click="emailShow=false" class="dp_canBtn">
					取消</view>
			</view>
		</u-popup>

		<!-- 头像 -->
		<u-popup :show="avatarShow" :round="10" @close="avatarShow=false">
			<view class="tanchu">
				<view class="dp_title">请更换头像</view>
				<u-upload :fileList="fileAvatar" @afterRead="afterRead" @delete="deletePic" multiple :maxCount="1"
					width="150" height="150" :previewFullImage="true">
				</u-upload>
				<u-button color="linear-gradient(to right, #72d386, #317e42)" text="确定" @click="choseAvatar()"
					style="margin-top: 50rpx;"></u-button>
				<view @click="avatarShow=false" class="dp_canBtn">取消</view>
			</view>
		</u-popup>

		<!-- 昵称 -->
		<u-popup :show="nicknameShow" :round="10" @close="nicknameShow=false">
			<view class="tanchu">
				<view class="dp_title">请输入昵称</view>
				<u--input v-model="userMes.nickname" placeholder="请输入昵称" border="surround" clearable></u--input>
				<u-button color="linear-gradient(to right, #72d386, #317e42)" text="确定"
					@click="choseNickname(userMes.nickname)" style="margin-top: 50rpx;"></u-button>
				<view @click="nicknameShow=false" class="dp_canBtn">取消</view>
			</view>
		</u-popup>


		<!-- 年龄 -->
		<u-popup :show="ageShow" :round="10" @close="ageShow=false">
			<view class="tanchu">
				<view class="dp_title">请输入年龄</view>
				<u--input v-model="userMes.age" type="number" placeholder="请输入年龄" border="surround" clearable>
				</u--input>
				<u-button color="linear-gradient(to right, #72d386, #317e42)" text="确定" @click="choseAge()"
					style="margin-top: 50rpx;"></u-button>
				<view @click="ageShow=false" class="dp_canBtn">
					取消</view>
			</view>
		</u-popup>

		<!-- 性别 -->
		<u-popup :show="sexShow" :round="10" @close="sexShow=false">
			<view class="tanchu">
				<view class="dp_title">请选择性别</view>
				<u-radio-group v-model="userMes.sex">
					<view style="width: 100%;">
						<view v-for="(item, index) in sexList" @click="choseSex(item.id)" class="dp_sex">
							{{item.title}}
							<u-radio :key="index" activeColor="#54a966" :name='item.id'
								style="float: right;margin-top: 5rpx;" @change="choseSex(item.id)"></u-radio>
						</view>
					</view>
				</u-radio-group>
				<view @click="sexShow=false" class="dp_canBtn">取消</view>
			</view>
		</u-popup>

		<!-- 密码 -->
		<u-popup :show="passwordShow" :round="10" @close="cancelPass">
			<view class="tanchu">
				<view class="dp_title">请修改密码</view>
				<u--input maxlength="8" v-model="userMiMa.password" placeholder="请输入新密码" :password="true"
					border="surround" clearable @input="inputMethod(userMiMa.password)">
				</u--input>
				<view class="" style="font-size: 28rpx; color: #999;">
					<p v-if="passNote != ''">{{passNote}}</p>
					<p v-html="passStr" style="margin-top: 10rpx;"></p>
				</view>
				<u--input maxlength="8" v-model="userMiMa.Repassword" placeholder="请再确认密码" :password="true"
					border="surround" clearable style="margin-top: 20rpx;"></u--input>
				<u-button color="linear-gradient(to right, #72d386, #317e42)" text="确定" @click="chosePassword()"
					style="margin-top: 50rpx;"></u-button>
				<view @click="cancelPass" class="dp_canBtn">取消</view>
			</view>
		</u-popup>
		<!-- <view class="btn_box">
			<button @click="chosePassword" class="active">登 录</button>
		</view> -->
		<music-play :playData="playData"></music-play>
	</view>
</template>

<script>
	import musicPlay from '@/components/music.vue'
	import $http from '@/config/requestConfig.js';
	var clear;
	import {
		mapState
	} from 'vuex';
	// 密码验证的正则
	//1、密码为八位及以上并且字母数字特殊字符三项都包括
	var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
	//2、密码为八位及以上并且字母、数字、特殊字符三项中有两项，强度是中等
	var mediumRegex = new RegExp(
		"^(?=.{8,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))|((?=.*[a-z])(?=.*\\W))|((?=.*[0-9])(?=.*\\W))|((?=.*[A-Z])(?=.*\\W))).*$",
		"g");
	var enoughRegex = new RegExp("(?=.{8,}).*", "g");
	export default {
		data() {
			return {
				playData: {},
				userMes: {
					quCode: '',
					phone: '',
					email: '',
					id: '',
					age: '',
					sex: '',
					nickname: '',
					tel: '',
					oldName: '', // 老的用户名
				},
				userMsage: {
					quCode: '',
					phonecode: '',
					phone: '',
					emailcode: '',
					email: '',
					id: '',
					age: '',
					sex: '',
					nickname: '',
					tel: '',
					YNpass: '',
					oldName: '', // 老的用户名
				},
				userMiMa: {
					id: '',
					password: '',
					Repassword: '',
				},
				readonly: false,
				phoneShow: false,
				emailShow: false,
				avatarShow: false,
				nicknameShow: false,
				ageShow: false,
				sexShow: false,
				passwordShow: false,
				fileAvatar: [],
				quCodeList: [], // 国家区域码
				sexList: [{
						title: '男',
						id: 1,
					},
					{
						title: '女',
						id: 0,
					}
				],
				PhoneEmailNote: '获取验证码',
				passNote: '',
				passStr: '',
				passwordOk: false, // 密码是否满足规则
			};
		},
		//第一次加载
		onLoad(e) {
			// 隐藏原生的tabbar
			uni.hideTabBar();
		},
		computed: {
			...mapState(['userInfo'])
		},
		//页面显示
		onShow() {
			// 隐藏原生的tabbar
			uni.hideTabBar();
			this.getData();
			this.getCountyCode()
		},
		components: {
			musicPlay
		},
		//方法
		methods: {
			// 获取
			getCountyCode() {
				let that = this
				// 获取国家区域编码
				$http.request({
						url: "book/baseArea/getAllBaseArea",
						method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
						data: {},
						header: { //默认 无 说明：请求头
							'Content-Type': 'application/json'
						},
					})
					.then(res => {
						// console.log(res,'区域码')
						if (res.code == 0 && res.baseAreas.length > 0) {
							that.quCodeList = res.baseAreas.map(item => {
								let obj = {
									'text': item.title + ' (+' + item.code + ')',
									'value': item.code,
								}
								return obj
							})
						} else {
							that.quCodeList = []
						}
					}).catch(e => {
						console.log(e, 'e')
					});
			},
			getData() {
				let that = this

				// 获取个人信息
				if (this.userInfo.id != undefined) {
					this.$http
						.post('book/user/info/' + that.userInfo.id)
						.then(res => {
							that.userMes.id = res.user.id
							that.userMes.age = res.user.age
							that.userMes.sex = res.user.sex
							that.userMes.nickname = res.user.nickname
							that.userMes.tel = res.user.tel
							that.userMes.avatar = res.user.avatar
							that.userMes.oldName = that.userMes.nickname
							that.userMes.id = res.user.id
							that.userMsage.age = res.user.age
							that.userMsage.email = res.user.email
							that.userMsage.sex = res.user.sex
							that.userMsage.nickname = res.user.nickname
							that.userMsage.tel = res.user.tel
							that.userMsage.avatar = res.user.avatar
							that.userMsage.YNpass = res.user.password
							that.userMiMa.id = res.user.id
						});
				}



			},
			cancelPass() {
				this.passwordShow = false
				this.userMiMa.password = ''
				this.userMiMa.Repassword = ''
				this.passNote = ''
				this.passStr = ''
			},
			// 密码验证
			inputMethod(value) {
				this.passwordOk = false
				//	console.log('输入的值为：', value)
				if (strongRegex.test(value)) {
					//console.log('强密码-----',value)
					this.passStr = "<span style='color:#18bc37'>密码强度很不错哦！</span>"
					// this.passNote = '请至少使用大小写字母、数字、符号两种类型组合的密码，长度为8位。'
					this.passNote = ''
					this.passwordOk = true
				} else if (mediumRegex.test(value)) {
					//console.log('中等密码-----',value)
					this.passNote = '请至少使用大小写字母、数字、符号两种类型组合的密码，长度为8位。'
					this.passStr = "<span style='color:#2979ff'>密码强度中等!</span>"
					this.passwordOk = true
				} else if (enoughRegex.test(value)) {
					//console.log('弱密码-----',value)
					this.passStr = "<span style='color:#f3a73f'>密码强度太弱!</span>"
					this.passNote = '请至少使用大小写字母、数字、符号两种类型组合的密码，长度为8位。'
				} else {
					this.passwordOk = false
					this.passNote = '请至少使用大小写字母、数字、符号两种类型组合的密码，长度为8位。'
					this.passStr = ""
					//console.log('密码-----',value)				
				}
			},

			// 清除验证码
			OpenClear() {
				clearInterval(clear)
				this.PhoneEmailNote = '获取验证码';
				this.readonly = false;
			},

			// 获取验证码
			emPHCode() {
				clear && clearInterval(clear);
				this.readonly = true
				this.PhoneEmailNote = '60S';
				var s = 60;
				clear = setInterval(() => {
					s--;
					this.PhoneEmailNote = s + 'S';
					if (s <= 0) {
						clearInterval(clear);
						this.PhoneEmailNote = '获取验证码';
						this.readonly = false;
					}
				}, 1000);
			},


			// 发送验证码
			onSetCode(e) {
				if (this.readonly) {
					return;
				}
				if (e == 'phone') {
					if (!this.userMes.phone) {
						uni.showToast({
							title: '请输入手机号',
							icon: 'none'
						});
						return;
					}
					if (this.userMes.quCode == null || this.userMes.quCode == 86) {
						if (!this.$base.phoneRegular.test(this.userMes.phone)) {
							uni.showToast({
								title: '手机格式不正确',
								icon: 'none'
							});
							return;
						}
					}


					this.$http
						.get('book/user/sms/sendcode', {
							phone: this.userMes.phone,
							areaCode: this.userMes.quCode,
							type: 2000
						})
						.then(res => {
							uni.showToast({
								title: '验证码发送成功',
								icon: 'none'
							});
							this.emPHCode();
						});
				}
				if (e == 'email') {
					if (!this.userMes.email) {
						uni.showToast({
							title: '请输入邮箱',
							icon: 'none'
						});
						return;
					}
					if (!this.$base.mailRegular.test(this.userMes.email)) {
						uni.showToast({
							title: '邮箱格式不正确',
							icon: 'none'
						});
						return;
					}
					this.$http
						.get('book/user/getMailCaptcha', {
							email: this.userMes.email
						})
						.then(res => {
							uni.showToast({
								title: '验证码发送成功',
								icon: 'none'
							});
							this.emPHCode();
						});
				}
			},

			// 手机
			chosePhone(e) {
				this.userMes.code = this.userMes.phonecode
				if (this.userMes.email == '') {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return;
				}
				if (this.userMes.code == '' || this.userMes.code == null) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					});
					return;
				}
				$http.request({
					url: "book/user/updateUserTel",
					method: "POST",
					data: this.userMes,
					header: {
						'Content-Type': 'application/json'
					},
				}).then(function(res) {
					if (res.code == 0) {
						this.getData();
						this.phoneShow = false
						uni.showToast({
							title: "绑定手机号成功"
						});
					}
				}).catch(function(error) {
					console.log(error);
				});

			},

			// 邮箱
			choseEmail(e) {

				this.userMes.code = this.userMes.emailcode
				if (this.userMes.email == '') {
					uni.showToast({
						title: '请输入邮箱',
						icon: 'none'
					});
					return;
				}
				if (this.userMes.code == '' || this.userMes.code == null) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					});
					return;
				}
				$http.request({
					url: "book/user/updateUserEmail",
					method: "POST",
					data: this.userMes,
					header: {
						'Content-Type': 'application/json'
					},
				}).then(function(res) {
					if (res.code == 0) {
						this.getData();
						this.emailShow = false
						uni.showToast({
							title: "绑定邮箱成功"
						});
					}
				}).catch(function(error) {
					console.log(error);
				});
			},

			// 头像
			choseAvatar(e) {
				let that = this
				if (that.fileAvatar.length == 0) {
					uni.showToast({
						title: "请选择图片",
						icon: 'none'
					});
					return
				}
				that.userMes.avatar = that.fileAvatar[0].url
				that.choseData()
				that.avatarShow = false
				that.fileAvatar.splice(0, 1)
			},
			// 年龄
			choseAge(e) {
				let that = this
				if (that.userMes.age <= 0) {
					uni.showToast({
						title: "年龄不能小于0",
						icon: 'none'
					});
					return
				}
				that.choseData()
				that.ageShow = false
			},

			// 昵称
			choseNickname(e) {
				let that = this
				if (e && e != '') {
					that.choseData()
					that.nicknameShow = false
				} else {
					that.userMes.nickname = that.userMes.oldName
					console.log(that.userMes.nickname)
					uni.showToast({
						title: '昵称不可为空',
						icon: 'none'
					})
				}
			},

			// 性别
			choseSex(e) {
				let that = this
				that.userMes.sex = e
				that.choseData()
				that.sexShow = false
			},

			// 修改密码
			chosePassword() {
				if (!this.passwordOk) {
					console.log('不满足密码格式', this.passNote)
					uni.showToast({
						title: this.passNote,
						icon: 'none'
					})
					return
				}

				let that = this

				if (that.userMiMa.Repassword == '' || that.userMiMa.password == '') {
					uni.showToast({
						icon: "none",
						title: "请输入密码！"
					});
					return
				}
				if (that.userMiMa.Repassword != that.userMiMa.password) {
					uni.showToast({
						icon: "none",
						title: "两次密码输入不一致！"
					});
					return
				}

				$http.request({
					url: "book/user/updateUserPassword",
					method: "POST",
					data: that.userMiMa,
					header: {
						'Content-Type': 'application/json'
					},
				}).then(function(res) {
					if (res.code == 0) {
						uni.showToast({
							title: "修改成功"
						});
						that.passwordShow = false
					}
				}).catch(function(error) {
					console.log(error);
				});

			},

			// 修改个人资料
			choseData() {
				let that = this
				$http.request({
					url: "book/user/update",
					method: "POST",
					data: that.userMes,
					header: {
						'Content-Type': 'application/json'
					},
				}).then(function(res) {
					if (res.code == 0) {
						that.getData();
						// that.$forceUpdate()
						uni.showToast({
							title: "修改成功"
						});
					}
				}).catch(function(error) {
					console.log(error);
				});
			},


			// 头像上传
			afterRead(e) {
				let that = this
				uni.uploadFile({
					url: this.$baseUrl + 'oss/fileoss',
					filePath: e.file[0].url,
					name: 'file',
					formData: {},
					success: (res) => {
						that.fileAvatar.push({
							url: JSON.parse(res.data).url
						})
					}
				});
			},

			// 删除图片
			deletePic() {
				let that = this
				that.fileAvatar.splice(0, 1)
			},
		},
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	.btn_box {
		margin-top: 40rpx;
		padding: 10px;

		button {
			font-size: 32rpx;
			background-color: #e5e5e5;
			color: #fff;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 50rpx;

			&.active {
				@include theme('btn_bg') color: #fff;
			}
		}
	}

	.tabulate {
		.per_list {
			font-size: 30rpx;
			background-color: #fff;
			padding: 0;
			align-items: center;
			position: relative;
			border-top: 1px solid #e5e5e5;
			width: 100%;
			overflow: auto;


			text.biaoti {
				color: #333;
				display: inline-block;
				margin: 25rpx 0 25rpx 40rpx;
			}

			text.neirong {
				color: #888;
				font-weight: normal;
				float: right;
				margin: 25rpx 80rpx 0 0;
				display: block;
			}

			text.marPer {
				color: #fff;
				font-weight: normal;
				float: right;
				margin: 25rpx 0 0 0;
				display: block;
				border-radius: 10rpx;
				background-color: #eee;
				padding: 2rpx 10rpx;
			}



		}

		.per_list_arrow {
			font-size: 30rpx;
			background-color: #fff;
			padding: 0;
			align-items: center;
			position: relative;
			border-top: 1px solid #e5e5e5;
			width: 100%;
			overflow: auto;


			&:active {
				background-color: #f5f5f5;
			}

			&::after {
				content: '';
				position: absolute;
				right: 20upx;
				top: 50%;
				transform: translateY(-50%);
				width: 40upx;
				height: 40upx;
				background-image: url('../../static/icon/icon_right.png');
				background-position: center center;
				background-repeat: no-repeat;
				background-size: cover;
			}

			.per_mes_img {
				width: 100rpx;
				height: 100rpx;
				background-color: #fff;
				border-radius: 120rpx;
				margin: 10rpx 0;
			}
		}
	}

	.tanchu {
		padding: 60rpx 50rpx 80rpx 50rpx;

		.dp_title {
			font-size: 32rpx;
			margin-bottom: 50rpx;
			color: #555;
			text-align: center;
			font-weight: bold;
		}

		.dp_sex {
			font-size: 30rpx;
			padding-bottom: 20rpx;
			margin-bottom: 20rpx;
			border-bottom: 1px solid #ededed;

			image {
				width: 40rpx;
				height: 40rpx;
				display: inline-block;
				margin-right: 20rpx;
				vertical-align: bottom;
			}
		}

		.dp_canBtn {
			text-align: center;
			font-size: 28rpx;
			margin-top: 25rpx;
			color: #888;
		}

		.emPHCode {
			height: 80rpx;
			width: 200rpx;
			background-color: #f8f9fb;
			font-size: 28rpx;
			padding: 0 14rpx;
			color: #54a966;
			line-height: 80rpx;
			margin: 20rpx 0 0 20rpx;
			display: inline-block;
		}

		.quhao {
			height: 60rpx;
			width: 240rpx;
			margin: 1rpx 15rpx 0 0;

			.quhaoSel {

				/deep/.uni-select {
					font-size: 24rpx;
				}

				/deep/.uni-select__selector-item {
					font-size: 24rpx;
				}

				/deep/.uni-stat__select {
					height: 60rpx;
				}
			}

		}

	}
</style>