<template>
	<view style="padding: 32rpx; background-color: white; height: calc(100vh - 88rpx);">
		
		<view class="mainBox">
		    <view class="avatar" >
				<view class="" v-if="info.avatar">
					<u-upload
							:fileList="fileList1"
							@afterRead="afterRead"
							@delete="deletePic"
							name="1"
							multiple
							:maxCount="1"
						></u-upload>
				</view>
				<view class="" v-else>
					<image class="ava" src="/static/my/Frame(1) (1).png"></image>
					<image class="camera" src="/static/ic-camera@2x.png"></image>
				</view>
		        
		    </view>
		
		    <view class="group">
		        <view class="groupItem">
		          <view class="item">
		            <view class="leftTitle">昵称</view>
		            <view class="nickname" @click="editUserName">{{info.nickname}}</view>
		          </view>
		          <view class="icon" @click="editUserName">
		          <!-- <van-icon size="13px" custom-style="font-weight:700" color="#ccc"  name="arrow" /> -->
		          <image src="/static/my/ic-arrow(1).png" style="width: 20rpx;height: 36rpx;"></image>
		           </view>
		        </view>
		        <view class="groupItem">
		          <view class="item">
		            <view class="leftTitle">手机号码</view>
		            <view class="nickname" @click="editPhone">{{info.mobile}}</view>
		          </view>
		          <view  class="icon" @click="editPhone"> <image src="/static/my/ic-arrow(1).png" style="width: 20rpx;height: 36rpx;"></image> </view>
		        </view>
				<view class="groupItem"  @click="goProvice">
				  <view class="item">
					<view class="leftTitle">服务协议</view>
				  </view>
				  <view  class="icon"> <image src="/static/my/ic-arrow(1).png" style="width: 20rpx;height: 36rpx;"></image> </view>
				</view>
				<view class="groupItem" @click="goProvice1">
				  <view class="item">
					<view class="leftTitle">隐私政策</view>
				  </view>
				  <view  class="icon" > <image src="/static/my/ic-arrow(1).png" style="width: 20rpx;height: 36rpx;"></image> </view>
				</view>
				<view class="groupItem"  @click="show = true">
				  <view class="item">
					<view class="leftTitle">退出登录</view>
				  </view>
				  <view  class="icon"> <image src="/static/my/ic-arrow(1).png" style="width: 20rpx;height: 36rpx;"></image> </view>
				</view>
				<view class="" >
					<u-popup :round="10" style="padding: 40rpx;" :show="show" mode="center"  @close="close" @open="open">
						<view class="" style="display: flex; align-items: center; flex-direction: column; justify-content: center;" >
							<view style="margin-bottom: 30rpx;">
							    <text>确定退出登录吗?</text>
							</view>
							<view class="" style="display: flex; align-items: center;justify-content: space-evenly;">
								<view class="" style="margin-right: 20rpx;">
									<u-button size="small" text="取消" type="info"  @click="close()"></u-button>
								</view>
								<view class="">
									<u-button size="small" text="确定" type="primary" @click="goOut()"></u-button>
								</view>
							</view>
						</view>
					  
					</u-popup>
				</view>
					
		    </view>
		</view>
	
	</view>
</template>

<script>
	import config from '@/common/config'
	export default {
		data() {
			return {
				show:false,
				info:{
					nickname:''
				},
				action: config.baseUrl + '/api/common/upload',
				fileList1:[
					{url:''}
				]
			}
		},
		methods: {
			goOut(){
				uni.$u.http.post('/api/user/logout').then(res => {
					uni.showToast({
						title:res.msg
					})
					if(res.code == 1){
						setTimeout(() => {
							uni.navigateBack()
						},1000)
					}
					
				})
				
			},
			open() {
		        // console.log('open');
		      },
		      close() {
		        this.show = false
		        // console.log('close');
		      },
			editUserName(){
				uni.navigateTo({
					url:`/pages/subPages/editName?name=${this.info.nickname}`
				})
			},
			goProvice(){
				uni.navigateTo({
					url:'/pages/subPages/service'
				})
			},
			goProvice1(){
				uni.navigateTo({
					url:'/pages/subPages/ys'
				})
			},
			editPhone(){
				uni.navigateTo({
					url:`/pages/subPages/editPhone?mobile=${this.info.cooperation_phone}`
				})
			},
			getList(){
				uni.$u.http.post('/api/user/index').then(res => {
					if(res.code == 1){
						this.info = res.data
						this.fileList1[0].url = this.info.avatar
					}else{
						this.info = {}
					}
				
				})
			},
			deletePic(event) {
							this[`fileList${event.name}`].splice(event.index, 1)
						},
						// 新增图片
						async afterRead(event) {
							// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
							let lists = [].concat(event.file)
							let fileListLen = this[`fileList${event.name}`].length
							lists.map((item) => {
								this[`fileList${event.name}`].push({
									...item,
									status: 'uploading',
									message: '上传中'
								})
							})
							for (let i = 0; i < lists.length; i++) {
								const result = await this.uploadFilePromise(lists[i].url)
								let item = this[`fileList${event.name}`][fileListLen]
								this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
									status: 'success',
									message: '',
									url: result
								}))
								fileListLen++
							}
							console.log(this.fileList1)
							uni.$u.http.post('/api/user/profile',{
								avatar:this.fileList1[0].thumb
							}).then(res => {
								this.getList()
							})
						},
						uploadFilePromise(url) {
							return new Promise((resolve, reject) => {
								let a = uni.uploadFile({
									url: this.action, // 仅为示例，非真实的接口地址
									filePath: url,
									name: 'file',
									formData: {
										user: 'test'
									},
									header: {
										token: uni.getStorageSync('token')
									},
									success: (res) => {
										setTimeout(() => {
											resolve(res.data.data)
										}, 1000)
									}
								});
							})
						},
			
		},
		onLoad() {
			this.getList()
			
		},
		onShow() {
			this.getList()
		}
	}
</script>

<style scoped lang="scss">
/* pages/mine/userInfo/userInfo.wxss */

.avatar {
  position: relative;
  margin: 0 auto;
  margin-top: 128rpx;
  margin-bottom: 64rpx;
  width: 160rpx;
  height: 160rpx;
}

.avatar .ava {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
}
/deep/ .u-popup__content{
	padding: 80rpx;
}
.avatar .camera {
  width: 48rpx;
  height: 48rpx;
  position: absolute;
  bottom: 0;
  right: 0;
}

.groupItem {
  display: flex;
  justify-content: space-between;
  height: 136rpx;
  align-items: center;
  border-bottom: 1rpx solid #ccc;
}

.groupItem .item{
  display: flex;
  align-items: center;
  flex: 1;
  height: 100%;
}
.groupItem .item view:nth-child(2){
  font-weight: 700;
}
.groupItem .leftTitle {
  min-width: 150rpx;
  color: rgba(13,16,19,0.9);
  font-size: 28rpx;
}

.groupItem .nickname {
  display: flex;
  align-items: center;
  color: #0D1013;
  font-size: 28rpx;
  flex: 1;
  height: 100%;
}
.icon {
  display: flex;
  height: 100%;
  align-items: center;
}

 .sex {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100rpx;
 }
</style>