<template>
	<view class="flex justify-center margin">
		<button class="balanced" type="balanced" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
			<image class="avatar" :src="avatarUrl"></image>
		</button>
	</view>
	<view class="cu-form-group boxtwo">
		<view class="title">昵称</view>
		<input class="weui-input" type='nickname' name='nickname' v-model="nickname" placeholder="请输入昵称">
	</view>
	<view class="padding flex flex-direction">
		<button @click="gotoLogin" class="cu-btn bg-green lg">完成</button>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import * as api from '@/utils/api.js';
	import config from '@/utils/config';
	import {
		showModelMessage,
		jkcBaseEncode,
		jkcBaseDecode
	} from '@/utils/tools.js';
	const imgPath = config.imgPath;
	const nickname = ref("");
	const avatarUrl = ref(`${imgPath}static/userui/wxtouxiang.png`);
	// 选择头像
	const onChooseavatar = (e) => {
		console.log("微信头像信息:", e);
		const paramsfile = {
			"path": e.detail.avatarUrl
		}
		api.fileUploadUserPicture(paramsfile).then(res => {
			if (res.code == 200) {
				avatarUrl.value = res.data.url;
			}
		});
	};
	const gotoLogin = () => {
		let wechat_user = JSON.parse(jkcBaseDecode(uni.getStorageSync("wechat_user")));
		if (!nickname.value) {
			showModelMessage("请填写昵称!");
			return;
		}
		const params = {
			"userId": wechat_user.userId,
			"avatar": avatarUrl.value,
			"nickname": nickname.value,
		}
		api.callOrdereApi("ebikeUser/update", params);
		api.callOrdereApi("ebikeUser/getInfo?id=" + wechat_user.userId, {},
				"get")
			.then((info) => {
				if (info.code == 200) {
					uni.setStorageSync('wechat_user', jkcBaseEncode(JSON
						.stringify(info.data)));
					setTimeout(() => {
						uni.navigateTo({
							url: "/pages/user/home/home"
						})
					}, 500);
				}
			})
	}
</script>

<style scoped>
	.avatar-wrapper {
		padding: 0;
		width: 56px !important;
		border-radius: 8px;
		margin-top: 40px;
		margin-bottom: 40px;
	}

	.avatar {
		display: block;
		width: 56px;
		height: 56px;
	}

	.balanced {
		background-color: rgba(0, 0, 0, 0);
		padding: 0px;
	}

	.container {
		display: flex;
	}

	.boxtwo {

		margin-top: 10px;
		border-top: solid 1px #e6e6e6;
		border-bottom: solid 1px #e6e6e6;
	}
</style>