<template>
	<view>
		<view class="top">
			<image @click="goBack" class="back" :src="'/static/my/exit-icon.png'"></image>
			<view class="title">信息修改</view>
			<span class="empty"></span>
		</view>
		<view class="container">
			<view class="ui-all">
				
				<view class="avatar" @tap="avatarChoose">	
					<view class="imgAvatar">
						<view class="iavatar" :style="'background: url('+avatar+') no-repeat center/cover #eeeeee;'"></view>
						
					</view>	
					<text>修改头像</text>
					<button v-if="!avatar" open-type="getUserInfo" @tap="getUserInfo" class="getInfo"></button>
				</view>
				<view class="ui-list">
					<text>用户名</text>
					<input type="text" placeholder="请填写用户名" :value="nickName" @input="bindnickName"
						placeholder-class="place" />
				</view>
				<view class="ui-list">
					<text>手机号</text>
					<input type="tel" placeholder="请填写手机号" :value="mobile" @input="bindmobile"
						placeholder-class="place" />
					<!-- <button v-if="!mobile" open-type="getPhoneNumber" @getphonenumber="getphonenumber" class="getInfo bun">授权手机号</button> -->
				</view>
				<view class="ui-list right">
					<text>性别</text>
					<picker @change="bindPickerChange" mode='selector' range-key="name" :value="index1" :range="selectSex">
						<view class="picker">
							{{selectSex[index1].name}}
						</view>
					</picker>
				</view>
				<view class="ui-list right">
					<text>学校</text>
					<picker @change="bindSchoolChange" mode='selector' range-key="name" :value="index2" :range="school">
						<view class="picker">
							{{school[index2].name}}
						</view>
					</picker>
				</view>
				<button class="save" @tap="savaInfo">保 存 修 改</button>
			</view>
			
		</view>
	</view>
</template>

<script>
	
	export default {
		
		data() {
			return {
				selectSex: [{
					id: 1,
					name: '男'
				}, {
					id: 2,
					name: '女'
				}],
				index1: '0',
				school: [{
					id: 1,
					name: '福州大学'
				}, {
					id: 2,
					name: 'xx大学'
				}],
				index2: '0',
				avatar: '',
				schoolName:'',
				nickName: '',
				mobile: '',
				userId:'',
				sex:'',
			}

		},
		methods: {
			bindPickerChange(e) {
				this.index1 = e.detail.value;

			},
			bindSchoolChange(e) {
				this.index2 = e.detail.value;

			},
			bindnickName(e) {
				this.nickName = e.detail.value;

			},
			bindmobile(e) {
				this.mobile = e.detail.value;

			},
			
			avatarChoose() {
				let that = this;
				uniCloud.chooseAndUploadFile({
					type: 'image',
					success(res) {
						that.avatar = res["tempFiles"][0]["url"];
						//console.log(res);
						//console.log(this.avatar);
					},
					fail() {},
					complete() {}
				});
			},
			// avatarChoose() {
			// 	let that = this;
			// 	uni.chooseImage({
			// 		count: 1,
			// 		sizeType: ['original', 'compressed'],
			// 		sourceType: ['album', 'camera'],
			// 		success: function(res) {
			// 			var tempFilePaths = res.tempFilePaths;
			// 			pathToBase64(tempFilePaths[0]) //图像转base64工具
			// 				.then(base64 => {

			// 					that.avatar = base64;
			// 					//将文件转化为base64并显示
			// 					// that.avatarUpload(base64);		//同时将头像上传至数据库进行存储
			// 				}).catch(error => {
			// 					console.error(error)
			// 				})
			// 		}
			// 	});

			// },

			getUserInfo() {
				uni.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {
						console.log(res);
						uni.showToast({
							title: '已授权',
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			// getphonenumber(e) {
			// 	if (e.detail.iv) {
			// 		console.log(e.detail.iv) //传后台解密换取手机号
			// 		uni.showToast({
			// 			title: '已授权',
			// 			icon: 'none',
			// 			duration: 2000
			// 		})
			// 	}
			// },
			savaInfo() {
				uni.showModal({
					title: '温馨提示', //提示标题
					content: '确认修改你的个人信息吗', //提示内容
					showCancel: true, //是否显示取消按钮
					success: res => {
						if (res.confirm) { //confirm为ture，代表用户点击确定
							let that = this;
							let gender = that.selectSex[that.index1].name;
							let school = that.school[that.index2].name;
							let nickname = that.nickName;
							let mobile = that.mobile;
							let headimg = that.avatar;
							let updata = {};
							if (!nickname) {
								uni.showToast({
									title: '请填写昵称',
									icon: 'none',
									duration: 2000
								});
								return;
							}
							updata.nickname = nickname;
							if (!headimg) {
								headimg = that.avater;
							}
							updata.headimg = headimg;
							updata.gender = gender;
							updata.school = school;
							if (that.isPoneAvailable(mobile)) {
								updata.mobile = mobile;
							} else {
								uni.showToast({
									title: '手机号码有误，请重填',
									icon: 'none',
									duration: 2000
								});
								return;
							}
							this.Upload(updata);
							getApp().globalData.icon=updata.headimg;
							getApp().globalData.name=updata.nickname;
							getApp().globalData.moblie=updata.mobile;
							getApp().globalData.gender=updata.gender;
							getApp().globalData.school=updata.school;
							uni.navigateBack({
								delta: 1, //返回层数，2则上上页
							})
							// that.updata(updata);
						} else if (res.cancel) { //cancel为ture，代表用户点击取消
							console.log('点击了取消按钮');
						}
					}
				})

			},

			isPoneAvailable(poneInput) {
				var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
				if (!myreg.test(poneInput)) {
					return false;
				} else {
					return true;
				}
			},
			// async updata(datas) {
			// 	//传后台

			// },
			// imgUpload(file) {
			// 	let that = this;
			// 	uni.uploadFile({
			// 		header: {
			// 			Authorization: uni.getStorageSync('token')
			// 		},
			// 		url: '/api/upload/image', //需传后台图片上传接口
			// 		filePath: file[0],
			// 		name: 'file',
			// 		formData: {
			// 			type: 'user_headimg'
			// 		},
			// 		success: function(res) {
			// 			var data = JSON.parse(res.data);
			// 			data = data.data;
			// 			that.avater = that.url + data.img;

			// 			that.headimg = that.url + data.img;

			// 		},
			// 		fail: function(error) {
			// 			console.log(error);
			// 		}
			// 	});
			// },
			goBack() {
				uni.navigateBack({
					delta: 1, //返回层数，2则上上页
				})
			},
			Upload(updata) {
				
				uniCloud.callFunction({
					name: 'fe-my-modifyinformation',
					data: {userId:this.userId,icon:updata.headimg,username:updata.nickname,school:updata.school,phone:updata.mobile,gender:updata.gender}
				})
				.then(res => {
					console.log(res);
				});	
									
			},
		},
		onLoad() {
			
			plus.navigator.setStatusBarBackground('#EDEEF0');
			this.nickName=getApp().globalData.name;
			this.userId=getApp().globalData.userId;
			this.avatar=getApp().globalData.icon;
			this.mobile=getApp().globalData.moblie;
			this.gender=getApp().globalData.gender;
			this.schoolName=getApp().globalData.school;
			//this.getData();
		}

	}
</script>

<style lang="less">
	.container {
		position: absolute;
		width: 100%;
		height: 100%;
		display: block;
	}

	.top {
		width: 100%;
		height: 50px;
		background-color: #EDEEF0;
		text-align: center;
	}

	.back {
		width: 40px;
		height: 30px;
		margin-top: 10px;
		margin-bottom: 10px;
		float: left;
		margin-left: 10px;
	}

	.empty {
		width: 40px;
		height: 30px;
		margin-top: 10px;
		margin-bottom: 10px;
		float: right;
		margin-right: 10px;
	}

	.title {
		font-size: 20px;
		margin-top: 10px;
		font-weight: bold;
		color: #f1992d;
		display: inline-block;
	}

	.ui-all {
		// padding: 20rpx 40rpx;
		margin-top: 20rpx;
		margin-left: 40rpx;
		margin-right: 40rpx;

		.avatar {
			width: 100%;
			text-align: left;
			padding: 20rpx 0;
			border-bottom: solid 1px #f2f2f2;
			position: relative;

			.imgAvatar {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				display: inline-block;
				vertical-align: middle;
				overflow: hidden;

				.iavatar {
					width: 100%;
					height: 100%;
					display: block;
				}
			}

			text {
				display: inline-block;
				vertical-align: middle;
				color: #8e8e93;
				font-size: 28rpx;
				margin-left: 40rpx;
			}

			&:after {
				content: ' ';
				width: 20rpx;
				height: 20rpx;
				border-top: solid 1px #030303;
				border-right: solid 1px #030303;
				transform: rotate(45deg);
				-ms-transform: rotate(45deg);
				/* IE 9 */
				-moz-transform: rotate(45deg);
				/* Firefox */
				-webkit-transform: rotate(45deg);
				/* Safari 和 Chrome */
				-o-transform: rotate(45deg);
				position: absolute;
				top: 85rpx;
				right: 0;
			}
		}

		.ui-list {
			width: 100%;
			text-align: left;
			padding: 20rpx 0;
			border-bottom: solid 1px #f2f2f2;
			position: relative;

			text {
				color: #4a4a4a;
				font-size: 28rpx;
				display: inline-block;
				vertical-align: middle;
				min-width: 150rpx;
			}

			input {
				color: #030303;
				font-size: 30rpx;
				display: inline-block;
				vertical-align: middle;
			}

			button {
				color: #030303;
				font-size: 30rpx;
				display: inline-block;
				vertical-align: middle;
				background: none;
				margin: 0;
				padding: 0;

				&::after {
					display: none;
				}
			}

			picker {
				width: 90%;
				color: #030303;
				font-size: 30rpx;
				display: inline-block;
				vertical-align: middle;
				position: absolute;
				top: 30rpx;
				left: 150rpx;
			}

			textarea {
				color: #030303;
				font-size: 30rpx;
				vertical-align: middle;
				height: 150rpx;
				width: 100%;
				margin-top: 50rpx;
			}

			.place {
				color: #999999;
				font-size: 28rpx;
			}
		}

		.right:after {
			content: ' ';
			width: 20rpx;
			height: 20rpx;
			border-top: solid 1px #030303;
			border-right: solid 1px #030303;
			transform: rotate(45deg);
			-ms-transform: rotate(45deg);
			/* IE 9 */
			-moz-transform: rotate(45deg);
			/* Firefox */
			-webkit-transform: rotate(45deg);
			/* Safari 和 Chrome */
			-o-transform: rotate(45deg);
			position: absolute;
			top: 40rpx;
			right: 0;
		}

		.save {
			background: #F1992D;
			border: none;
			color: #ffffff;
			margin-top: 40rpx;
			font-size: 28rpx;
		}
	}
</style>