<!--
 * @Descripttion: 
 * @version: 
 * @Author: 王三华
 * @Date: 2023-05-18 14:42:53
-->
<template>
  <view class="main">
	  <view class="content">
		  <view class="index-view tops" @click="updateImg">
			  <view class="user-name">{{$t('MY_ORD_78')}}</view>
			   <view class="user-right rights">
					<view class="avatar">
						<image :src="userInfo.headPath"/>
					</view>
					<view class="right-icon">
						<image src="../../static/images/right.png"/>
					</view>
			   </view>
		  </view>
		  <view class="index-view">
				  <view class="user-name">{{$t('PER_DA_2')}}</view>
				   <view class="user-right rights" @click="downShow=true">
            <!-- {{ userInfo.nickName1 }} -->
						<!-- <view >
							 <u-input class="border-s"  :maxlength="40" v-model="userInfo.nickName" />
						</view> -->
            <view class="nana">{{ userInfo.nickName }}</view>
						<view class="right-icon">
							<image src="../../static/images/right.png"/>
						</view>
				   </view>
		  </view>
	  </view>
	  <view class="content">
	  		  <view class="index-view tops">
	  			  <view class="user-name">{{$t('MY_WAL_33')}}</view>
	  			   <view class="user-right">
	  						{{userInfo.memberName}}
	  			   </view>
	  		  </view>
	  		  <view class="index-view">
	  				  <view class="user-name">{{$t('MN_T_1')}}</view>
	  				   <view class="user-right">
	  							{{userInfo.memberCode}}
	  				   </view>
	  		  </view>
			  <view class="index-view">
				  <view class="user-name">
            {{$t('w_0052')}}</view>
				   <view class="user-right">
							{{userInfo.phone}}
				   </view>
			  </view>
			  <view class="index-view">
				  <view class="user-name">{{$t('MY_WAL_36')}}</view>
				   <view class="user-right">
							{{userInfo.idCardAuth}}
				   </view>
			  </view>
	  </view>
	  <view class="content" style="border-bottom: none;">
	  		  <view class="index-view tops">
	  			  <view class="user-name">{{$t('PER_DA_3')}}</view>
	  			   <view class="user-right">
	  						{{userInfo.countryName}}
	  			   </view>
	  		  </view>
	  		  <view class="index-view">
	  				  <view class="user-name">{{$t('MN_F_18')}}</view>
	  				   <view class="user-right">
	  							{{userInfo.settleCountryName}}
	  				   </view>
	  		  </view>
			  <view class="index-view">
				  <view class="user-name">{{$t('PER_DA_5')}}</view>
				   <view class="user-right">
							{{userInfo.registerGradeVal}}
				   </view>
			  </view>
			  <view class="index-view">
				  <view class="user-name">{{$t('CK_KS_15')}}</view>
				   <view class="user-right">
							{{userInfo.settleGradeVal}}
				   </view>
			  </view>
			  <view class="index-view">
					  <view class="user-name">{{$t('PER_DA_7')}}</view>
					   <view class="user-right">
								{{userInfo.agentGrade}}
					   </view>
			  </view>
			  <view class="index-view">
					  <view class="user-name">{{$t('CK_KS_16')}}</view>
					   <view class="user-right">
								{{userInfo.awardsVal}}
					   </view>
			  </view>
			  <view class="index-view">
					  <view class="user-name">荣誉奖衔</view>
					   <view class="user-right">
								{{userInfo.maxAwardsVal}}
					   </view>
			  </view>
			  <view class="index-view none">
					  <view class="user-name">{{$t('PER_DA_9')}}</view>
					   <view class="user-right">
								{{userInfo.payTime}}
					   </view>
			  </view>
			  <view class="index-view none">
				  <view class="user-name">{{$t('PER_DA_10')}}</view>
				   <view class="user-right">
							{{userInfo.consumeAchieve|toThousandthAndKeepDecimal}}
				   </view>
			  </view>
				  <view class="index-view none">
				  <view class="user-name">{{$t('PER_DA_11')}}</view>
				   <view class="user-right">
							{{userInfo.registerAuthorityVal}}
				   </view>
			</view>
			  <view class="index-view none">
				  <view class="user-name">{{$t('MY_ORD_3')}}</view>
				   <view class="user-right">
							{{userInfo.payTime}}
				   </view>
			  </view>
			  <view class="index-view none" v-if="userInfo.pkCountry == 1&&userData.expireDate">
				  <view class="user-name">有效期</view>
				   <view class="user-right">
							{{userData.expireDate}}
				   </view>
			  </view>
			  <view class="index-view none" v-if="userInfo.serviceCode">
				  <view class="user-name">{{$t('w_1034')}}</view>
				   <view class="user-right">
							{{userData.serviceCode}}
				   </view>
			  </view>
	  </view>
	  <u-button type="success"
	            shape="circle"
	            class="btn"
				@click="submit"
	        >{{$t('PER_DA_12')}}</u-button>
			<view style="height: 20rpx;"></view>
      <u-popup :show="downShow"
             mode="bottom"
             closeOnClickOverlay
             closeable
             round="10"
             @close="close">
      <view class="title">修改昵称</view>
      <view class="kung">
        <u--input
        :maxlength="40"
    placeholder="请输入内容"
    v-model="userInfo.nickName"
  ></u--input>
      </view>
        <u-button @click="submit" type="error" text="确定"></u-button>
    </u-popup>
  </view>
</template>

<script>
import * as api from '@/config/login.js'
import { getToken, removeToken } from '@/config/auth.js'
import { setToken } from '@/config/auth.js'
import store from '@/store'
export default {
  data() {
    return {
      downShow:false,
		userInfo:{},
    userData:'',
		urls:'/member/api/maker-space/update-file',
    }
  },
  onLoad() {
	 this.getInfo()
   this.userData = uni.getStorageSync('User')
  },
  methods: {
    close() {
      this.downShow = false
    },
	  		updateImg() {
				const http = uni.$u.http.config.baseURL
				let token = getToken();
	  			uni.chooseImage({
	  				sourceType: ['album'], //从相册选择
	  				success: chooseImageRes => {
	  					const tempFilePaths = chooseImageRes.tempFilePaths;
	  					uni.uploadFile({
	  						url: http+'/member/api/member/update-head', //仅为示例，非真实的接口地址
	  						filePath: tempFilePaths[0],
	  						name: 'file',
	  						header: {
	  							Authorization:token
	  						},
	  						success: res => {
								console.error(res)
	  							// 成功：获取到头像
	  							if (res.statusCode == 200) {
									let data = JSON.parse(res.data)
	  								this.userInfo.headPath = data.data.url
	  							}
	  						}
	  					});
	  				},
	  				fail: err => {
	  					this.myToast(this.$t('MY_ORD_79'), 'none');
	  				}
	  			});
	  		},
	  submit() {
		 api.updateData({
			  nickName: this.userInfo.nickName,
		 }).then((res)=>{
			  uni.showToast({
				 title: res.msg,
				 icon:	 'none',
				 duration: 1500,
			 })
			 this.getInfo()
       this.close()
		 }) 
	  },
	  // upload() {
		 //  let that = this
			// 	uni.chooseImage({
			// 		count: 1, //默认9
			// 		sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			// 		sourceType: ['album'], //从相册选择
			// 		success: function (res) {
			// 			  let FormDatas = new FormData();
				
			// 			  FormDatas.append("file", res.tempFilePaths[0]);
			// 				api.updateFile(FormDatas).then((res)=>{
			// 					console.error(res)
			// 				})
			// 		}
			// 	});
	  // },
	  getInfo(){
		 api.getData().then(res => {
		        if (res) {
		         this.userInfo = res.data
             if(this.userInfo.nickName.length > 20){
              this.userInfo.nickName1 = this.userInfo.nickName.substring(0,20)+'...'
            }
		        }
		      }).catch(error => {
		        reject(error)
		      })  
		  // api.getInfo().then(res => {
				//  if (res) {
				//   this.userInfo = res.data
				//  }
			 //   }).catch(error => {
				//  reject(error)
			 //   }) 
			 //   console.error(this.userInfo)
	  },
  },
}
</script>

<style lang="scss" scoped>
.kung{
  padding: 20rpx 20rpx
}
.title {
  font-size: 40rpx;
  text-align: center;
  margin: 20rpx auto;
  color: #333;
  font-weight: bold;
}
	.border-s{
		border: none;
		position: absolute;
		right: 0;
		width: 120rpx;
		height: 85rpx;
		margin-right: 20rpx;
	}
	page{
		background-color: #F2F2F2;
	}
	.none{
		border-bottom: none;
	}
	.tops{
		border-top: 1rpx solid #eee;
	}
	.content{
		border-bottom: 20rpx solid #F2F2F2;
		background-color: #fff;
		
	}
	.index-view{
		height: 110rpx;
		margin: 0 30rpx 0 30rpx;
		padding: 0 10rpx;
		line-height: 110rpx;
		border-bottom: 1rpx solid #EEEEEE;
		display: flex;
		justify-content: space-between;
		position: relative;
		color: #333;
	}
	.user-right{
		color: #999;
		font-size: 28rpx;
		display: flex;
    align-items: center;
	}
	.rights{
		margin-right: 45rpx;
	}
  .nana{
    flex: 1;
  }
	.right-icon{
		position: absolute;
		top:12rpx;
		right: 0;
		image{
			width: 40rpx;
			height:40rpx;
		}
	}
	.avatar{
		margin-top: 10rpx;
		image{
			width: 89rpx;
			height: 89rpx;
			border-radius: 50%;
		}
	}
	.btn{
		background-color: #FB3024;
		border: none;
		height: 92rpx;
		line-height: 92rpx;
		font-size:30rpx;
		margin: 40rpx auto;
		width: 690rpx;
	}
</style>