<template>
	<view class="box">
		<view><uni-easyinput prefixIcon="phone-filled" v-model="mobile" @blur="onInput" placeholder="请输入手机号"></uni-easyinput></view>
		<view style="margin-top: 10px;"><uni-easyinput prefixIcon="contact-filled" v-model="pucode" placeholder="请输入用户编号"></uni-easyinput></view>
		<view class="input">
			<uni-easyinput v-model="snsCode" placeholder="请输入内容" style="width: 100px;margin-right: 10px;"></uni-easyinput>
			<button class="mini-btn" type="primary" size="mini" @click="toCode" :disabled="num > 0"> {{ num > 0 ? `${num}秒后重新获取` : '获取验证码' }}</button>
		</view>
		<view><button type="primary" style="width: 180px;margin-top: 20px;" @click="register">绑定手机号</button></view>
	</view>
</template>

<script>
	import API from '@/common/js/api.js'
	export default {
		data() {
			return {
				mobile:'',
				pucode:'',
				snsCode:'',
				intervalId: null,
				num: 0,
				styles:{
					width:'100px'
				}
			}
		},
		onLoad() {
			if (!uni.getStorageSync('phone')){
				uni.showToast({title: '请先绑定手机号',icon: 'none'});
			}
			// 从本地存储中获取倒计时值
			const savedNum = localStorage.getItem('countdownNum');
			if (savedNum) {
				this.num = parseInt(savedNum, 10);
				if (this.num > 0) {
					this.intervalId = setInterval(this.countDownTimer, 1000);
				}
			}
		},
		beforeDestroy() {
		    // 清除定时器
			clearInterval(this.intervalId);
			uni.removeStorageSync('countdownNum');
		},
		methods: {
			countDownTimer() {
				if (this.num > 0) {
					this.num --;
					localStorage.setItem('countdownNum', this.num);
				} else {
					clearInterval(this.intervalId);
					localStorage.setItem('countdownNum', this.num);
				}
			},
			toCode(){
				if(!this.mobile){
					uni.showToast({title: '请输入手机号',icon: 'none'});
					return
				}
				const phonePattern = /^1[3-9]\d{9}$/;
				if (!phonePattern.test(this.mobile)) {
					uni.showToast({
						title: '您输入的手机号格式有误',
						icon: 'none'
					});
					return
				}
				
				this.num = 60; // 设置倒计时总时间
				localStorage.setItem('countdownNum', this.num);
				this.intervalId = setInterval(this.countDownTimer, 1000);
				let data = {mobile:this.mobile}
				API.sendSms(data, res => {
					uni.showToast({title: res.msg,icon: 'none'});
				})
			},
			// 限制手机号
			onInput(event) {
				this.mobile = event.detail.value
			},
			register(){
				if(!this.mobile){
					uni.showToast({title: '请输入手机号',icon: 'none'});
					return
				}
				if(!this.pucode){
					uni.showToast({title: '请输入用户编号',icon: 'none'});
					return
				}
				if(!this.snsCode){
					uni.showToast({title: '请输入短信验证码',icon: 'none'});
					return
				}
				const phonePattern = /^1[3-9]\d{9}$/;
				if (!phonePattern.test(this.mobile)) {
					uni.showToast({
						title: '您输入的手机号格式有误',
						icon: 'none'
					});
					return
				}
				
				const url = '/wechat/wechat/savePuCode'
				let data = {
					mobile:this.mobile,
					pucode:this.pucode,
					snsCode:this.snsCode
				}
				API.request(url,data, res => {
					if(res.code==1){
						uni.setStorageSync('AccessToken', res.data.token);
						uni.setStorageSync('phone', this.mobile);
						uni.showToast({title: '手机号绑定成功',icon: 'none'})
						setTimeout(()=>{
							uni.navigateTo({
								url:"/pages/index/index"
							})
						},1000)
						
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.box{
	padding: 40px;
}
.input{
	display: flex;
	align-items: center;
	margin-top: 10px;
}
</style>
