<template>
	<view class="content">
		<view class="content-top">
					<view class='hs-box'>
						<view class='hs-row user-head'>
							<view class='hs-row-hd'>
								头像
							</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 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="hs-list-right">{{nickname}}</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>
		  
		<!-- <view class="button-bottom"> 
			<button class="btn btn-success" @click="toAdd()"  >保存</button>
		</view> -->
	</view>
</template>


<script>  
	export default { 
		data() {
			return { 
				userinfo:{},
				headflag:false, 
				nickname:'微信用户', 
				avatar:'/static/img/t2.png', 
			}
		},
		components:{ 
		},
		onLoad() { 
			// this.getAgreement()
		},
		onShow() {
			var token = uni.getStorageSync('userToken');  
			if (!token) {
				return false;
			} 
			this.getauth()
		},
		methods: {
			escLogin(){
				this.$api.escLogin({},res=>{
					if(res.code == '1'){   
						uni.removeStorageSync('userToken')
						uni.showToast({ title: res.msg , icon: 'success' })
						setTimeout(()=>{
							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.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;
	}
</style>