<template>
	<u-popup :show="show" :closeable="true" round="10" :closeOnClickOverlay="true"
		@close="$emit('close')">
		<view class="login-container">
			<view class="center fw-600">
				<text style="color: #333333;">获取您的昵称、头像、手机号</text>
			</view>
			<view class="center plr-32 mt-24 fs-28">
				<text style="color: #999999;">获取用户头像、昵称、手机号信息,主要用于完善个人资料,向用户提供更好使用体验</text>
			</view>
			
			<view class="mt-32">
				<view class="user-item">
					<view class="mr-48">头像</view>
					<view style="flex:1;">
						<button class="header-button" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
							<image v-if="!weChatHeaderImg" class="header" src="@/static/login/header.png"></image>
							<image v-else class="header" :src="weChatHeaderImg"></image>
						</button>
					</view>
				</view>
				<view class="user-item">
					<view class="mr-48">昵称</view>
					<view style="flex:1;">
						<input type="nickname" @input="onWeChatNickNameInput"
							v-model="weChatNickName" placeholder="点击获取昵称" />
					</view>
				</view>
			</view>
			
			<view @click="onSaveUserInfo" class="save-btn">
				<text>保存</text>
			</view>
		</view>
	</u-popup>
</template>

<script>
export default {
	props: ['show'],
	data () {
  		return {
			weChatHeaderImg: '',
			weChatNickName: ''
    	}
  	},
  	methods: {
		async onChooseAvatar(e){
			// console.log(e)
			const weChatHeaderImg = e.detail.avatarUrl
			const result = await this.$wskj.uploadImg(weChatHeaderImg)
			// console.log(result.url)
			this.weChatHeaderImg = result.fullurl
		},
		onWeChatNickNameInput(e){
			// 这里微信小程序开发者工具获取不到微信昵称
			// 真机运行可以
			console.log('获取微信昵称', e)
			// this.weChatNickName = e.detail.value
		},
		onSaveUserInfo(){
			this.$emit('onSaveUserInfo', { weChatHeaderImg: this.weChatHeaderImg, weChatNickName: this.weChatNickName  })
		}
  	}
}
</script>

<style scoped>
	.login-container {
		padding: 32rpx 0 20rpx;
	}
	
	
	.header {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}
	
	
	.user-item {
		width: 100%;
		padding: 0 64rpx;
		height: 120rpx;
		border-top: 0.5px solid #CCCCCC;
		border-bottom: 0.5px solid #CCCCCC;
		display: flex;
		align-items: center;
	}
	.user-item:nth-child(2) {
		border-top: none;
	}
	.header-button {
		display: flex;
		justify-content: flex-start;
	}
	
	button::after {
		border: none;
	}
	
	button {
		display: block;
		padding-left: 0px;
		padding-right: 0px;
		box-sizing: border-box;
		text-decoration: none;
		background-color: transparent;
		border: none;
	}
	.save-btn {
		margin: 52rpx auto 0;
		width: 210px;
		height: 40px;
		text-align: center;
		line-height: 40px;
		color: #FFF;
		background: #07c160;
		border-radius: 4px;
	}
</style>
