<template>
	<view class="page-content my-bg">
		<cu-custom :isBack="true" class="main-topbar bg-main-oil" bgColor="bg-main-oil">
			<block slot="content">手机短信验证</block>
			<block slot="backText">返回</block>
		</cu-custom>
		<view class="bg-white cu-card margin-bottom-lg">
			<view class="text-gray text-lg padding-top-lg padding-bottom-lg  margin-bottom margin-top-lg  text-center">
				请输入 <text class="text-black">
					{{loginUser.userPhone}}
				</text> 收到的短信验证码
			</view>
		</view>
		<view class="cu-form-group  padding-top-sm padding-bottom-sm">
			<view class="title text-black ">验证码</view>
			<input type="number" :maxlength="6" v-model="code" placeholder="填写验证码" name="input" />
			<text class="mini-left-border" :class="frozen?'text-gray':'oil-main-color'" @tap="sendMsg">{{tips}}</text>
		</view>
		<view class="padding margin-top-lg padding-top-lg">
			<button class="bg-main-oil" @tap="nextStep">下一步</button>
		</view>
	</view>
</template>

<script>
	import cloudSiteApi from '@/api/cloud-site.js'
	import oliUserApi from '@/api/oli-user.js'
	export default {
		data() {
			return {
				odphone:'',
				oldPhone: uni.getStorageSync('oldPhone'),
				loginUser: uni.getStorageSync('loginUser'),
				auth: {},
				type: 'oldPhone',
				code: "",
				tips: '获取验证码',
				frozen: false ,// 冷却时间
				verifyCodeToken:''
			}
		},
		onLoad() {
			let phones = uni.getStorageSync('loginUser')
			this.odphone =phones.userPhone
		},
		methods: {
			nextStep() {
				if (this.code) {
					const data3 = {
						phone: this.loginUser.userPhone,
						code: this.code,
						type: this.type,
						verifyCodeToken : this.verifyCodeToken
					}
					oliUserApi.checkOldPhoneCode(data3).then(res => {
						if (res.code == 20000) {
							uni.showToast({
								title: res.msg
							})
							setTimeout(() => {
								uni.navigateTo({
									url: '/packageSecurity/changePhone/changePhone',
									fail: (err) => {
										console.log(err)
									}
								})
							}, 800);

						}
					})
				} else {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					});
				}
			},
			sendMsg() {
				if (!this.frozen) {
					const data2 = {
						phone: this.loginUser.userPhone
					}
					oliUserApi.sendOldPhoneSms(data2).then(res => {
						console.log('res', res)
						this.verifyCodeToken = res.data.verifyCodeToken
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						if (res.code == 20000) {
							this.frozen = true
							let second = 60
							this.tips = `${second}秒后重发`
							setTimeout(() => {
								this.frozen = false
								clearInterval(timer)
								this.tips = `发送验证码`
							}, 1000 * 60);

							const timer = setInterval(() => {
								second--
								if (second) {
									this.tips = `${second}秒后重发`
								} else {
									this.tips = `发送验证码`
								}
							}, 1000)


						}

					})
				}
			},
		}
	}
</script>

<style scoped>
	.mini-left-border {
		border-left: 1px solid #999;
		padding-left: 1rem;
	}
</style>
