<template>
	<view class="main">
		<TopBar title="更换绑定手机"/>
		<view v-if="!next">
			<view class="set_title">请完成以下认证</view>
			<view class="set_subtitle">请输入{{phone.replace(/(\d{3})\d*(\d{4})/,"$1****$2")}}收到的短信验证码</view>
			<view class="flex confirm_box">
				<input type="text" class="code_input" v-model="code" placeholder="请输入手机验证码">
				<text class="get_code" v-if="codeFlag" @click="getCode()">获取验证码</text>
				<text v-else class="get_code grey_bg">{{countdown}}</text>
			</view>
			<view class="nextstep" @click="nextStep()">下一步</view>
		</view>
		<view v-else>
			<view class="set_title">请输入新手机号码</view>
			<view class="set_tip">验证号码后即可更换绑定手机</view>
			<input type="text" class="set_input" v-model="newPhone" placeholder="请输入新更换的手机号">
			<view class="flex confirm_box">
				<input type="text" class="code_input" v-model="newCode" placeholder="请输入手机验证码">
				<text class="get_code" v-if="newPhoneCodeFlag" @click="getNewCode()">获取验证码</text>
				<text v-else class="get_code grey_bg">{{newCountDown}}</text>
			</view>
			<view class="nextstep" style="margin-top: 108rpx;" @click="confirm()">确认</view>
		</view>
		<view class="success_page" v-if="changeSuccess">
			<image src="../../../static/common/icon_chenggong@2x.png"></image>
			<text>修改成功！</text>
			<view class="nextstep" @click="returnHome()">确认</view>
		</view>
	</view>
</template>

<script>
	import TopBar from '@/components/TopBar/TopBar';
	export default {
		data() {
			return {
				codeFlag: true,
				newPhoneCodeFlag: true,
				countdown: '(60)重新获取',
				newCountDown: '(60)重新获取',
				next: false,
				code: '',
				newPhone: '',
				newCode: '',
				changeSuccess: false
			}
		},
		props: {
			phone: {
				type: String
			}
		},
		methods: {
			getCode() {
				if(this.codeFlag) {
					uni.request({
						url: `/uni/api/mobile_msg/change/${this.phone}`,
						method: 'GET',
						dataType: 'json',
						success: (res) => {
							if(res.data.code === 0) {
								uni.showToast({
									title: '短信已发送',
									icon: 'none'
								})
							}
						}
					});
					let seconds = 60;
					this.codeFlag = false;
					let timer = setInterval(() => {
						seconds-=1;
						this.countdown = `(${seconds})重新获取`;
						if(seconds === 0) {
							clearInterval(timer);
							this.codeFlag = true;
							this.countdown = '(60)重新获取';
						}
					}, 1000);
				}
			},
			getNewCode() {
				if(!/^1[3456789]\d{9}$/.test(this.newPhone)) {
					uni.showToast({
						title: '手机号不正确',
						icon: 'none'
					})
					return
				}
				if(this.newPhoneCodeFlag) {
					uni.request({
						url: `/uni/api/mobile_msg/change/${this.newPhone}`,
						method: 'GET',
						dataType: 'json',
						success: (res) => {
							if(res.data.code === 0) {
								uni.showToast({
									title: '短信已发送',
									icon: 'none'
								})
							}
						}
					});
					let seconds = 60;
					this.newPhoneCodeFlag = false;
					let timer = setInterval(() => {
						seconds-=1;
						this.newCountDown = `(${seconds})重新获取`;
						if(seconds === 0) {
							clearInterval(timer);
							this.newPhoneCodeFlag = true;
							this.newCountDown = '(60)重新获取';
						}
					}, 1000);
				}
			},
			nextStep() {
				if(!/^\d{6}$/.test(this.code)) {
					uni.showToast({
						title: '请输入6位数字验证码',
						icon: 'none'
					})
					return
				}
				uni.request({
					url: `/uni/api/member/check_code/${this.code}`,
					method: 'GET',
					dataType: 'json',
					success: (res) => {
						if(res.data.code === 0) {
							this.next = true;
							this.countdown = '(60)重新获取';
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'none'
							});
						}
					}
				})
			},
			confirm() {
				if(!/^\d{6}$/.test(this.newCode)) {
					uni.showToast({
						title: '请输入6位数字验证码',
						icon: 'none'
					})
					return
				}
				uni.request({
					url: `/uni/api/member/change_mobile`,
					method: 'POST',
					data: {
						code: this.newCode,
						phone_mob: this.newPhone
					},
					dataType: 'json',
					success: (res) => {
						if(res.data.code === 0) {
							this.changeSuccess = true;
						} else {
							uni.showToast({
								title: res.data.message,
								icon: 'none'
							});
						}
					}
				})
			},
			returnHome() {
				this.$jump('/pages/setaccount/setaccount', 2);
			}
		},
		components: {
			TopBar
		}
	}
</script>

<style lang="less" scoped>
	.main {
		padding: 80rpx 40rpx 0;
		.flex {
			display: flex;
		}
		.set_title {
			font-size: 32rpx;
			color: #212121;
			line-height: 44rpx;
			font-family:PingFangSC-Medium,PingFang SC;
			font-weight:500;
			margin-top: 40rpx;
		}
		.set_tip {
			color: #7C7C7C;
			font-size: 26rpx;
			line-height: 36rpx;
			margin-top: 4rpx;
		}
		.set_subtitle {
			font-size: 28rpx;
			color: #212121;
			line-height: 40rpx;
			margin-top: 16rpx;
			font-size: 30rpx;
		}
		.set_input {
			width: 670rpx;
			height: 88rpx;
			line-height: 88rpx;
			background-color: #f5f5f5;
			padding-left: 20rpx;
			box-sizing: border-box;
			border-radius: 8rpx;
			margin-top: 32rpx;
		}
		.set_input::placeholder {
			color: #aeaeae;
		}
		.confirm_box {
			justify-content: space-between;
			margin-top: 24rpx;
			.code_input {
				width: 400rpx;
				height: 88rpx;
				line-height: 88rpx;
				background-color: #f5f5f5;
				color: #212121;
				font-size: 30rpx;
				padding-left: 20rpx;
				box-sizing: border-box;
				border-radius: 8rpx;
			}
			.code_input::placeholder {
				color: #aeaeae;
			}
			.get_code {
				width: 250rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				font-size: 30rpx;
				background-color: #FFCD00;
				border-radius: 16rpx;
			}
			.grey_bg {
				background-color: #ECECEC;
				color: #7c7c7c;
			}
		}
		.nextstep {
			background-color: #FFCD00;
			border-radius: 16rpx;
			text-align: center;
			width: 670rpx;
			height: 88rpx;
			line-height: 88rpx;
			margin: 208rpx auto 0;
			font-size: 30rpx;
		}
		.success_page {
			display: flex;
			flex-direction: column;
			align-items: center;
			position: absolute;
			left: 0;
			top: 0;
			z-index: 10;
			width: 100%;
			height: 100vh;
			background-color: #fff;
			image {
				width: 152rpx;
				height: 152rpx;
				margin-top: 282rpx;
			}
			text {
				font-size: 32rpx;
				font-family:PingFangSC-Medium,PingFang SC;
				font-weight:500;
				line-height: 44rpx;
				margin: 16rpx auto 78rpx;
			}
		}
	}
</style>