<template>
	<view>
		<view class="list">
			<view class="li">
				<text>头像</text>
				<button open-type="chooseAvatar" hover-class="none" class="item" @chooseavatar="uploadAvatar">
					<image :src="avatar" mode="aspectFit" class="logo"></image>
				</button>
				<image src="/static/pages/images/more.png" class="rico"></image>
			</view>
			<view class="li">
				<text>昵称</text>
				<view class="item">
					<input type="nickname" name="nickName" placeholder="请输入昵称" :value="nickName" @input="intNickName"></input>
				</view>
			</view>
		</view>
		<button class="submit" @tap="confirm">确定</button>
	</view>
</template>

<script>
	// pages/userinfo/userinfo.js
	const app = getApp();
	const req = require("../../utils/request.js");
	var QQMapWX = require("../../utils/qqmap.js");
	export default {
		data() {
			return {
				avatar: "",
				nickName: "",
			};
		},

		components: {},
		props: {},
		onLoad: function() {
			this.getInfo();
		},
		methods: {
			getInfo() {
				let that = this;
				let isShowLoading = false;
				if (!isShowLoading) {
					req.loadIng('加载中');
					isShowLoading = true;
				}
				req.getRequest('/api/user/info', {}, data => {
					this.setData(data);
					req.setStorage('userInfo', data);
					uni.hideLoading();
					isShowLoading = false;
				});
			},

			uploadAvatar(e) {
				uni.showLoading({
					title:'上传中'
				})
				req.uploadFile('/api/nocheck/upload', e.detail.avatarUrl, res => {
					uni.hideLoading()
					this.avatar = res.src
				});
			},
			intNickName(e) {
				this.nickName = e.detail.value
			},

			confirm() {
				let that = this;
				let d = {
					avatar: that.avatar,
					nickName: that.nickName,
				};
				let isShowLoading = false;
				if (!isShowLoading) {
					req.loadIng('保存中');
					isShowLoading = true;
				}
				req.postRequest('/api/user/save', d, res => {
					if (isShowLoading) {
						uni.hideLoading();
						that.getInfo();
						uni.navigateBack();
						isShowLoading = false;
					}
				});
			},
		}
	};
</script>
<style>
	@import "./index.css";
</style>
