<template>
	<view class="content">
		<text class="iconfont icon-youjiantou zuojiantou" @click="goBack()" style="left: 20rpx;"></text>
		<view class="header">
			<view class="headportrait" @click="uploadAvatar()">
				<image :src="optionForm.headPicture ? optionForm.headPicture  :'../../static/myteam/Group1633.png'"
					mode=""></image>
			</view>
		</view>
<!-- 		<view class="linechart">
			<echarts ref="echart" :option="option" style="height: 300px;"></echarts>
		</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 Echarts from '@/components/charts/charts.vue'
	import EchartsEl from '@/components/echarts/echarts-el.vue'
	import api from "@/api/api";
	import common from '../../common/common';
	export default {
		data() {
			return {
				dataForm: {
					loginId: "1",
					targetType: "5",
					targetId: "1",
					targetNo: "6",
					targetUseFor: "12",
					targetSeq: "0"
				},
				optionForm: {},
				option :{
				  xAxis: {
				    type: 'category',
				    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
				  },
				  yAxis: {
				    type: 'value'
				  },
				  series: [
				    {
				      data: [120, 200, 150, 80, 70, 110, 130],
				      type: 'bar',
				      showBackground: true,
				      backgroundStyle: {
				        color: 'rgba(180, 180, 180, 0.2)'
				      }
				    }
				  ]
				}
			}
		},
		components: {
			Echarts,
			EchartsEl
		},
		onLoad(options) {
			this.optionForm = JSON.parse(options.customerBasicInfo)
		},
		methods: {
			goBack() {
				let back = getCurrentPages();
				if (back && back.length > 1) {
					uni.navigateBack({
						delta: 1
					});
				} else {
					history.back();
				}
			},
			uploadAvatar(event) {
				let that = this;
				CommonUpload(that.dataForm).then(res => {
					this.optionForm.headPicture = res.data.filePath
				})
			},
			// 修改个人资料接口
			submitinfo() {
				if (!common.nameValid(this.optionForm.realName)) {
					uni.showToast({
						title: '请输入真实的姓名!',
						duration: 2000,
						icon: 'none'
					})
					return;
				}
				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>
