<template>
	<view class="page page-box">
		<view class="saveThePhoneNumber">

			<!-- <view class="mobilePhone">
				<u-input border="none" placeholder="请输入手机号" v-model="form.phone">
					<template #prefix>
						<span style="margin-right: 10rpx; font-size: 24rpx;color: #a1a1a1;font-weight: 600;">
							+86
						</span>
					</template>
				</u-input>
			</view> -->


			<view class="tip">
				向您绑定的手机号 199xxxx1234 发送验证码
			</view>

			<view class="input">
				<view class="verificationCode">
					<u-input v-model="form.password" border="none" placeholder="请输入验证码"></u-input>
				</view>

				<view class="toObtain">
					<u-code keepRunning ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
					<u-button @click="getCode" :text="tips" :disabled="!['获取验证码', '重新获取'].includes(tips)"
						:color="['获取验证码', '重新获取'].includes(tips) ? 'rgb(247, 56, 38)' : '#cccccc'"></u-button>
				</view>
			</view>

			<view class="mobilePhone">
				<u-input border="none" placeholder="请输入新密码" v-model="form.newPassword">
					<template #prefix>
						<span style="margin-right: 10rpx; font-size: 24rpx;color: #a1a1a1;font-weight: 600;">
							新密码
						</span>
					</template>
				</u-input>
			</view>

			<view class="mobilePhone">
				<u-input border="none" placeholder="请重新输入密码" v-model="form.phone">
					<template #prefix>
						<span style="margin-right: 10rpx; font-size: 24rpx;color: #a1a1a1;font-weight: 600;">
							确认密码
						</span>
					</template>
				</u-input>
			</view>

			<view style="width: 100%;margin: 20rpx auto;border-radius: 18rpx;font-weight: 600;overflow: hidden;">
				<u-button color="rgb(247, 56, 38)" text="修改密码" @click="saveThePhoneNumber"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	components: {},
	data() {
		return {
			tips: "",
			form: {
				password: "",
				newPassword: "",
				code: ""
			}
		};
	},
	onLoad() { },
	onShow() {
	},
	methods: {

		codeChange(text) {
			this.tips = text;
		},

		/**
		 * 获取验证码并发送给指定手机号。
		 * @returns {void}
		 */
		async getCode() {
			if (!/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(this.form.phone)) {
				return uni.$u.toast('请检查手机号格式');
			}

			if (this.form.newPassword != this.form.password) {
				return uni.$u.toast('两次输入密码不一致');
			}

			if (this.$refs.uCode.canGetCode) {
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码'
				});

				// setTimeout(() => {
				// 	uni.hideLoading();
				// 	// 这里的提示会被this.start()方法中的提示覆盖
				// 	uni.$u.toast('验证码已发送');
				// 	// 通知验证码组件内部开始倒计时
				// 	this.$refs.uCode.start();
				// }, 2000);
				const res = await this.$api.user.send({
					mobile: this.form.phone
				})

				if (res.code === 0) {
					this.$refs.uCode.start();
				} else {
					uni.$u.toast(res.msg);
				}
				uni.hideLoading();
			} else {
				uni.$u.toast('倒计时结束后再发送');
			}
		},

		/**
		 * 保存手机号码并进行验证。
		 * @returns {void}
		 */
		async saveThePhoneNumber() {
			// if (!/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(this.form.phone)) {
			// 	return uni.$u.toast('请检查手机号格式');
			// }

			if (this.form.code.trim() === "") {
				return uni.$u.toast('请输入验证码');
			}

			// 执行保存手机号码的逻辑

			const res = await this.$api.user.bind_merge({
				mobile: this.form.phone,
				sms_code: this.form.code
			})

			if (res.code === 0) {
				uni.$u.toast('绑定成功');
			} else {
				uni.$u.toast(res.msg);
			}

			this.getData();
		}

	},
	computed: {},
	watch: {},
	onReachBottom() { },
	onPullDownRefresh() {
		console.log("加载");
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 200);
	},
}
</script>

<style lang="scss" scoped>
.page {
	position: relative;
	min-height: 100%;
	background: #f2f2f2;
	padding: 24rpx 0 100rpx;
	padding: 24rpx 0 calc(constant(safe-area-inset-bottom) + 100rpx);
	padding: 24rpx 0 calc(env(safe-area-inset-bottom) + 100rpx);
	box-sizing: border-box;
}

.m-box {
	margin-bottom: 24rpx;
	padding: 0 24rpx;
	background: #fff;
	width: 100%;
}

.payList {
	.item {
		display: flex;
		align-items: center;
		height: 120rpx;
		border-top: 1px solid #f8f8f8;
	}

	.let {
		flex: 1;
		overflow: hidden;
		display: flex;
		align-items: center;
	}

	.img {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
		width: 60rpx;
		height: 60rpx;
	}

	image {
		// width: 100%;
		height: 50rpx;
	}
}

.tip {
	font-size: 22rpx;
	color: #a0a0a0;
	font-weight: bold;
	margin-bottom: 14rpx;
	margin-left: 10rpx;
}

.m-tit {
	display: flex;
	align-items: center;
	height: 100rpx;
	font-size: 32rpx;
	color: #262626;
	font-weight: bold;
}

.payTime {
	display: flex;
	align-items: center;
	justify-content: center;
	padding-top: 50rpx;
	font-size: 24rpx;
	color: #8c8c8c;
}

.price {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	padding: 10rpx 0 30rpx;
	color: #262626;
	font-size: 80rpx;
	line-height: 1;
	font-weight: bold;

	&:before {
		content: "¥";
		font-size: 48rpx;
	}
}

::v-deep {
	.u-count-down__text {
		padding-left: 8rpx;
		color: #8c8c8c;
		font-size: 24rpx;
	}
}

.btn {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	padding: 12rpx 36rpx 12rpx;
	padding: 12rpx 36rpx calc(constant(safe-area-inset-bottom) + 12rpx);
	padding: 12rpx 36rpx calc(env(safe-area-inset-bottom) + 12rpx);
	background: #fff;

	view {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 76rpx;
		background: linear-gradient(90deg, #f22407 0%, #f84d17 100%);
		border-radius: 18rpx;

		font-size: 26rpx;
		font-weight: bold;
		color: #fff;
	}
}

.saveThePhoneNumber {
	padding: 0 20rpx;

	.mobilePhone {
		background-color: white;
		margin-bottom: 22rpx;
		border-radius: 18rpx;
		padding: 18rpx;
	}

	.input {
		display: flex;
		margin-bottom: 20rpx;
		align-items: center;

		.verificationCode {
			border-radius: 18rpx;
			overflow: hidden;
			background-color: white;
			flex: 1;

			display: flex;
			align-items: center;
			padding: 18rpx;
		}

		.toObtain {
			width: 7em;
			margin-left: 22rpx;
			border-radius: 18rpx;
			overflow: hidden;
			height: 100%;
		}
	}
}
</style>
