<template>
	<view>
		<view class="avatar">
			<u-avatar @click="changeAvatar()" size="140rpx" :src="Info.avatar"></u-avatar>
		</view>
		<!-- <view class="name-edit">
			<text>用户名：</text>
			<u-input border="surround" v-model="Info.username"></u-input>
		</view> -->
		<view class="info-name">
			<u--form labelPosition="left" :model="Info">
				<u-form-item label="修改昵称" prop="Info.username" borderBottom>
					<u--input v-model="Info.username" border="none" placeholder="请输入您的昵称"
						placeholderStyle="color: #CCCCCC;font-size: 26rpx;"></u--input>
				</u-form-item>
			</u--form>
		</view>
		<view style="height: 100rpx;"></view>
		<u-button @click="editInfo(Info)" color="#339967">提交</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				Info: {
					avatar: '',
					username: '',
					avatarUrl: ''
				}
			}
		},
		methods: {
			//获取头像昵称
			getUserInfo() {
				this.$api.getUser().then(res => {
					const data = res.data.data
					if (data) {
						this.Info.avatar = this.$api.imgUrl + data.avatar
						this.avatarUrl =  data.avatar
						this.Info.username = data.nickname
					}
				}).finally(_ => {})
			},
			updatePromise(filePath) {
				return new Promise((resolve, reject) => {
					const token = uni.getStorageSync('loginToken')
					const a = uni.uploadFile({
						url: this.$api.uploadImgUrl,
						filePath: filePath,
						name: 'file',
						header: {
							"Content-Type": "multipart/form-data",
							'Authorization': token
						},
						success: (res) => {
							resolve(JSON.parse(res.data).data.url)
						}
					});
				})
			},
			changeAvatar() {
				uni.chooseImage({
					count: 1, //默认选择1张图片
					sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
					success: (chooseImageRes) => {
						this.Info.avatar = chooseImageRes.tempFilePaths[0] //更新本地浏览头像图片
						if (chooseImageRes.tempFilePaths[0]) {
							const result = this.updatePromise(chooseImageRes.tempFilePaths[0]) //上传图片
							result.then(value => {
								this.avatarUrl = '/' + value
							})
						}
					}
				});
			},
			editInfo() {
				// let resdata = JSON.stringify(data);
				// this.$api.editPersonInfo(resdata).then(res => {
				// 	console.log(resdata);
				// 	console.log(res)
				// })
				this.$api.editPersonInfo({
					nickname: this.Info.username,
					avatar: this.avatarUrl
				}).then(res => {
					console.log('修改头像昵称==', res);
					this.$toast.success(res.data.msg)
					if (res.data.code == 1) {
						uni.reLaunch({
							url: '/pages/my/my'
						})
					}
				}).finally(_ => {})
			},
		},
		onLoad() {
			let that = this
			this.getUserInfo()
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f4f4f4;
	}

	.avatar {
		margin: 60rpx 0;
		/* width: 100%; */
		/* height: 200rpx; */
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.name-edit {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.info-name {
		.u-form-item {
			background-color: #fff;
		}

		.u-form-item__body__left {
			width: 80px !important;
			margin-left: 20rpx;
		}
	}


	.u-button {
		width: 644rpx !important;
		height: 86rpx !important;
		background: #0EBB5B;
		border-radius: 20rpx !important;
	}
</style>