<template>
	<view class="wrap">
		<u-popup v-model="show" mode="center" width="90%" :border-radius="32">
			<view class="content">
				<view>
					<u-icon @click="show = false" name="close" class="close"></u-icon>
				</view>
				<view class="content-top">
					<view class="title">绑定手机号</view>

				</view>
				<view class="content-center">
					<view class="content-center-mobile">
						<view>手机号</view>
						<view>
							<u-input v-model="form.mobile" placeholder="请输入手机号" type="number" :border="false" />
						</view>
					</view>
					<view class="content-center-code">
						<view>验证码</view>
						<view class="content-center-input">
							<u-input @input="inputcode" v-model="form.code" placeholder="请输入验证码" type="number" :border="false" />
							<view @click="getCode" class="content-center-input-get" :class="{'hasSend':hasSend}">{{hasSend?'已发送':'获取验证码'}}<text
							v-if="hasSend">({{count}}s)</text></view>
						</view>
					</view>
				</view>
				<view class="content-bottom">
					<view class="content-bottom-btn" @click="submitCode" :class="{'active':canSubmit}">
						确定
					</view>
					<view class="content-bottom-tips">
						验证成功后，将与账号绑定
					</view>
				</view>

			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: true,
				form: {
					mobile: '',
					code: ''
				},
				count:60,
				hasSend:false,
				sendTimer:null,
				canSubmit:false
			}
		},
		onUnload() {
			if (this.sendTimer) {
				clearInterval(this.sendTimer);
				this.sendTimer = null
			}
		},
		onHide() {
			if (this.sendTimer) {
				clearInterval(this.sendTimer);
				this.sendTimer = null
			}
		},
		methods: {
			getCode(){
				if(this.base.isNull(this.form.mobile)){
					this.base.toast("请输入手机号")
					return
				}
				if(!this.base.isMobile(this.form.mobile)){
					this.base.toast("请输入正确的手机号")
					return
				}
				let that = this
				this.base.toast("发送成功")
				this.hasSend = true
				this.sendTimer = setInterval(function() {
					if (that.count > 1) {
						that.count--
					} else {
						clearInterval(that.sendTimer);
						that.sendTimer = null
						that.count = 60
						that.hasSend = false;
					}
				}, 1000)
				
			},
			inputcode(e){
				console.log("E",e)
				if(!this.base.isNull(this.form.mobile) && e.length>0){
					this.canSubmit = true
				}else{
					this.canSubmit = false
				}
			},
			submitCode(){
				if(!this.canSubmit){
					return
				}else{
					if(this.base.isNull(this.form.mobile)){
						this.base.toast("请输入手机号")
						return
					}
					if(!this.base.isMobile(this.form.mobile)){
						this.base.toast("请输入正确的手机号")
						return
					}
					if(this.base.isNull(this.form.code)){
						this.base.toast("请输入验证码")
						return
					}
					
				}
			}
			
		}
	}
</script>

<style lang="scss">
	.wrap {
		.content {
			position: relative;
			padding: 40rpx 60rpx;

			.close {
				position: absolute;
				top: 45rpx;
				right: 30rpx;
			}

			&-top {
				.title {
					text-align: center;
					font-size: 36rpx;
					font-weight: 600;
					color: #000;
				}
			}

			&-center {
				padding-top: 20rpx;
				font-size: 32rpx;
				color: rgba(0, 0, 0, .9);

				&>view {
					border-bottom: 1px solid rgba(0, 0, 0, .15);
					padding-top: 40rpx;
				}

				&-input {
					display: flex;
					align-items: center;
					padding-bottom: 10rpx;

					&-get {
						margin-left: 20rpx;
						padding: 10rpx 20rpx;
						border-radius: 10rpx;
						border: 1px solid #d90209;
						font-size: 24rpx;
						color: #d90209;
						text-align: center;
						box-sizing: border-box;
						background: #fdf0f0;
						width:200rpx;
					}
					.hasSend {
						background: #dad8d8;
						color: #333;
						border: 1px solid #dad8d8;
					}
				}
			}

			&-bottom {
				margin-top: 40rpx;

				&-btn {
					background: rgba(0, 0, 0, .15);
					border-radius: 10rpx;
					font-size: 28rpx;
					color: #fff;
					text-align: center;
					margin-bottom: 20rpx;
					padding: 20rpx 0;
				}
				.active{
					background: #d90209;
				}

				&-tips {
					text-align: center;
					font-size: 28rpx;
					color: rgba(0, 0, 0, .3);
				}
			}
		}
	}
</style>