<template>
	<view class="content">
		<view class="header">
			<view class="headportrait" @click="uploadAvatar()">
				<image  :src="optionForm.headPicture ? optionForm.headPicture  :'../../static/myteam/Group1633.png'" mode=""></image>
			</view>
		</view>
		<view class="band">
			<view class="contentItem">
			  <text>真实名称</text>
			  <input class="user-input" v-model="optionForm.realName"  type="text"  placeholder="请输入姓名"/>
			</view>
			<view class="contentItem">
			  <text>昵称</text>
			  <input class="user-input" v-model="optionForm.nickName" maxlength="10"  type="text"  placeholder="请输入3~10个字符"/>
			</view>
			<view class="contentItem">
			  <text>个人简介</text>
			  <textarea class="user-textarea" v-model="optionForm.userDescription" placeholder="请输入个人简介"></textarea>
			</view>
		</view>
		<view class="footer">
			<button class="user-button" @tap="submitinfo">保存</button>
		</view>
	</view>
</template>

<script>
	import {
		CommonUpload
	} from '@/util/uploaderFile'
		import api from "@/api/api";
	export default {
		data() {
			return {
				dataForm:{
					loginId: "1",
					targetType: "5",
					targetId: "1",
					targetNo: "6",
					targetUseFor: "12",
					targetSeq: "0"
				},
				optionForm:{}
			}
		},
		onLoad(options) {
			this.optionForm = JSON.parse(options.customerBasicInfo)
			console.log(this.optionForm, 7777)
		},
		methods:{
			uploadAvatar(event) {
				let that = this;
				CommonUpload(that.dataForm).then(res => {
					this.optionForm.headPicture = res.data.filePath
					})
			},
			// 修改个人资料接口
			submitinfo(){
				let UserRequestVO = {
					id: 1,
					realName: this.optionForm.realName,
					nickName: this.optionForm.nickName,
					headPicture: this.optionForm.headPicture,
					userDescription: this.optionForm.userDescription
				}
				api.updateinfo(UserRequestVO).then(res =>{
					if(res.success) {
						uni.showToast({
							title: res['message'],
							duration: 2000,
							icon: 'none'		
						});
						uni.$emit("handClick", {
							data: this.optionForm
						});
						setTimeout(()=>{
							uni.navigateBack({
								delta: 1
							})
						},  1000)
					
					}
				})
			},
		}
	}
</script>

<style scoped>
	.content {
		width: 100vw;
	}
	.user-input{
		text-align: right;
	}
	.user-textarea{
		border: 1px solid #C7C7C7;width: 540rpx;
		height: 270rpx;
		border-radius: 10rpx;
	}
.band{
	margin: 0 20rpx;
	font-size: 26rpx;
}
	.header {
		display: flex;
		justify-content: center;
	}

	.headportrait {
		width: 250rpx;
		height: 250rpx;
		/* border: 1rpx solid aqua; */
		border-radius: 50%;
	}
	.headportrait image{
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}
/* 	.headportrait-img {
		width: 260rpx;
		height: 260rpx;
		border-radius: 50%;
	    background-size: cover;
	    background-repeat: no-repeat center;
	} */
	.contentItem{
		margin-top: 40rpx;
		display: flex;
		justify-content: space-between;
		border-bottom: 2rpx solid #E4E4E4;
		padding: 20rpx;
	}
	.footer{
		width: 500rpx;
		height: 80rpx;
		opacity: 1;
		margin: 80rpx auto;
	}
	.user-button{
		color: #FFFFFF;
		background: #20269B;
		border-radius: 80px;
	}
</style>
