<template>
	<view class="smsVerification-container">
		<view v-if="sendCode" class="">
			<view class="sms-title">输入短信验证码</view>
			<text class="sms-describe">验证码已发送至{{userPhone}}，请在下方输入框内输入6位数字验证码</text>
			<view class="sms-item" @click="showKeyboard=!showKeyboard">
				<u-message-input mode="bottomLine" :maxlength="6" v-model="value" :disabled-keyboard="true"></u-message-input>
			</view>
			<view class="sendcode-con">
				<text :class="['getcode-btn', isDisable ? 'grey-btn' : '']" @click="isDisable ? null : pageInit()">{{nowVal}}</text>
			</view>
		</view>
		<!-- 数字键盘 -->
		<u-keyboard ref="uKeyboard" :dot-enabled="false" :mask="false" :tooltip="false" v-model="showKeyboard" @change="valChange" @backspace="backspace"></u-keyboard>
		<!-- 图文验证码 -->
		<uni-popup :maskClick="false" ref="imageTxtPopup" type="center">
			<popup-con title="图文验证码" :popBtn="popBtn" :changeImg="changeImg" @captchaImg="captchaVerify"></popup-con>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import popupCon from '@/components/uni-popup/popup-con.vue'
	import { sendVerifyCode } from '@/api/user.js'
	import { checkCode } from '@/api/order.js'
	export default {
		components: {
			uniPopup,
			popupCon
		},
		data() {
			return {
				nowVal: '获取验证码',  //  按钮显示内容
				count: '',  //  当前秒数
				timer: null,  //  倒计时
				isDisable: false,  //  是否禁止获取验证码
				value: '', //输入的内容
				phone: '', // 用户手机号
				showKeyboard: false,  //  是否打开键盘
				popBtn: [],  //  name为操作按钮名称，color为操作按钮颜色值
				changeImg: false,  //  是否重新更换图形验证码
				verifyCode: '',
				randomCode: '',  //  图片验证码随机码
				sendCode: false  // 短信是否发送成功
			}
		},
		onLoad() {
			this.phone = this.$store.state.vuex_userData.mobile
			console.log(this.$store.state.vuex_userData,'his.$store.state.vuex_OrderAddress')
			//因为此时实例没有挂载完成，需要延迟操作
			setTimeout(() => {
			  this.pageInit()
			}, 50)
		},
		computed: {
			userPhone () {
				return this.phone.substr(0,3) + "****" + this.phone.substr(7)
			}
		},
		watch: {
			// 监听输入框输入长度
			 value: {
				handler(newVal) {
					// console.log(newVal.length,'NNNNNNNNNNNN')
					if(newVal.length==6) {
						let params = {
							mobile: this.phone,
							verifiCode: newVal
						}
						checkCode(params).then(res=>{
							if(res.status==200) {
								//  跳转到设置密码
								uni.redirectTo({
									url: `/pages/userCenter/userInfo/paymentPwd?code=${this.value}&mobile=${this.phone}`
								})
							} else {
								uni.showToast({
									title: res.message,
									icon: 'none'
								})
							}
						})
						
					}
				},
				deep: true
			}
		},
		methods:{
			pageInit () {
				this.value = ''
				this.sendCode = false
				this.showKeyboard = false
				this.retsetCode()
				//  图文验证码
				this.$refs.imageTxtPopup.open()
			},
			//  验证图片验证码
			captchaVerify(code, nowRandomCode){
				let obj = {}
				obj.phone = this.phone
				obj.random = nowRandomCode
				obj.code = code
				//  短信验证码
				sendVerifyCode(obj).then(res => {
					console.log(JSON.stringify(res))
					if(res.status == 200){  //  验证码输入正确
						this.randomCode = nowRandomCode  //  图片验证码随机码
						//  关闭   图形验证码 弹框
						this.$refs.imageTxtPopup.close()
						//  开启倒计时
						this.getCodeFun()
						this.sendCode = true
						this.showKeyboard = true
						uni.showToast({icon: 'none',title: '验证码发送成功'})
					}else {  //  验证码输入错误
						this.retsetCode()
						uni.showToast({icon: 'none',title: res.message})
					}
				})
			},
			// 重新触发获取图片验证码
			retsetCode(){
				const _this = this
				_this.verifyCode = ''
				_this.randomCode = ''
				//  切换验证码重新校验
				_this.changeImg = false
				_this.$nextTick(function(){
					_this.changeImg = true
				})
			},
			// 按键被点击(点击退格键不会触发此事件)
			valChange(val) {
				// 将每次按键的值拼接到value变量中，注意+=写法
				if(this.value.length < 6){
					this.value += val
				}
			},
			// 退格键被点击
			backspace() {
				// 删除value的最后一个字符
				if(this.value.length) this.value = this.value.substr(0, this.value.length - 1)
			},
			//  开始倒计时
			getCodeFun(){
				const TIME_COUNT = 60
				if (!this.timer) {
				  this.count = TIME_COUNT
				  this.timer = setInterval(() => {
				    if (this.count > 0 && this.count <= TIME_COUNT) {
				      this.count--
				      this.nowVal = this.count + '秒后重新发送'
				      this.isDisable = true
				    } else {
				      this.nowVal = '重新获取验证码'
				      clearInterval(this.timer)
				      this.timer = null
				      this.isDisable = false
				    }
				  }, 1000)
				}
			},
			//  取消
			cancel(){
				uni.navigateBack({
				    delta: 1
				})
			}
		}
	}
</script>

<style lang="less">
	.smsVerification-container{
		width: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
		background-color: #fff;
		.sms-title {
		  margin: 50rpx 0 30rpx;
		  font-size: 36rpx;
		  font-weight: bold;
		}
		.sms-describe{
			display: block;
			color: #606266;
			margin: 20rpx 0 50rpx;
		}
		.sendcode-con{
			text-align: center;
			padding-top: 70rpx;
			.getcode-btn {
				display: block;
				font-size: 28rpx;
				color: #298bf2;
			}
			.grey-btn{
				color: #999;
			}
		}
		.btn-con{
			display: flex;
			justify-content: space-between;
			padding-top: 130rpx;
			.handle-btn{
				display: inline-block;
				width: 45%;
				margin: 0 auto;
				text-align: center;
			}
		}
	}
</style>
