<template>
	<view class="login-wrapper">
		<view class="login-top">
			<text>欢迎注册</text>
			<image style="width: 320rpx; height: 76rpx" :src="vdata.siteInfos.appTopImgUrl" />
		</view>
		<view class="login-bottom jeepay-form">
			<uni-forms ref="formRef" label-width="0" :model="vdata.formData" :rules="rules">
				<!-- <uni-forms-item name="mchName">
					<uni-easyinput class="jeepay-easyinput" placeholder="请输入商户名称" v-model="vdata.formData.mchName" :clearable="false">
						<template #prefixIcon><image src="@/static/login/icon-merchantuser.svg" class="input-icon" /></template>
					</uni-easyinput>
				</uni-forms-item> -->
				<uni-forms-item name="phone">
					<uni-easyinput
						class="jeepay-easyinput"
						v-model="vdata.formData.phone"
						type="number"
						:maxlength="11"
						:disabled="!vdata.allowSendMsgFlag"
						placeholder="请输入手机号"
						:clearable="false"
					>
						<template #prefixIcon><image src="@/static/login/icon-phone.svg" class="input-icon" /></template>
					</uni-easyinput>
				</uni-forms-item>
				<uni-forms-item>
					<!-- 手机验证码， 不限制数字还是本文， 如果发送为文本则无需app升级。  -->
					<view style="display: flex">
						<uni-easyinput class="jeepay-easyinput" :maxlength="6" placeholder="请输入验证码" v-model="vdata.formData.vercode" :clearable="false">
							<template #prefixIcon><image src="@/static/login/icon-sms-code.svg" class="input-icon" /></template>
						</uni-easyinput>
						<image :src="vdata.formData.imgCodeUrl" style="width: 200rpx; height: 110rpx; margin-left: 10rpx" @click="getCode" mode=""></image>
					</view>
				</uni-forms-item>
				<uni-forms-item name="code">
					<!-- 手机验证码， 不限制数字还是本文， 如果发送为文本则无需app升级。  -->
					<uni-easyinput class="jeepay-easyinput" :maxlength="6" placeholder="请输入手机验证码" v-model="vdata.formData.code" :clearable="false">
						<template #prefixIcon><image src="@/static/login/icon-sms-code.svg" class="input-icon" /></template>
						<template #suffixIcon>
							<view style="color: rgba(88, 132, 204, 1); font-weight: 400; font-size: 32rpx" @tap="sendSmscodeFunc">{{ vdata.sendMsgText }}</view>
						</template>
					</uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="pwd">
					<uni-easyinput
						class="jeepay-easyinput"
						:type="vdata.isShowPwd ? 'text' : 'password'"
						v-model="vdata.formData.pwd"
						:clearable="false"
						placeholder="请输入登录密码"
					>
						<template #prefixIcon><image src="@/static/login/icon-pw.svg" class="input-icon" /></template>
						<template #suffixIcon>
							<view class="show-tips" style="color: rgba(88, 132, 204, 1); font-weight: 400; font-size: 32rpx" @tap="vdata.isShowPwd = !vdata.isShowPwd">
								<!-- {{ vdata.isShowPwd ? '隐藏' : '显示' }} -->
								<uni-icons type="eye" size="24" v-if="vdata.isShowPwd"></uni-icons>
								<uni-icons type="eye-slash" size="24" v-else></uni-icons>
							</view>
						</template>
					</uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="confirmPwd">
					<uni-easyinput
						class="jeepay-easyinput"
						:type="vdata.isShowConfirmPwd ? 'text' : 'password'"
						placeholder="请确认登录密码"
						v-model="vdata.formData.confirmPwd"
						:clearable="false"
						:passwordIcon="false"
					>
						<template #prefixIcon><image src="@/static/login/icon-confirm-pw.svg" class="input-icon" /></template>
						<template #suffixIcon>
							<view
								class="show-tips"
								style="color: rgba(88, 132, 204, 1); font-weight: 400; font-size: 32rpx"
								@tap="vdata.isShowConfirmPwd = !vdata.isShowConfirmPwd"
							>
								<!-- {{ vdata.isShowConfirmPwd ? '隐藏' : '显示' }} -->
								<uni-icons type="eye" size="24" v-if="vdata.isShowConfirmPwd"></uni-icons>
								<uni-icons type="eye-slash" size="24" v-else></uni-icons>
							</view>
						</template>
					</uni-easyinput>
				</uni-forms-item>
				<uni-forms-item>
					<uni-easyinput class="jeepay-easyinput" placeholder="请输入邀请码(选填)" v-model="vdata.formData.inviteCode" :clearable="false">
						<template #prefixIcon><image src="@/static/login/icon-invite-code.svg" class="input-icon" /></template>
					</uni-easyinput>
				</uni-forms-item>
			</uni-forms>
			<view class="agreement-policy">
				<view class="select-box">
					<JeepayCheckbox v-model:checked="vdata.isSelectedAgreement" />
					同意商户通
				</view>
				<text class="agreement" @click="go.to('PAGES_STATIC_AGREEMENT')">《用户服务协议》</text>
				<text>与</text>
				<text class="policy" @click="go.to('PAGES_STATIC_POLICY')">《隐私政策》</text>
			</view>
			<Button @tap="mchRegister">注册</Button>
			<view class="register-box">
				<view class="register">
					<text>已有账号？</text>
					<text @tap="go.back()">去登录></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { $mchRegister, $sendSms, $getPasswordRules, $isCode } from '@/http/apiManager.js';
import storageManage from '@/commons/utils/storageManage.js';
import infoBox from '@/commons/utils/infoBox.js';
import go from '@/commons/utils/go.js';
import timer from '@/commons/utils/timer.js';
import formUtil from '@/commons/utils/formUtil.js';

const rules = {
	mchName: {
		rules: [formUtil.rules.requiredInputShowToast('用户名称')]
	},
	pwd: {
		rules: [formUtil.rules.requiredInputShowToast('登录密码')]
	},
	confirmPwd: {
		rules: [formUtil.rules.requiredInputShowToast('确认密码')]
	},
	inviteCode: {
		rules: [formUtil.rules.requiredInputShowToast('邀请码')]
	},
	phone: {
		rules: [formUtil.rules.requiredInputShowToast('手机号')]
	},
	code: {
		rules: [formUtil.rules.requiredInputShowToast('短信验证码')]
	}
};

const formRef = ref();
const vdata = reactive({
	formData: {
		mchName: '', // 用户名称
		pwd: '', // 登录密码
		confirmPwd: '', // 确认密码
		inviteCode: '', // 邀请码
		phone: '', // 手机号
		code: '', // 短信验证码
		imgCodeUrl: ''
	},
	siteInfos: storageManage.siteInfos() || {},
	isSelectedAgreement: false, //是否勾选同意协议
	sendMsgText: '发送验证码',
	allowSendMsgFlag: true, // 是否可发送短信验证码
	passwordRules: /^$/, //密码规则
	passwordRulesText: '' //密码规则提示文字
});

const getCode = () => {
	$isCode().then((res) => {
		console.log(res);
		vdata.formData.imgCodeUrl = res.bizData.imageBase64Data;
		vdata.formData.vercodeToken = res.bizData.vercodeToken;
	});
};

getCode();
onMounted(() => {
	getPasswordRules();
});

const getPasswordRules = () => {
	$getPasswordRules().then(({ bizData }) => {
		vdata.passwordRules = new RegExp(bizData.regexpRules);
		vdata.passwordRulesText = bizData.errTips;
	});
};

const mchRegister = () => {
	if (!vdata.isSelectedAgreement) {
		return infoBox.showToast('请勾选用户隐私政策');
	}
	// 表单验证
	formUtil.validate(formRef.value).then(() => {
		let { pwd, confirmPwd } = vdata.formData;
		if (!vdata.passwordRules.test(pwd) || !vdata.passwordRules.test(confirmPwd)) {
			return infoBox.showToast(vdata.passwordRulesText);
		}
		if (pwd !== confirmPwd) {
			return infoBox.showToast('两次密码输入不一致');
		}
		vdata.formData.mchName = vdata.formData.phone
		$mchRegister(vdata.formData).then(() => {
			infoBox.showToast('注册成功').then(() => {
				go.back();
			});
		});
	});
};

// 点击发送验证码的函数
function sendSmscodeFunc() {
	// 按钮禁用
	if (!vdata.allowSendMsgFlag) {
		return false;
	}

	if (!vdata.formData.vercode) {
		return infoBox.showToast('请输入图像验证码');
	}

	// 验证失败
	if (!formUtil.regexp.mobile.test(vdata.formData.phone)) {
		return infoBox.showToast('请输入正确的手机号');
	}

	vdata.allowSendMsgFlag = false; // 按钮禁用

	let data = {
		phone: vdata.formData.phone,
		vercode: vdata.formData.vercode,
		vercodeToken: vdata.formData.vercodeToken
	};
	// 发送短信验证码
	$sendSms(data, 'register')
		.then(({ bizData }) => {
			infoBox.showSuccessToast('验证码发送成功');
			timer.startTimeoutTask(1, 60, (subTime) => {
				if (subTime <= 0) {
					// 任务结束
					vdata.sendMsgText = '发送验证码';
					vdata.allowSendMsgFlag = true;
					return false;
				}

				vdata.sendMsgText = `${subTime}s后可重新发送`;
			});
		})
		.catch(() => {
			vdata.allowSendMsgFlag = true;
		});
}
</script>

<style lang="scss">
.login-wrapper {
	min-height: 100vh;
	background-color: $v-color-bgrey;
	.login-top {
		display: flex;
		flex-direction: column;
		height: 376rpx;
		padding: 176rpx 70rpx 0;
		box-sizing: border-box;
		background: url('/static/indexImg/user-bg.svg') no-repeat;
		background-size: cover;
		text:first-child {
			margin-bottom: 30rpx;
			font-size: 38rpx;
			font-weight: 500;
			color: rgba(0, 0, 0, 0.8);
		}
		text:last-child {
			font-size: 50rpx;
			font-weight: 600;
			color: #48c0ff;
		}
	}
	.login-bottom {
		height: calc(100vh - 376rpx);
		padding: 50rpx;
		box-sizing: border-box;
		border-radius: 60rpx 60rpx 0 0;
		background-color: #fff;
		.agreement-policy {
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			margin-top: 10rpx;
			margin-bottom: 50rpx;
			font-size: 26rpx;
			color: #8c8c8c;
			.select-box {
				display: flex;
				align-items: center;
				.select-img {
					width: 46rpx;
					height: 46rpx;
				}
			}
			.agreement,
			.policy {
				color: #1d79fd;
			}
		}
		.register-box {
			display: flex;
			justify-content: space-between;
			padding: 0 30rpx;
			padding-bottom: 100rpx;
			margin-top: 50rpx;
			font-size: 26rpx;
			font-weight: 400;
			.register {
				text:last-child {
					color: #1d79fd;
				}
			}
			.forget {
				color: #1d79fd;
			}
		}
	}
}
</style>
