<template>
	<view class="content">
		<view class="content-top">
					<view class='hs-box'>
						<view class='hs-row user-head'>
							<view class='hs-row-hd' style="font-size: 32rpx;">
								头像
							</view>
							<view class='hs-row-ft flex-center'>
								<!-- <button class="avatar-wrapper" open-type="chooseAvatar" :disabled="disabled" @chooseavatar="onChooseAvatar">
								    <image class="avatar  user-head-img" :src="avatar" mode="aspectFill"></image>
								</button> -->
								<image @click="uploadImg" class="avatar  user-head-img" :src="avatar" mode="aspectFill"></image>
								<u-icon name="arrow-right" color="#282F38" size="14" style="margin-left: 19rpx;"></u-icon>
							</view>
						</view>
						<view style="margin-top: 17rpx;" class="infoBox">
							<view class='hs-list flex-between'>
								<view class='hs-list-hd'  style="width: 80px;">昵称</view>
								<view class="flex-center">
									<view class="hs-list-right">{{nickname}}</view> 
									<view class="updateBtn" @click="pop4Show = !pop4Show">修改</view>
								</view>
								<!-- <view class='hs-list-na'>
									<input type="nickname" class="weui-input" v-model="nickname" :disabled="disabled" name="nickname" placeholder="请输入昵称" @blur="getnicheng" ></input>
								</view> -->
							</view> 
							<!-- <view class='hs-list flex-between'>
								<view class='hs-list-hd'  style="width: 80px;">手机号</view>
								 
								<view class='hs-list-na flex-center'>
									{{userinfo.mobile}}
									<u-icon name="arrow-right" color="#282F38" size="14" style="margin-left: 19rpx;"></u-icon>
								</view>
							</view> -->
							<view class='hs-list flex-between' @click="linkDetail('about')">
								<view class='hs-list-hd'  style="width: 80px;">关于我们</view>
								 
								<u-icon name="arrow-right" color="#282F38" size="14" style="margin-left: 19rpx;"></u-icon>
							</view> 
							<view class='hs-list flex-between' @click="linkDetail('userProt')">
								<view class='hs-list-hd'  style="width: 80px;">用户协议</view>
								 
								<u-icon name="arrow-right" color="#282F38" size="14" style="margin-left: 19rpx;"></u-icon>
							</view> 
							<view class='hs-list flex-between' @click="linkDetail('privacy')">
								<view class='hs-list-hd'  style="width: 80px;">隐私政策</view>
								 
								<u-icon name="arrow-right" color="#282F38" size="14" style="margin-left: 19rpx;"></u-icon>
							</view> 
						</view>
						<view class="escLogin" @click="escLogin">退出登录</view>
					</view>
				</view>
		  <img-upload ref="imgLoad" @imgList="imgList" style="width: 300rpx;height: 190rpx;display: none;">
		  </img-upload>
		<!-- <view class="button-bottom"> 
			<button class="btn btn-success" @click="toAdd()"  >保存</button>
		</view> -->
		<u-popup :show="pop4Show" @close="pop4Show = false" mode="center" :round="30">
			  <view class="pop4Box">
				  <view class="flex-between" style="padding: 51rpx 55rpx 0;">
					  <text class="pop4Title">修改昵称</text>
					  <u-icon @click="pop4Show = false" name="close" color="#333333" size="16" bold></u-icon>
				  </view>
				  <view class="flex-center" style="margin-top: 39rpx;padding: 0 50rpx;">
					  <view style="width: 100rpx;">昵称：</view>
					  <input v-model="newnickname" placeholder="请填写昵称" class="pop4Input" style="background: #EFEFEF;border: none" />
				  </view>
				  
				  <view class="flex-center" style="margin-top: 55rpx;">
				  	<view class="pop4Btn1" @click="pop4Show = false">取消</view>
				  	<view class="pop4Btn2" @click="conformChangeOrder">确认</view>
				  </view>
			  </view>
		</u-popup>
	</view>
</template>


<script>  
	import imgUpload from '@/components/imgUpload.vue'
	export default { 
		data() {
			return { 
				userinfo:{},
				headflag:false, 
				nickname:'微信用户', 
				newnickname: '',
				avatar:'', 
				pop4Show: false
			}
		},
		components:{ 
			imgUpload
		},
		onLoad() { 
			// this.getAgreement()
		},
		onShow() {
			var token = uni.getStorageSync('userToken');  
			if (!token) {
				return false;
			} 
			this.getauth()
		},
		methods: {
			conformChangeOrder(){
				this.$api.editperson({
						nickname: this.newnickname
				},res=>{
					if(res.code == '1'){
						this.nickname = this.newnickname
						uni.showToast({ title: res.msg , icon: 'success' })
					}else{ 
						uni.showToast({ title: res.msg , icon: 'none' })
					}
				})
			},
			uploadImg() {
				// this.$refs.uniUpload.open(); // 调用组件的open方法来触发文件选择和上传
				this.$refs.imgLoad.openUpload()
			},
			imgList(res){
				console.log(res,'hhhhhhhhh')
				// this.$api.edituser({
				this.$api.editperson({
					avatar: res
				},res=>{
					if(res.code == '1'){
						this.avatar = this.path + res;
						uni.showToast({ title: res.msg , icon: 'success' })
					}else{ 
						uni.showToast({ title: res.msg , icon: 'fail' })
					}
				})
			},
			escLogin(){
				this.$api.escLogin({},res=>{
					if(res.code == '1'){   
						uni.removeStorageSync('userToken')
						uni.showToast({ title: res.msg , icon: 'success' })
						setTimeout(()=>{
							uni.redirectTo({
							    url: '/pages/login/login'
							});
							// uni.navigateBack({
							//   delta: 1
							// })
						}, 2000)
					}else{ 
						uni.showToast({ title: res.msg , icon: 'fail' })
					}
				})
			},
			linkDetail(type){
				uni.navigateTo({
					url: '/pages/mine/detail?type='+type
				}) 
			},
			// getAgreement(){
			// 	var _this = this;
			// 	_this.$api.agreementInfo({},res=>{
			// 		if(res.code == '1'){ 
			// 			console.log(res.data)
			// 			// if(res.data.user.avatar){
			// 			// 	_this.avatar = res.data.user.avatar
			// 			// } 
			// 			_this.nickname = res.data.user.nickname
			// 			_this.userinfo = res.data.user
			// 		}else{ 
			// 		}
			// 	})
			// },
			getnicheng({detail}){
				this.nickname = detail.value ;
			},  
			getauth(){
				var _this = this;
				_this.$api.userInfo({},res=>{ 
					if(res.code == '1'){   
						if(res.data.user.avatar){
							_this.avatar = res.data.user.avatar
						} 
						_this.nickname = res.data.user.nickname
						_this.newnickname = res.data.user.nickname
						_this.userinfo = res.data.user
					}else{ 
					}
				})
			},   
			getinfo(){
				var token = uni.getStorageSync('userToken');  
				if (token) {
					this.headflag = true 
					 
				}else{
					this.headflag = false
				}
			},  
			onChooseAvatar(e) { 
			    const { avatarUrl } = e.detail 
				this.edithead(avatarUrl  ); 
			},
			edithead(avatarUrl){ 
				var token =uni.getStorageSync('userToken');
				uni.uploadFile({
					url: this.$api.api_url + 'api/common/upload?token='+ token	,  
					filePath: avatarUrl,
					fileType: 'image',
					name: 'file',
					sizeType:['original','compressed'],
					headers: {
						'Accept': 'application/json',
						'Content-Type': 'multipart/form-data',
					},
					formData: {
						'method': 'images.upload',
						'upfile': avatarUrl
					},
					success: (res) => { 
						var res = JSON.parse(res.data);   
						  if(res.code == '1'){
							this.avatar = res.data.fullurl  
							uni.showToast({ title: res.msg , icon: 'success' })  
						}else{
							uni.showToast({ title: res.msg , icon: 'none' }) 
						}  
					},
					fail: (error) => {
						if (error && error.response) {
							uni.showToast({ title: error.response , icon: 'none' }) 
						}
					}, 
				}); 
			},
			toAdd(){ 
				if(this.avatar == '/static/img/t2.png' ){ 
					uni.showToast({ title: "请上传自己的头像" , icon: 'none' })  
					return false;
				}
				this.$api.edituser({
					avatar:this.avatar,
					nickname:this.nickname
				},res=>{ 
					if(res.code == '1'){
						 
						uni.showToast({ title: res.msg , icon: 'success' })  
						uni.navigateBack({
						  delta: 1
						})
						return false
					}else{
						uni.showToast({ title: res.msg , icon: 'none' }) 
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		height: 100%;
	}
	.content{
		padding: 38rpx 35rpx;
		background: #F5F5FA;
		height: 100%;
	}
	.hs-row{
		width: 100%;
		margin-left: 0;
		padding: 40rpx 45rpx 40rpx 69rpx;
		border-radius: 30rpx;
	}
.hs-row-ft	button{
		height: 144rpx;
		width: 144rpx;
		padding: 0;
		border-radius: 50%;background-color: #fff;line-height: 108px;
		 
	}
.hs-row-ft	button::after{
		border: none;
	}
	
		.user-head {
			height: 140rpx;
		}
	
		.user-head-img {
			height: 90upx;
			width: 90upx;
			border-radius: 50%;
		}
	 
	
		.hs-row-na {
			color: #666;
			font-size: 26upx;    text-align: right;    padding-right: 15px;
    width: 100%;
		}
	
		.hs-hd {
			width: 160rpx;
		}
	
		.down {
			top: 50%;
			transform: translateY(-50%);
		}
		.infoBox{
			background: #fff;
			border-radius: 30rpx;
			overflow: hidden;
			padding: 10rpx 0 10rpx;
		}
		.hs-list{
			// padding: 33rpx 45rpx;
			margin: 33rpx 45rpx 0;
			padding-bottom: 33rpx;
			border-bottom: 1px solid #DEDEDE;
			overflow: hidden;
		}
		.hs-list:last-child{
			border-bottom: none;
		}
	.escLogin{
		padding: 40rpx 0;
		border-radius: 30rpx;
		background: #fff;
		text-align: center;
		font-weight: 500;
		font-size: 30rpx;
		color: #282F38;
		margin-top: 20rpx;
	}
	
	.updateBtn{
		height: 60rpx;
		line-height: 60rpx;
		border: 1rpx solid #F5F5FA;
		background: #F5F5FA;
		border-radius: 10rpx;
		padding: 0 16rpx;
		margin-left: 20rpx;
		font-size: 26rpx;
	}
	.pop4Box{
		width: 640rpx;
		height: 380rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		.pop4Title{
			font-weight: bold;
			font-size: 36rpx;
			color: #000000;
		}
		.pop4Input{
			// width: 560rpx;
			flex: 1;
			// height: 173rpx;
			height: 70rpx;
			padding-left: 20rpx;
			background: #EFEFEF;
			border-radius: 7rpx;
			margin: 0rpx auto 0;
		}
		.pop4Btn1{
			width: 260rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: #F6F6F6;
			border-radius: 40rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			text-align: center;
		}
		.pop4Btn2{
			width: 260rpx;
			height: 80rpx;
			line-height: 80rpx;
			background: #FB7D06;
			border-radius: 40rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #fff;
			text-align: center;
			margin-left: 20rpx;
		}
	}
</style>