<template>
	<view class="content">
		<view class="loginbox loginboxmima">

			<view class="loginboxitem flex">
				<view class="boxitemleftkk">
					手机号
				</view>
				<view class="boxitemright">
					<input type="number" value="" placeholder="请输入手机号" placeholder-class="enter" @input="enterphone" />
				</view>
			</view>
			<!-- <view class="loginboxitem flextwo">
				<view class="flex">
					<view class="boxitemleftkk">
						验证码
					</view>
					<view class="boxitemright yanzhengk">
						<input type="text" value="" placeholder="请输入验证码" placeholder-class="enter" @input="enteryan" />
					</view>
				</view>
				<picyan @picname="getpic"></picyan>
				
			</view> -->
			<view class="loginboxitem flextwo">
				<view class="flex">
					<view class="boxitemleftkk">
						短信验证码
					</view>
					<view class="boxitemright">
						<input type="text" :value="code" placeholder="请输入短信验证码" placeholder-class="enter" @input="entercode" />
					</view>
				</view>
				<view class="cardyan" @click="getcode" v-if="disable==false">{{time}}</view>
				<view class="cardyan" v-else>{{time}}</view>
			</view>
		</view>
		<view class="next" @click="finish">完成</view>
	</view>
</template>

<script>
	import app from "../../App.vue";
	import picyan from "../../components/picyan/picyan.vue";
	var interval = null;
	export default {
		components:{
				picyan
			},
		data() {
			return {
				showbanben: false,
				rangenum: '',
				phone: '',
				code: '',
				disable: false,
				currentTime: 60,
				time: '获取验证码',
				yancode:''
			}
		},
		onLoad() {
			console.log(348344390)
			// // 生成随机验证码
			// var randomNum = ('000000' + Math.floor(Math.random() * 999999)).slice(-6);
			// this.rangenum = randomNum;
		},
		methods: {
			getpic(e) {
				console.log('我是子组件的值', e);
				this.rangenum = e

			},
			changenum() {
				var randomNum = ('000000' + Math.floor(Math.random() * 999999)).slice(-6);

				this.rangenum = randomNum;
			},
			// 输入手机号
			enterphone(e) {
				this.phone = e.detail.value
			},
			// 输入验证码
			entercode(e) {
				this.code = e.detail.value
			},
			enteryan(e){
				this.yancode=e.detail.value
			},

			// 获取验证码
			getcode() {
				let that = this;
				that.disable = true;
				if (that.phone == '') {
					uni.showToast({
						title: "请输入手机号",
						icon: "none"
					})
					that.disable = false;
					return false
				}
				if (that.phone != '') {
					if (!(/^1[3456789]\d{9}$/.test(that.phone))) {
						wx.showToast({
							title: '请输入正确的手机号',
							icon: 'none'
						})

						that.disable = false;
						return false;
					}
				}
				let currentTime = that.currentTime;
				let url = "user/get_code";
				let param = {
					mobile: that.phone,
				};
				console.log('8888', param)
				app.post(url, param, 'get').then(r => {
					console.log(r)
					that.setcode = r.data.data.code;
					that.code = r.data.data.code;
					interval = setInterval(function() {
						currentTime--;
						that.time = currentTime + '秒';
						
						if (currentTime <= 0) {
							clearInterval(interval)
							that.time = '重新发送';
							that.currentTime = 61;
							that.disable = false;
						}
					}, 1000)

				}).catch(err => {
					console.log(err);

				})
			},
			// 下一步
			finish() {
				
				console.log(34348483)
				let that=this;
				console.log('66666',that.rangenum);
				console.log(that.yancode)
				if (that.phone == '') {
					uni.showToast({
						title: "请输入手机号",
						icon: "none"
					})
					that.disable = false;
					return false
				}
				if (that.phone != '') {
					if (!(/^1[3456789]\d{9}$/.test(that.phone))) {
						wx.showToast({
							title: '请输入正确的手机号',
							icon: 'none'
						})
				
						that.disable = false;
						return false;
					}
				}
				// if(that.yancode==''){
				// 	uni.showToast({
				// 		title:'请输入验证码',
				// 		icon:"none"
				// 	})
				// 	return false
				// }
				
				// if(that.yancode!=that.rangenum){
				// 	console.log(that.yancode);
				// 	console.log(that.rangenum)
				// 	uni.showToast({
				// 		title:'验证码错误',
				// 		icon:"none"
				// 	})
				// 	return false
				// }
				
				if (that.code == '') {
					uni.showToast({
						title: "请输入短信验证码",
						icon: 'none'
					})
					return false
				}
				if(that.code!=that.setcode){
					uni.showToast({
						title: "短信验证码错误",
						icon: 'none'
					})
					return false
				}
				
				let url = "user/update_mobile";
				let params={
					mobile:that.phone,
					code:that.setcode,
					
				}
				console.log('参数',params)
				app.post(url, params).then((res) => {
					console.log(res);
					uni.showToast({
						title:"绑定成功",
						icon:'none'
					})
					setTimeout(function(){
						  uni.$emit('phone',that.phone)
						uni.navigateBack({
							checked:true
						})
					},1500)
				
				}).catch((err) => {
					console.log(err)
					uni.showToast({
						title:err.msg,
						icon:'none'
					})
				
				})
			},





		}

	}
</script>

<style>
	@import url('../../base/login');

	page {
		overflow-y: hidden;
	}
	.yanzhengk{
		width:170rpx;
	}

	.boxitemleftkk {
		color: #3D454C;
		font-size: 28rpx;
		width: 130rpx;
	}

	.next {
		width: 686rpx;
		height: 88rpx;
		background: #C29445;
		color: #fff;
		font-size: 32rpx;
		text-align: center;
		line-height: 88rpx;
		position: fixed;
		bottom: 14rpx;
		left: 32rpx;
	}
</style>