<template>
	<view>
		<view class="change_avatar">
			<u-avatar :src="avatar" size="140rpx" shape="circle" @click="changeAvatar()"></u-avatar>
		</view>

		<view>
			<u--form labelPosition="left" :model="model">
				<u-form-item label="修改昵称" prop="userInfo.name" borderBottom>
					<u--input v-model="model.userInfo.name" border="none" placeholder="请输入您的昵称"
						placeholderStyle="color: #CCCCCC;font-size: 24rpx;"></u--input>
				</u-form-item>
			</u--form>
			<view style="height: 230rpx;"></view>
			<u-button type="success" text="确定" color="#0EBB5B" @click="handleSubmit()"></u-button>
		</view>
		<view style="margin:0 20rpx;">
			<u-overlay :show="!isLoad">
				<login @success="reOnLoad()" @fail="failToLoad()"></login>
			</u-overlay>
		</view>
	</view>
</template>

<script>
	import {
		apiService
	} from '../../service/request'
	import login from 'pages/my/login/login'
	export default {
		components: {
			login
		},
		data() {
			return {
				avatar: '',
				model: {
					userInfo: {
						name: ''
					},
				},
				isLoad: true,
			}
		},
		onLoad() {
			this.getUser()
			if (!uni.getStorageSync('loginToken') || uni.getStorageSync('loginToken').length === 0) {
				this.isLoad = false
				// uni.navigateTo({
				// 	url: '../../pages/my/login/login'
				// })
				return
			}
			this.isLoad = true
		},
		methods: {
			//获取头像昵称
			getUser() {
				this.$apiServe.getUser().then(res => {
					console.log('头像昵称', res.data);
					var data = res.data.data
					this.avatar = data.avatar
					this.model.userInfo.name = data.nickname
				}).finally(_ => {})
			},
			updatePromise(filePath) {
				return new Promise((resolve, reject) => {
					const token = uni.getStorageSync('loginToken')
					const a = uni.uploadFile({
						url: apiService.uploadImgUrl + '/upload/image/',
						filePath: filePath,
						name: 'file',
						header: {
							"Content-Type": "multipart/form-data",
							'Authorization': token
						},
						success: (res) => {
							console.log('上传头像', JSON.parse(res.data));
							// setTimeout(() => {
							resolve(JSON.parse(res.data).data.uri)
							// }, 1000)
						}
					});
				})
			},
			//点击头像修改
			changeAvatar() {
				uni.chooseImage({ // 从本地相册选择图片或使用相机拍照。
					count: 1, //默认选择1张图片
					sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
					success: (res) => {
						// console.log(res.tempFilePaths[0]); //成功则返回图片的本地文件路径列表 tempFilePaths
						// this.avatar = res.tempFilePaths[0] //更新本地浏览头像图片
						if (res.tempFilePaths[0]) {
							this.updatePromise(res.tempFilePaths[0]) //上传图片
						}
						const result = this.updatePromise(res.tempFilePaths[0])
						result.then(value => {
							this.avatar = value
						})
					}
				});
			},
			//提交头像和昵称
			handleSubmit() {
				console.log('昵称', this.model.userInfo.name);
				console.log('头像', this.avatar);
				this.$apiServe.updateUser({
					nickname: this.model.userInfo.name,
					avatar: this.avatar
				}).then(res => {
					console.log('修改头像昵称==', res);
					this.$toast.success(res.data.msg)
					uni.reLaunch({
						url: '/pages/my/my'
					})
				}).finally(_ => {})
			},
			reOnLoad() {
				if (!uni.getStorageSync('loginToken') || uni.getStorageSync('loginToken').length === 0) {
					this.$toast.warn('登录失败请重试')
					this.isLoad = false
					// uni.navigateTo({
					// 	url: '../../pages/my/login/login'
					// })
					return
				}
				this.isLoad = true
			},
			failToLoad() {
				// uni.navigateBack({
				// 	url: '/pages/my/my'
				// })
				this.$toast.warn('登录失败请重试')
			}
		}
	}
</script>

<style lang="scss">
	.change_avatar {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 60rpx 0;
	}

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