<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="wxAvatar"
									@afterRead="afterRead"
									@delete="deletePic"
									name="avatar"
									width="26"
									height="26"
									:sizeType="['compressed']"
									:deletable="true"
									:maxCount="5"
									: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.wxName"
		 			         ></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'>
		 			      <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>	
		
		
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				//form框
				   info: {
						 wxName:'',
				         wxAvatar:'',
						 phoneNumber:'点击获取手机号',
			
				   },
				   wxAvatar:  [],
				
			}
		},
		onLoad(option) {
			var _this = this;
			_this.getUserInfo();
		
		},
		methods: {
			
			//获取用户信息
			getUserInfo()
			{
				var _this =this;
				var post ={};
				_this.$api.post('ycl/user/wx-info',post,function(rs){
					console.log(rs);
					_this.info = rs;
					_this.wxAvatar =[{url:rs.wxAvatar}];
				});
			},
			// 删除图片
			deletePic(event) {
					var _this = this; 
					_this.wxAvatar = [];
			},
						// 新增图片
			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 FSM = uni.getFileSystemManager();
							FSM.readFile({
								filePath: edetail,
								encoding: "base64",
								success: function(data) {
									_this.info.imgBase64 = "data:image/png;base64," + data.data
									_this.wxAvatar = [{url:edetail}];
								},
								fail: function(err){
									console.log('http://tmp',err)
								}
							})
						
				}
		
			},
			uploadFilePromise(url) {
					
			},
			loadData(){
		
			},
		    getPhoneNumber(e){
				var _this =this;
				var detail = e.detail;
				console.log(detail);
				if (detail.errMsg === 'getPhoneNumber:ok') {
				 
				  _this.getPhoneApi(detail);
				} else {
				  _this.$com.alert('授权失败')
				}
			},
			getPhoneApi(detail){
			  var _this = this;
			 
			  var post ={
			  	
				code: detail.code,
			  };
			  _this.$api.post('ycl/user/wx-phone',post,function(rs){
			  	console.log(rs);
			  	_this.info.phoneNumber = rs;
			  },function(err){
			  	console.log(err);
			  });
				
			},
			
			//提交表单
			add(){
				var _this =this;
				var info = _this.info;
				
				if(_this.$com.isNull(info.wxName))
				{
					_this.$com.showError('请输入昵称');
					return;
				}
				if(_this.$com.isNull(info.wxAvatar) && _this.$com.isNull(info.imgBase64))
				{
					_this.$com.showError('请上传头像');
					return;
				}
				if(_this.$com.isNull(info.phoneNumber))
				{
					_this.$com.showError('手机号必须');
					return;
				}
				_this.btn_loading = true;
				_this.btn_disabled = true;			 
				var post = info;
				_this.$api.put('ycl/user/wx-update',post,function(rs){
					console.log('更新token');
					_this.$user.session('token',rs.token);
					_this.$com.alert('更新成功');
					setTimeout(function(){
						uni.$u.route({
								type:'navigateBack',
								delta:1,
							});
					},1000);
				});
				//按钮还原
				_this.btn_loading = false;
				_this.btn_disabled = false; 
				
			},
			//注销
			logout()
			{
				uni.navigateTo({
					url:'/pages/user/account/logout'
				})
			},
			
		}
	}
</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  .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%; }
.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; }
	

</style>
