<template>
	<view>
		<u-popup v-model="showPop" mode="bottom" border-radius="16" :safe-area-inset-bottom="true"
			:maskCloseAble="false">
			<view class="popup-content">
				<view class="u-font-xl bold-600">
					获取您的昵称和头像
				</view>
				<view class="popup-form">
					<form @submit="handleSubmit">
						<view class="u-flex u-row-between avatar u-m-t-80">
							<text>头像</text>
							<view class="u-flex u-row-between flex1 u-m-l-30">
								<button style="border: none;" class="u-flex u-row-between w-full" hover-class="none"
									open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
									<u-image v-if="avatar" :src="avatar" width="100rpx" height="100rpx"shape="circle"></u-image>
									<view v-else="!avatar">点击授权头像</view>
									<u-icon name="arrow-right" color="#9F9EA4" size="32"></u-icon>
								</button>
							</view>
						</view>
						<view class="u-flex u-row-between avatar u-m-t-60">
							<text>昵称</text>
							<view class="u-flex u-row-between flex1 u-m-l-30">
								<input
									:value="nickname"
									name="nickname"
									type="nickname"
									placeholder="请输入昵称"
									placeholder-style="color: #000;"
								/>
								<u-icon name="arrow-right" color="#9F9EA4" size="32"></u-icon>
							</view>
						</view>
						<button class="submit-btn bg-primary" form-type="submit">
						    确定
						</button>
						<view class="text-default u-text-center close-btn" @tap="onClose">
							暂不登录
						</view>
					</form>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		uploadFile
	} from "@/utils/tools";
	export default {
		name: "mplogin",
		props: {
			value: {
				type: Boolean,
				required: true
			}
		},
		data() {
			return {
				avatar: '',
				nickname: ''
			};
		},
		methods: {
			// 头像选择
			onChooseAvatar(e) {
				const avatarUrl = e.detail.avatarUrl;
				if (!avatarUrl) {
					return;
				}
				uni.showLoading({
					title: "正在上传中...",
					mask: true,
				});

				uploadFile(avatarUrl).then((res) => {
					uni.hideLoading();
					this.avatar = res.url;
				}).catch(() => {
					uni.hideLoading();
					this.$toast({title: "上传失败"});
				});
			},
			
			// 提交数据
			handleSubmit(e) {
				const {nickname} = e.detail.value
				const {avatar} = this
				if (!avatar) return this.$toast({
					title: '请添加头像'
				})
				
				if (!nickname) return this.$toast({
					title: '请输入昵称'
				})
				
				this.$emit('update', {
					avatar,
					nickname
				})
				
				this.showPop = false
				this.$emit('close')
			},
			
			// 关闭弹窗
			onClose() {
				this.showPop = false
				this.$emit('close')
			}
		},
		computed: {
			showPop: {
				get() {
					return this.value
				},
				set(val) {
					this.$emit('input', val)
				}
			}
		}
	};
</script>

<style lang="scss">
	.popup-content {
		padding: 40rpx 40rpx 60rpx;
		
		.submit-btn {
			margin-top: 80rpx;
			background-color: #254062;
			padding: 6rpx 0;
			border-radius: 100rpx;
			color: #fff;
		}
		
		.close-btn {
			margin-top: 20rpx;
			border: 1px solid #254062;
			padding: 20rpx 0;
			border-radius: 100rpx;
		}
	}
</style>