<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">{{userMes.tel}}</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="userMes.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">{{userMes.nickname}}</text>
			</view>
			<view class="per_list per_list_arrow" @click="passwordShow = true">
				<text class="biaoti">修改密码</text>
			</view>
			<view class="per_list per_list_arrow" @click="ageShow = true">
				<text class="biaoti">年龄</text>
				<text class="neirong">{{userMes.age}}</text>
			</view>
			<view class="per_list per_list_arrow" @click="sexShow = true">
				<text class="biaoti">性别</text>
				<text class="neirong" v-if="userMes.sex==1">男</text>
				<text class="neirong" v-if="userMes.sex==0">女</text>
			</view>
		</view>

		<!-- 头像 -->
		<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="passwordShow=false">
			<view class="tanchu">
				<view class="dp_title">请修改密码</view>
				<u--input v-model="userMes.password" placeholder="请输入新密码" :password="true" border="surround" clearable>
				</u--input>
				<u--input v-model="userMes.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="passwordShow=false" 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';
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				playData:{},
				userMes: {
					id: '',
					age: '',
					sex: '',
					nickname: '',
					tel: '',
					password: '',
					Repassword: '',
					oldName:'',  // 老的用户名
				},
				avatarShow: false,
				nicknameShow: false,
				ageShow: false,
				sexShow: false,
				passwordShow: false,
				fileAvatar: [],
				sexList: [{
						title: '男',
						id: 1,
					},
					{
						title: '女',
						id: 0,
					}
				],
			};
		},
		//第一次加载
		onLoad(e) {
			// 隐藏原生的tabbar
			uni.hideTabBar();
		},
		computed: {
			...mapState(['userInfo'])
		},
		//页面显示
		onShow() {
			// 隐藏原生的tabbar
			uni.hideTabBar();
			this.getData();
		},
		components:{
			musicPlay	
		},
		//方法
		methods: {
			// 获取
			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
						});
				}
			},

			// 头像
			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() {
				let that = this
				if (that.userMes.Repassword == '' || that.userMes.password == '') {
					uni.showToast({
						icon: "none",
						title: "请输入密码！"
					});
					return
				}
				if (that.userMes.Repassword != that.userMes.password) {
					uni.showToast({
						icon: "none",
						title: "两次密码输入不一致！"
					});
					return
				}
				that.choseData()
				that.passwordShow = false
			},

			// 修改个人资料
			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) {
						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;
			}



		}

		.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;  
		}
	}
	.submit{
		
	}
</style>
