<template>
	<u-popup :show="show" closeable @close="show = false">
		<view class="w-wx-phone">
			<view class="h2 bold">绑定手机号码</view>
			<view class="h3">绑定手机号码，主要用于方便与您的沟通交流,并且对你的手机号码保密!</view>
			<view class="form">
				
				
				<!-- #ifdef MP-WEIXIN -->
				<view class="input-item">
					<view class="label">手机号码 :</view>
					<view class="info">
						<view v-if="formValue" style="color:var(--w-text-light-2);font-size:0.9rem; height: 100%; display: flex; align-items: center;" >{{formValue}}</view>
						<view v-else style="color:var(--w-text-light-2);font-size:0.9rem; height: 100%; display: flex; align-items: center;" >请输入手机号码</view>
					</view>
					<button v-if="!authStore.user?.phonenumber" class="phonenumber-btn" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"></button>
					
				</view>
				<!-- #endif -->
				
				<!-- #ifndef MP-WEIXIN -->
				<view class="input-item">
					<view class="label">手机号码 :</view>
					<view class="info">
						<input class="input" placeholder-style="color:var(--w-text-light-2);"  v-model="formValue" placeholder="请输入手机号码" />
					</view>
				</view>
				<!-- #endif -->
			</view>
			<view class="submit" hover-class="w-hover" @click="$u.throttle(submit())">确认绑定</view>
		</view>
	</u-popup>
</template>

<script setup>
	import { ref,computed,toRaw } from 'vue'
	import { getPhoneInfo } from '@/api/wx.js'
	import { update } from '@/api/system/user/profile.js'
	import { useAuthStore } from '@/store'
	const authStore = useAuthStore()
	
	const props = defineProps({
		modelValue:{
			type:String,
			default:""
		}
		
	});
	
	const emit = defineEmits(["update:modelValue","success","error"])
	
	const show = computed({
		get(){
			return props.modelValue;
		},
		set(value){
			emit("update:modelValue",value);
		}
	});
	
	const formValue = ref("");
	
	const getPhoneNumber = (e) => {
		// if(!authStore.user.phonenumber) {
		// 	return ;
		// }
		
		// #ifdef MP-WEIXIN
		console.debug("获取手机授权", e.detail);
		if(e.detail.errMsg == 'getPhoneNumber:ok'){
		    if(e.detail.iv){
		        getPhoneInfo(e.detail.code).then(r=>{
					formValue.value = r.phoneNumber;
				}).catch(e=>{
					emit("error");
					show.value=false;
				})
		    }else{
		        uni.showToast({
		        	title:"绑定手机失败"
		        })
				emit("error");
				show.value=false;
		    }
		}else{
		    uni.showToast({
		    	title:"授权获取手机失败"
		    })
			emit("error");
			show.value=false;
		}
		// #endif
	}
	
	const submit = async()=>{
		if(!formValue.value) {
			uni.showToast({
				title:"手机号码必填"
			})
			return;
		}
		if(!/^1\d{10}$/.test(formValue.value)) {
			uni.showToast({
				title:"号码格式不对"
			})
			return;
		}
		try{
			await update({phonenumber:formValue.value});
			formValue.value = "";
			authStore.loadInfo();
			emit("success");
			show.value=false;
			uni.showToast({
				title:"手机绑定成功"
			})
		}catch(e) {
			emit("error");
			show.value=false;
		}
	}
</script>


<style lang="scss" scoped>
	.w-wx-phone{
		width: 100%;
		padding: 1rem;
		color: var(--w-main-dark);
		
		
		
		.phonenumber-btn {
		    border-radius: 0;
		    text-align: left;
			background-color: #000;
		    opacity: 0;
		    width: 100%;
		    height: 100%;
		    position: absolute;
		    left: 0;
		    top: 0;
		}
		
		.h2{
			font-size: 1.2rem;
		}
		.h3{
			font-size: .8rem;
			color: var(--w-bg-dark-2);
			line-height: 1.4;
			padding:1rem 0;
		}
		.bold{
			font-weight: bold;
		}
		.form{
			
			&::before {
				content: '';
				display: block;
				background-color: var(--w-bg-dark);
				width: 100%;
				height: 1px;
				transform: scaleY(.5);
			}
			
			.input-item{
				padding: .5rem 0;
				display: flex;
				position: relative;
				&::before {
					content: '';
					position: absolute;
					background-color: var(--w-bg-dark);
					width: 100%;
					height: 1px;
					bottom: 0;
					transform: scaleY(.5);
				}
				.label {
					font-size: 1rem;
					padding: .5rem;
					line-height: 1;
					
				}
				.input {
					width: 100%;
					height: 100%;
					top:0;
					left:0;
					box-sizing: border-box;
					border:none;
					outline: none;
					color:var(--w-text);
					font-size: .95rem;
					background-color: #0000;
				}
				.info {
					flex:1;
					position: relative;
				}
			}
		}
		.submit{
			margin-top: 20px;
			width: 100%;
			border-radius: 0;
			text-align: center;
			line-height: 2.5;
			color: var(--w-bg);
			border-radius: .2rem;
			font-size: 1.1rem;
			letter-spacing: .2rem;
			background: var(--w-main);
			&.w-hover {
				background: var(--w-main-dark);
			}
		}
	}
</style>