<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" style="margin-top: 40rpx;">请完成以下认证</view>
			<view class="set_title" style="margin-top: 40rpx;">设置新的支付密码</view>
			<input password class="set_input" v-model="new_password" placeholder="设置6位支付密码">
			<input password class="set_input" v-model="new_password_repeat" placeholder="再一次输入支付密码">
			<view class="btn" style="margin-top: 80rpx;" @click="checkPass()">确认</view>
		</view>
		<view class="success_page" v-if="changeSuccess">
			<image src="../../../static/common/icon_chenggong@2x.png"></image>
			<text>修改成功！</text>
			<view class="btn" @click="returnHome()">确认</view>
		</view>
	</view>
</template>

<script>
	import TopBar from '@/components/TopBar/TopBar';
	import md5 from 'md5';
	export default {
		data() {
			return {
				old_password: '',
				new_password: '',
				new_password_repeat: '',
				changeSuccess: false,
				next: false,
				codeFlag: true,
				countdown: '(60)重新获取',
				code: '',
			}
		},
		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);
				}
			},
			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'
							});
						}
					}
				})
			},
			checkPass() {
				if(this.new_password !== this.new_password_repeat) {
					uni.showToast({
						title: '两次密码输入不一致',
						icon: 'none'
					});
					return
				}
				if(!/^[0-9a-zA-Z_]{6}$/.test(this.new_password)) {
					uni.showToast({
						title: '请设置6位支付密码,可以是字母、数字或下划线',
						icon: 'none',
						duration: 2000
					});
					return
				}
				uni.request({
					url: '/uni/api/member/change_payword',
					method: 'POST',
					data: {
						old_password: md5(this.old_password),
						newpassword: md5(this.new_password),
						confirm_password: md5(this.new_password_repeat)
					},
					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;
			margin-top: 24rpx;
		}
		.set_subtitle {
			font-size: 28rpx;
			color: #212121;
			line-height: 40rpx;
			margin-top: 16rpx;
			font-size: 30rpx;
		}
		.set_tip {
			color: #7C7C7C;
			font-size: 26rpx;
			line-height: 36rpx;
			margin-top: 4rpx;
		}
		.set_input {
			width: 670rpx;
			height: 88rpx;
			line-height: 88rpx;
			background-color: #f5f5f5;
			padding-left: 20rpx;
			box-sizing: border-box;
			border-radius: 8rpx;
			margin-top: 20rpx;
		}
		.set_input::placeholder {
			color: #aeaeae;
		}
		.btn {
			background-color: #FFCD00;
			border-radius: 16rpx;
			text-align: center;
			width: 670rpx;
			height: 88rpx;
			line-height: 88rpx;
			margin: 162rpx 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;
			}
		}
	}
	.nextstep {
		background-color: #FFCD00;
		border-radius: 16rpx;
		text-align: center;
		width: 670rpx;
		height: 88rpx;
		line-height: 88rpx;
		margin: 208rpx auto 0;
		font-size: 30rpx;
	}
	.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;
		}
	}
</style>