<template>
	<view class="content">
		<view class="info-flex">
			<label>头像</label>
			<u-avatar
				class="upd-active"
				shape="square"
				:src="avatar.url"
				:default-url="require('@/static/imgs/default-active.png')"
				@click="updAvatar"
			></u-avatar>
		</view>
		<view class="info-flex">
			<label>昵称</label>
			<input class="info-input" maxlength="8" v-model="nickname" type="text" placeholder="昵称" @blur="onNickname">
		</view>
	</view>
</template>

<script>
	import { info, updInfo } from '@/apis/interfaces/user.js'
	import { uploads } from '@/apis/interfaces/uploading.js'
	export default {
		data() {
			return {
				nickname: '',	// 用户昵称
				avatar	: {
					url	: '',
					path: ''
				},	// 上传头像
			};
		},
		created() {
			this.getInfo()
		},
		methods: {
			// 获取用户资料
			getInfo(){
				uni.showLoading({
					title: '加载中...'
				})
				info().then(res => {
					let { nickname, avatar} = res
					this.nickname = nickname
					this.avatar	  = {
						url	: avatar,
						path: ''
					}
					uni.hideLoading()
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			// 更新昵称
			onNickname(e){
				this.updInfo('nickname', this.nickname)
			},
			// 更新资料
			updInfo(key, val){
				uni.showLoading({
					title: '加载中...',
					mask : true
				})
				updInfo(key, val).then(res => {
					uni.showToast({
						title: '修改成功',
						icon : 'none',
					})
				}).catch(err => {
					this.getInfo()
					uni.showToast({
						title: err.message,
						icon : 'none'
					})
				})
			},
			// 更新头像
			updAvatar(){
				uni.chooseImage({
					count: 1,
					crop : {
						width	: 300,
						height	: 300 
					},
					success: res => {
						if(res.tempFilePaths.length > 0){
							uni.showLoading({
								title: '上传中...',
								mask : true
							})
							uploads([{
								name: 'avatar',
								uri : res.tempFilePaths[0]
							}]).then(updRes => {
								let { path, url } = updRes
								this.avatar = {
									url	: url[0],
									path: path[0]
								}
								this.updInfo('avatar', path[0])
							}).catch(updErr => {
								uni.showToast({
									title: updErr.message,
									icon : 'none'
								})
							})
						}
					},
					fail: err => {}
				})
			}
		}
	}
</script>

<style lang="scss">
	.content{
		padding-top: 30rpx;
	}
	// 编辑信息
	.info-flex{
		background: white;
		padding: 20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height: 60rpx;
		position: relative;
		overflow: hidden;
		&::after {
		    content: "";
			position: absolute;
			left: 30rpx;
			bottom: 0;
			width: 100%;
			height: 1rpx;
			z-index: 2;
			background-image: linear-gradient(0deg, $border-color 50%, transparent 50%);
		}
		&:last-child::after{
			display: none;
		}
		label{
			font-size: 30rpx;
			color: #111;
			width: 200rpx;
		}
		.info-input{
			width: calc(100% - 200rpx);
			text-align: right;
		}
		.upd-active{
			width: 88rpx;
			height: 88rpx;
			border-radius: $radius;
			position: relative;
			overflow: hidden;
		}
	}
</style>
