<template>
	<view>
		<button @click="open">关闭</button>
		<uni-popup ref="popupLogin" :mask-click="false" type="bottom">
			<view style="padding: 35rpx; background-color: aliceblue;">
				<uni-forms ref="form" :modelValue="formData" :rules="rules">
					<uni-forms-item label="姓名" name="name">
						<uni-easyinput type="text" v-model="formData.name" placeholder="请输入姓名" />
					</uni-forms-item>
					<uni-forms-item label="邮箱" name="email">
						<uni-easyinput type="text" v-model="formData.email" placeholder="请输入用户名" />
					</uni-forms-item>
				</uni-forms>
				<button @click="submit">Submit</button>
				<view style="display:flex;align-items:center;justify-content:space-evenly; padding: 30rpx;">
					<uni-icons type="weixin" color="#00aa00" size="48"></uni-icons>
					<uni-icons type="qq" color="#686868" size="48"></uni-icons>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="popupReg" :mask-click="false" type="bottom">
			<view style="padding: 35rpx; background-color: aliceblue;">
				<text>用户注册</text>
				<uni-forms ref="form" :modelValue="formDataReg" :rules="rules">
					<uni-forms-item label="姓名" name="avatarUrl">
						<button class="avatar-wrapper" open-type="chooseAvatar"  @chooseavatar="onChooseAvatar">
							<image class="avatar" :src="formDataReg.avatarUrl"
								style="width: 320rpx; height: 320rpx; margin: auto;"></image>
						</button>
					</uni-forms-item>
					<uni-forms-item label="姓名" name="nickname">
						<uni-easyinput type="nickname" placeholder="请输入昵称" v-model="formDataReg.nickname">
						</uni-easyinput>
					</uni-forms-item>
					<uni-forms-item label="姓名" name="mobile">
						<uni-easyinput placeholder="请输入昵称" v-model="formDataReg.mobile"></uni-easyinput>

						<button v-show="showPhone" type="primary" block open-type="getPhoneNumber"
							@getphonenumber="getPhone">
							授权电话
						</button>
					</uni-forms-item>
				</uni-forms>
				<button @click="submit">Submit</button>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		name: "ywxAuthModel",
		data() {
			return {
				// 表单数据
				formData: {
					name: 'LiMing',
					email: 'dcloud@email.com'
				},
				formDataReg: {
					nickname: '',
					avatarUrl: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0',
				},
				rules: {
					// 对name字段进行必填验证
					name: {
						rules: [{
								required: true,
								errorMessage: '请输入姓名',
							},
							{
								minLength: 3,
								maxLength: 5,
								errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					},
					// 对email字段进行必填验证
					email: {
						rules: [{
							format: 'email',
							errorMessage: '请输入正确的邮箱地址',
						}]
					}
				},
				openid: "",
				loginstate: "0",
				openid: "",
				userEntity: null,
				terminal: "",
				osVersion: "",
				phoneNumber: "",
				showPhone: false,
				showModal: false, //定义登录弹窗  
			}
		},
		onLoad: function() {},
		methods: {
			onChooseAvatar(e) {
				console.log(e)
				const {
					avatarUrl
				} = e.detail
				
				this.formDataReg.avatarUrl = avatarUrl
			},
			open() {
				this.$refs.popupReg.open()
			},
			close() {
				this.$refs.popup.close()
			}
		}
	}
</script>

<style>

</style>
