<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="getPhoneNumber" @getphonenumber="onGetPhoneNumber">
									<view v-if="mobile">{{mobile}}</view>
									<view v-else="!mobile">点击授手机号</view>
									<u-icon name="arrow-right" color="#9F9EA4" size="32"></u-icon>
								</button>
							</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>
	export default {
		name: "mobile-login",
		props: {
			value: {
				type: Boolean,
				required: true
			}
		},
		data() {
			return {
				mobile: ''
			};
		},
		methods: {
			onGetPhoneNumber(e) {
				if (e.detail.errMsg === "getPhoneNumber:ok") {
					// 这里需要解密手机号
					this.mobile = 110
				}
			},
			
			// 提交数据
			handleSubmit(e) {
				const {mobile} = this
				if (!mobile) return this.$toast({
					title: '请授权手机号'
				})
				
				this.$emit('update', {
					mobile
				})
				
				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>