<template>
	<view class="page-container">
		<view class="find-password">
			<view class="nav-tabs">
				<u-tabs
					lineColor="#DA2538"
					line-width="60px"
					line-hight="3px"
					:scrollable="false"
					:active-style="{ fontSize: '18px', fontWeight: 'bold', color: '#fff' }"
					:list="navs"
					:current="navIndex"
					@click="tabsClick"
				></u-tabs>
			</view>
			<view class="card">
				<view class="login-input card-content">
					<view class="input-box align-center" v-if="navIndex == 0">
						<view class="code">+86</view>
						<input type="number" v-model="phone" placeholder="请输入手机号码" />
					</view>
					<view class="input-box align-center" v-else>
						<input type="text" v-model="email" placeholder="请输入邮箱" />
					</view>
					<view class="input-box align-center" v-if="email_sms || phone_sms">
						<input type="number" v-model="code" placeholder="请输入验证码" />
						<u-code ref="uCode" keep-running start-text="获取验证码" change-text="Xs后重发" @change="codeChange"></u-code>
						<text :text="codeTip" class="code-tip" @click="getCode">{{ codeTip }}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="login-button">
			<u-button shape="circle" :disabled="loading" :loading="loading" color="linear-gradient(90deg, #DA2538 0%, #F75F68 100%)" text="下一步" @click="next"></u-button>
		</view>
	</view>
</template>

<script>
import { user } from '@/utils/api';
const phone = /^1[345789]\d{9}$/;
const code = /^[a-zA-Z0-9]{4,10}$/;
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
export default {
	data() {
		return {
			phone: '',
			code: '',
			codeTip: '',
			loading: false,
			navs: [
				{
					name: '手机号找回'
				},
				{
					name: '邮箱找回'
				}
			],
			navIndex: 0,
			ac: 'phone',
			email: '',
			email_sms: false,
			phone_sms: false
		};
	},
	methods: {
		async bindInfo() {
			let res = await user.codeMsg().then();
			if (res.code == 1) {
				this.email_sms = res.data.email_sms;
				this.phone_sms = res.data.phone_sms;
			}
		},
		tabsClick(data) {
			if (this.navIndex != data.index) {
				this.navIndex = data.index;
				this.ac = this.navIndex == 0 ? 'phone' : 'email';
			}
		},
		async next() {
			switch (this.navIndex) {
				case 0:
					if (!phone.test(this.phone)) {
						uni.showToast({
							icon: 'none',
							title: '请输入正确的手机号码~!',
							duration: 3000
						});
						return;
					}
					break;
				case 1:
					if (!emailRegex.test(this.email)) {
						uni.showToast({
							icon: 'none',
							title: '请输入正确的邮箱地址~!',
							duration: 3000
						});
						return;
					}
					break;
				default:
					break;
			}
			if (this.phone_sms == true && this.ac == 'phone') {
				if (!code.test(this.code)) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的验证码~!',
						duration: 3000
					});
					return;
				}
			}
			if (this.email_sms == true && this.ac == 'email') {
				if (!code.test(this.code)) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的验证码~!',
						duration: 3000
					});
					return;
				}
			}

			this.loading = true;
			await user
				.findPassword(this.phone, this.email, this.code, this.ac)
				.then((res) => {
					uni.showToast({
						icon: 'none',
						title: res.msg,
						duration: 3000
					});
					if (res.code === 1) {
						uni.redirectTo({
							url: '/pages/user/password?token=' + res.data.token
						});
					}
				})
				.catch((e) => {});
			this.loading = false;
		},
		codeChange(text) {
			this.codeTip = text;
		},
		getCode() {
			if (this.$refs.uCode.canGetCode) {
				switch (this.navIndex) {
					case 0:
						if (!phone.test(this.phone)) {
							uni.showToast({
								icon: 'none',
								title: '请输入正确的手机号码~!',
								duration: 3000
							});
							return;
						}
						break;
					case 1:
						if (!emailRegex.test(this.email)) {
							uni.showToast({
								icon: 'none',
								title: '请输入正确的邮箱地址~!',
								duration: 3000
							});
							return;
						}
						break;
					default:
						break;
				}

				this.$refs.uCode.start();
				user.sendMsg(this.phone, this.email, 2, this.ac).then((res) => {
					uni.showToast({
						icon: 'none',
						title: res.msg,
						duration: 3000
					});
				});
			}
		}
	}
};
</script>

<style lang="scss">
.page-container {
	padding: 15px 0;
	background-color: $uni-bg-color;
	.nav-tabs {
		margin-left: 15px;
		margin-bottom: 40px;
		height: 50px;
		position: relative;
		z-index: 1;
	}
	.find-password {
		margin: 0 15px;
		.login-input {
			padding: 20px;
			.input-box:first-child {
				margin-top: 0;
			}
		}
	}
}
</style>
