<template>
	<page-meta :page-style="themeColor"></page-meta>
	<div class="view">
		<div class="tips">
			更换手机号后，下次登录可使用新手机号登录。
			<br />
			当前手机号：{{ userInfo.mobile }}
		</div>

		<div class="content">
			<u-input v-model="form.password" placeholder="请输入登录密码"></u-input>
			<u-input v-model="form.mobile" placeholder="请输入新手机号"></u-input>
			<u-input placeholder="请输入验证码" v-model="form.code">
				<div v-if="codeTime == 60" slot="suffix" class="suffix" @click="Verification">
					获取验证码
				</div>
				<div v-else slot="suffix" class="suffix" style="color: #ccc;">{{ codeTime }}s</div>
			</u-input>

			<div class="btn" @click="btn">确认修改</div>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			codeTime: 60,
			count_code: false,
			form: {
				mobile: '',
				code: '',
				key: '',
				password: '',
				password1: ''
			},
			show_password1: false,
			show_password2: false,
			interval: null
		};
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	methods: {
		Verification() {
			if (this.count_code) return;
			// if (!uni.$u.test.mobile(this.form.mobile)) {
			// 	this.$util.showToast({
			// 		title: '请输入旧的手机号'
			// 	});
			// 	return
			// }
			if (!uni.$u.test.mobile(this.form.mobile)) {
				this.$util.showToast({
					title: '请输入新的手机号'
				});
				return;
			}
			this.$api.sendRequest({
				url: '/api/member/bindmobliecode',
				data: {
					mobile: this.form.mobile
				},
				success: res => {
					this.form.key = res.data.key;
					this.$util.showToast({
						title: res.message
					});
					this.countDown();
					this.form.key = res.data.key;
				},
				fail: res => {}
			});
		},
		//倒计时
		countDown() {
			let that = this;
			this.interval = setInterval(() => {
				that.codeTime = that.codeTime - 1;
				if (that.codeTime < 10) that.codeTime = '0' + that.codeTime;
				if (that.codeTime <= 0) {
					clearInterval(that.interval);
					// that.count_code = false;
					that.codeTime = 60;
				}
			}, 1000);
		},
		btn() {
			// if (!uni.$u.test.mobile(this.form.mobile)) {
			// 	this.$util.showToast({
			// 		title: '请输入旧的手机号'
			// 	});
			// 	return
			// }
			if (!this.form.password.length > 0) {
				this.$util.showToast({
					title: '请输入登录密码'
				});
				return;
			}
			if (!uni.$u.test.mobile(this.form.mobile)) {
				this.$util.showToast({
					title: '请输入新的手机号'
				});
				return;
			}
			this.$api.sendRequest({
				url: '/api/member/modifymobile',
				data: {
					password: this.form.password, //登录密码
					mobile: this.form.mobile, //手机号
					key: this.form.key, //获取动态码
					code: this.form.code //
				},
				success: res => {
					this.$util.showToast({
						title: res.message
					});
					uni.removeStorage({
						key: 'token',
						success: res => {
							uni.setStorageSync('loginLock', 1);
							//购物车数量
							uni.removeStorageSync('userInfo');
							this.$store.dispatch('getCartNumber').then(e => {});
							this.$util.redirectTo('/pages_tool/login/login');
						}
					});
				},
				fail: res => {}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.view {
	min-height: 100vh;
	background-color: white;
	.tips {
		padding: 24rpx 30rpx;
		background: rgba(33, 187, 243, 0.08);
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: $base-color;
		line-height: 40rpx;
	}
	.content {
		padding: 40rpx;
		::v-deep {
			.u-input--radius {
				height: 92rpx;
				background: #f6f6f6;
				border-radius: 16rpx;
				border: 0;
				
				margin-bottom: 30rpx;
			}
			.uni-input-input{
				padding: 0 38rpx;
			}
			
			.uni-input-placeholder {
				margin-left: 38rpx;
			}
		}
		.suffix {
			width: 140rpx;
			height: 40rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #ef6154;
			line-height: 40rpx;
			margin-right: 24rpx;
		}
		.codeTime {
			color: #999999;
		}
		.btn {
			margin-top: 80rpx;
			height: 80rpx;
			background: $base-color;
			border-radius: 50rpx;

			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 600;
			color: #ffffff;

			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}
</style>
