<template>
	<view>
		<view class="auth">
			<view class="wanl-title">继续完善资料</view>
			<form @submit="formSubmit">
				<!-- #ifdef MP-WEIXIN -->
					<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<image class="avatar" :src="$wanlshop.oss(userInfo.avatarUrl, 50, 50)" mode="aspectFill"/>
					</button>
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
					<button class="avatar-wrapper" @tap="onUploadAvatar">
						<image class="avatar" :src="$wanlshop.oss(userInfo.avatarUrl, 50, 50)" mode="aspectFill"/>
					</button>
				<!-- #endif -->
				<view class="auth-group radius-bock bg-gray wlian-grey-light">
					<input placeholder="请输入用户名" maxlength="12" confirm-type="next" placeholder-class="placeholder" name="nickname" type="nickname"
						v-model="userInfo.nickName"></input>
				</view>
				<view class="auth-button flex flex-direction">
					<button class="cu-btn bg-orange sl radius-bock" formType="submit">继续注册</button>
				</view>
			</form>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				userInfo: {
					avatarUrl: '/assets/addons/wanlshop/img/common/mine_def_touxiang_3x.png',
					nickName: null,
					gender: 0
				},
				pageroute: '',
				token: null
			};
		},
		onLoad(option) {
			this.pageroute = option.url;
			this.token = option.token;
		},
		methods: {
			onChooseAvatar(e) {
				this.uploadFile(e.detail.avatarUrl);
			},
			onUploadAvatar() {
			    uni.chooseImage({
			        sourceType: ["camera", "album"],
			        sizeType: "compressed",
			        count: 1,
			        success: res => {
						this.uploadFile(res.tempFilePaths[0]);
			        }
			    });
			},
			async uploadFile(file) {
				await uni.uploadFile({
				    url: '/wanlshop/common/upload',
				    filePath: file,
				    name: 'file',
				    success: data => {
						this.userInfo.avatarUrl = JSON.parse(data.data).data.url;
					}
				});
			},
			async formSubmit(e) {
				if(e.detail.value.nickname){
					await uni.request({
						url: '/wanlshop/user/perfect',
						method: 'POST',
						data: {
							token: this.token,
							avatarUrl: this.userInfo.avatarUrl,
							nickName: e.detail.value.nickname,
							gender: this.userInfo.gender
						},
						success: res => {
							this.$store.dispatch('user/login', res.data);
							this.$store.dispatch('cart/login');
							this.$store.dispatch('chat/get');
							uni.reLaunch({
								url: decodeURIComponent(this.pageroute)
							});
						}
					});
				}else{
					this.$wanlshop.msg('请填写用户名');
				}
			}
		}
	};
</script>

<style>
	@import url("auth.css");
	.avatar-wrapper {
		display: flex;
		justify-content: center;
		margin-bottom: 80rpx;
		background-color: transparent;
	}
	.avatar-wrapper::after{
		border: 0;
	}
	.avatar {
		border-radius: 9999px;
		overflow: hidden;
		height: 240rpx;
		width: 240rpx;
		border: 1rpx solid #fe6600;
	}
</style>