<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: uni.getStorageSync('cffp_userId'),
					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>
