<template>
	<view class="container">
			
			
			<view class="form">
			<!--input box start-->
			    <view class='input_box'>
			      <view class='i_box_1'>头像</view>
			      <view class='i_box_2'></view>
			      <view class='i_box_3'>
			       
			      </view>
			      <view class='i_box_4'></view>
			        <view class='i_box_5'>
					  <view class="up"> 	
						  <view class="img">	
						  <u-upload
								   :fileList="uploadImg"
									@afterRead="afterRead"
									@delete="deletePic"
									name="avatar"
									width="26"
									height="26"
									:sizeType="['compressed']"
									:deletable="true"
									:maxCount="1"
									:previewFullImage="false"
							>
				
							</u-upload>
						 </view>
						 <view class="icon" @click="clearImg">
							<u-icon name="arrow-right" top="5"></u-icon>
						 </view>
					 </view>	 
			      </view>
			    </view>
		 <!--input box end-->
		 
		 
		 <!--input box start-->
		 			    <view class='input_box'>
		 			      <view class='i_box_1'>昵称</view>
		 			      <view class='i_box_2'></view>
		 			      <view class='i_box_3x'>
		 			       <u--input
		 			           placeholder="请输入昵称"
							   inputAlign="right"
							   border="none"
							   color="#999999"
							   maxlength="10"
		 			           v-model="info.nick_name"
							   @focus="showEdit"
		 			         ></u--input>
		 			      </view>
						 <view class='i_box_5'>
							 <view class="up">
							 		<view class="img">	
							 		</view>
							 		<view class="icon">
							 			<u-icon name="arrow-right" top="5"></u-icon>
							 		</view>
							 </view>	 
						 </view>
		 			    </view>
		 <!--input box end-->
		 
		 <!--input box start-->
		 			    <view class='input_box' @click="agreement">
		 			      <view class='i_box_1'>协议与说明</view>
		 			      <view class='i_box_2'></view>
		 			      <view class='i_box_3x'>
		 			      
		 			      </view>
		 						 <view class='i_box_5'>
		 							 <view class="up">
		 							 		<view class="img">	
		 							 		</view>
		 							 		<view class="icon" >
		 							 			<u-icon name="arrow-right" top="5"></u-icon>
		 							 		</view>
		 							 </view>	 
		 						 </view>
		 			    </view>
		 <!--input box end-->

			
		</view>	
		
		<view class="form" style="margin-top: 20rpx;" @click="logout">
			<!--input box start-->
						    <view class='input_box'>
						      <view class='i_box_1'>注销账号</view>
						      <view class='i_box_2'></view>
						      <view class='i_box_3x'>
						      
						      </view>
									 <view class='i_box_5'>
										 <view class="up">
										 		<view class="img">	
										 		</view>
										 		<view class="icon" >
										 			<u-icon name="arrow-right" top="5"></u-icon>
										 		</view>
										 </view>	 
									 </view>
						    </view>
			<!--input box end-->
		</view>	
		
		
		<u-popup :show="show" :round="10" mode="center" bgColor="transparent" @close="close" @open="open">
		            <view class="popupBox">
		                <view class="popupTop">
							协议与说明
						</view>
						<view class="popupDesc">
							<u-parse :content="content" :tagStyle="style"></u-parse>
							
						</view>
						<view class="popupBtn">
							<view class="sbtnBox a3" @click="yes">我了解啦</view>
						</view>
		            </view>
		</u-popup>
			
		<u-popup :show="name_show" :round="10" mode="center" bgColor="transparent" @close="close1" @open="open1">
		            <view class="popupBox">
		                <view class="popupTop">
						修改昵称
						</view>
						<view class="popupDesc1">
							<u--input
							    placeholder="请输入昵称"
								color="#999999"
								maxlength="10"
							    v-model="info.nick_name"
							  ></u--input>
							
						</view>
						<view class="popupBtn">
							<view class="sbtnBox1 a1" @click="close1">取消</view>
							<view class="sbtnBox1 a2" @click="nameChange">确认</view>
						</view>
		            </view>
		</u-popup>		
		
		
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				//form框
				   info: {
						 nick_name:'',
				         avatar:'',
			
				   },
				   uploadImg:  [],
				   //弹窗
				   show: false,
				   content:'',
				   style: {
				   			// 字符串的形式
				   			p: 'font-weight: 400;font-size: 28rpx;color: #555555;line-height: 60rpx;',
				   		
				   	 },
				  //修改
				  name_show:false,
				
			}
		},
		onShow(option) {
			var _this = this;
			_this.getUserInfo();
		
		},
		methods: {
			
			//获取用户信息
			getUserInfo()
			{
				var _this =this;
				var userInfo = _this.$user.session('userInfo');
				if(_this.$com.isNull(userInfo.nick_name) )
				{
					userInfo.nick_name = '微信用户';
				}
				if(_this.$com.isNull(userInfo.avatar))
				{
					userInfo.avatar = '/static/img/user/avatar.png';
					
					_this.uploadImg =[{url:userInfo.avatar}];
					_this.info = userInfo;
				}
				else
				{
					_this.uploadImg =[{url:_this.$api.ossurl(userInfo.avatar)}];
					_this.info = userInfo;
				}
				
				
				
			},
			// 删除图片
			deletePic(event) {
					var _this = this; 
					_this.uploadImg = [];
			},
						// 新增图片
			afterRead(event) {
				
				var _this = this
				console.log('event',event);	
				var edetail = event.file.thumb;
				if (edetail.indexOf('http://tmp') != -1 || edetail.indexOf('wxfile://tmp') != -1)
				{
					
					//上传
					var upData = {filePath:edetail,fileType:'image',scene:'user_small'};
					_this.$api.ossUpload(upData,function(res){
						console.log('ossUpload success',res);
						var d = res.data;
						_this.info.avatar = d.file_url;
						_this.uploadImg = [{url:_this.$api.ossurl(d.file_url)}];
						_this.updateUserInfo();
						
					},function(err){
						console.log('ossUpload fail',err);
					});
					
							
						
				}
		
			},
			//名称改变
			nameChange(e)
			{
				console.log(e);
				this.updateUserInfo();
				this.name_show = false;
			},
			//更新用户信息
			updateUserInfo()
			{
				var _this = this;
				var info = _this.info;
				if(_this.$com.isNull(info.avatar))
				{
					_this.$com.showError('用户头像必须');
					return;
				}
				if(_this.$com.isNull(info.nick_name))
				{
					_this.$com.showError('用户昵称必须');
					return;
				}
				var post = info;
				_this.$api.post('api/userInfoEdit', post,function(rs){
								  console.log(rs);
									
				});
			},
			//协议
		    agreement(){
				var _this = this;
				var post = {
					type:'user_protocol',
				};
				_this.$api.get('api/treatyInfo',post,function(rs){
					console.log('协议',rs);
					_this.content = rs.content;
					_this.show = true;
				},function(err){
					console.log(err);
				});
				
			},
			//注销
			logout()
			{
				uni.navigateTo({
					url:'/pages/user/account/logout'
				})
			},
			open() {
			   console.log('open');
			},
			close() {
			   this.show = false;
			
			},
			yes(){
				this.close();
			},
			showEdit(){
				var _this = this;
				_this.name_show = true;
			},
			open1() {
			   console.log('open');
			},
			close1() {
			   this.name_show = false;
			
			},
		}
	}
</script>

<style lang="scss">
.container{padding:10rpx 20rpx;}
.form{ padding:0rpx 20rpx;
background: #FFFFFF;
border-radius: 24rpx 24rpx 24rpx 24rpx;
}
/*form基本元素*/
/*input_box*/
.input_box{ display: flex;flex-direction:row;  height: 100rpx; line-height: 100rpx; 
border-radius: 15rpx; margin: 0rpx auto; color:#3D3D3D;}

.i_box_1{ width: 25%;height: 100rpx; font-size: 28rpx; text-align: left; }
.i_box_2{width: 0.3%;height: 80rpx;   margin-top: 10rpx;}
.i_box_3{ height: 100rpx;min-width: 49.4%; width: auto;font-size: 26rpx;}





/*特殊的 改变部分*/
.i_box_3x{height: 100rpx;min-width: 65.7%; width: auto;font-size: 26rpx;}
::v-deep .i_box_3x .u-input{ border:none !important; color:#3D3D3D !important; margin-top: 20rpx;}
.up{ width: 100%; height: auto; display: flex; margin-top: 20rpx;}
.up .img{width:80%; overflow: hidden; }
.up .img .u-upload{ margin-left: 80rpx;}
.up .icon{ width:20%;}
::v-deep .i_box_3x .u-button--info{ background-color: transparent !important; border: none !important; color: #FFFFFF !important; text-align: right !important;}
::v-deep .i_box_3x .u-button{display: block !important; padding:0rpx !important;}
::v-deep .u-upload__button{border-radius: 50% !important;}
::v-deep .u-upload__wrap__preview{border-radius: 50% !important;}



.btn-big{  width:100%;
     height: 92rpx;
     line-height: 92rpx;
     margin:30rpx auto;
     display:block;
     border-radius:56rpx;
     background:#00F0E2;
     font-size:28rpx;
     color:#fff;text-align: center;}

::v-deep .btn-big .u-button--info{ background-color: transparent !important; border: none !important; color: #FFFFFF !important; }
	
.popupBox{
	width: 600rpx;
	height: auto;
	border-radius: 24rpx;
	background-color: #FFFFFF;
}
.popupTop{
	width: 600rpx;
	height: 140rpx;
	background: linear-gradient(to bottom, #D3D5FF 20%, #FFFFFF 50%);
	border-radius: 24rpx 24rpx 0rpx 0rpx;
	line-height: 140rpx;
	text-align: center;
	font-weight: 700;
	font-size: 30rpx;
	color: #333333;
}
.popupDesc{
	width:480rpx;
	font-weight: 400;
	font-size: 28rpx;
	color: #555555;
	height: 900rpx;
	overflow-x:hidden;
	overflow-y: scroll;
	padding: 0rpx 60rpx;
}

.popupBtn{ width: 100%; height: auto;
    display: flex; flex-wrap: wrap;
	justify-content: space-around; /* 使子元素在容器中均匀分布 */
	align-items: center; /* 如果需要垂直居中子元素 */
}
.sbtnBox{
	margin: 30rpx auto;
	width: 478rpx;
	height: 80rpx;
	font-weight: 700;
	font-size: 30rpx;
	line-height: 80rpx;
	border: 2rpx solid #4D94FF;
	text-align: center;
	border-radius: 44rpx;
	
	
}

.popupDesc1{
	width:480rpx;
	font-weight: 400;
	font-size: 28rpx;
	color: #555555;
	height: auto;
	padding: 0rpx 60rpx;
}


.sbtnBox1{
	margin: 30rpx auto;
	width: 226rpx;
	height: 80rpx;
	font-weight: 700;
	font-size: 30rpx;
	line-height: 80rpx;
	border: 2rpx solid #4D94FF;
	text-align: center;
	border-radius: 44rpx;
	
}

.a1{
	background: linear-gradient( 270deg, rgba(46,87,241,0.15) 0%, rgba(131,88,246,0.15) 100%);
	color:#7A74F0;
}
.a2{
	background: linear-gradient( 270deg, #2E57F1 0%, #8358F6 100%);
	color:#FFFFFF;
}
.a3{
	background: linear-gradient( 270deg, #2E57F1 0%, #8358F6 100%);
	color:#FFFFFF;
}

</style>
