<template>
	<view class="page-content ">
		<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="boforeChange">
			<view class="solid-bottom margin-bottom-lg">
				<view class="cu-form-group  padding-top-sm padding-bottom-sm">
					<view class="title text-black ">新手机号</view>
					<input type="number" :maxlength="11" v-model="newPhone" placeholder="请输入手机号" name="input" />
				</view>
				<view class="cu-form-group  padding-top-sm solid-bottom padding-bottom-sm">
					<view class="title text-black ">验证码</view>
					<input type="number" :maxlength="6" v-model="authCode" placeholder="请输入验证码" name="input" />
					<text :class="frozen?'text-gray':'oil-main-color'" @tap="sendMsg">{{tips}}</text>
				</view>
			</view>
			<view class="margin-left padding-bottom-lg">
				<text class="cuIcon-infofill padding-right-xs  text-sm oil-main-color"></text>
				<text class="text-sm text-grey">更换成功将会重新登录</text>
			</view>
			<view class="padding-xl margin-top-lg ">
				<button class="bg-main-oil margin-top-lg" @tap="nextStep">提交</button>
			</view>
		</view>
		<!-- <view class="afterChange">
			<view class="">
				<view class="cu-avatar xl round margin-left bg-red">
					<text class="cuIcon-roundcheck"></text>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	import cloudSiteApi from '@/api/cloud-site.js'
	import oliUserApi from '@/api/oli-user.js'
	export default {
		data() {
			return {
				oldPhone: uni.getStorageSync('oldPhone'),
				newPhone: '',
				loginUser: uni.getStorageSync('loginUser'),
				auth: {},
				type: 'newPhone',
				authCode: "",
				tips: '获取验证码',
				frozen: false ,// 冷却时间
				verifyCodeToken:''
			}
		},
		methods: {
			nextStep() {
				if (this.authCode) {
					const data3 = {
						phone: this.newPhone,
						code: this.authCode,
						type: this.type,
						verifyCodeToken : this.verifyCodeToken,
						id:this.loginUser.id
					}
					oliUserApi.changeNewPhone(data3).then(res => {
						if (res.code == 20000) {
							uni.showToast({
								title: res.msg + '请重新登录'
							})
							setTimeout(() => {
								uni.clearStorage()
								uni.reLaunch({
									url: '/pages/login/boforeLogin/boforeLogin',
									fail: (err) => {
										console.log(err)
									}
								})
							}, 1000);

						}
					})
				} else {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					});
				}

			},
			sendMsg() {
				if (!this.frozen) {
					if (this.newPhone) { 
						const data2 = {
							phone: this.newPhone
						}
						oliUserApi.sendNewPhoneSms(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)


							}

						})
					} else {
						uni.showToast({
							title: '请输入新手机号'
						});
					}
				}
			},
		}
	}
</script>

<style scoped>

</style>
