<template>
	<view>
		<form @submit="formSubmit">
			<view class="uni-forms-item">
				<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				  <image class="avatar" :src="userinfo.avatar"></image>
				</button> 
			</view>
			<view class="uni-forms-item">
				<input type="text" class="alias-input" maxlength="6" v-model="userinfo.alias"/>
			</view>
			<view class="uni-forms-item">
				<button form-type="submit" class="alias-submit" type="primary">确认修改</button>
			</view>
		</form>

	</view>
</template>

<script>
	import { mapMutations, mapState } from 'vuex'
	
	export default {
		computed: {
			...mapState('m_user', ['userinfo'])
		},
		data() {
			return {
			};
		},
		methods: {
			...mapMutations('m_user', ['updateUserInfo']),
			onChooseAvatar(e) {
				const { avatarUrl } = e.detail
				this.userinfo.avatar = avatarUrl
			},
			// 表单提交
			async formSubmit(e) {
				// 将昵称提交到后端
				const query = {
					alias: this.userinfo.alias,
					avatar: this.userinfo.avatar
				}
				const { data: result } = await uni.$http.get('/ucenter/mini-program-openid-uid/wxAlias', query)
				console.log(result)
				uni.$showMsg('修改成功！', 3000)
				// 更新成功
				// 将数据更新到vuex中
				this.updateUserInfo(this.userinfo)
				
				// 跳转个人信息页面
				uni.switchTab({
					url: '/pages/my/my'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.alias-input {
	height: 100rpx;
	font-size: 40rpx;
	border: 1px solid #aaa;
}
.alias-submit {
	margin-top: 50rpx;
}
</style>