<template>
	<view class="login-container">
		<image src="../../static/logo.png" mode="widthFix" class="title-iamge"></image>
		<text class="login-text">欢迎登陆</text>

		<view class="login-form">
			<input-login :inputData="inputData" @hangleInput="hangleInput" />
			<input-login :inputData="inputData1" @hangleInput="hangleInput" />
		</view>

		<button @tap="clickNextStep" class="getCaptcha">登录</button>
		<!-- <image src="https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/logo/logo.png" mode="" class="next-step" @click="clickNextStep"></image> -->
	</view>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { login } from '@/api/login';
import inputLogin from '@/components/inputLogin.vue';
let inputData = reactive({
	inputValue: '' as any,
	iconfont: 'icon-a-ziyuan16',
	placeholder: '手机号码',
	type: 'text',
	checkType: 'phone',
	check: false,
	checkContent: '请输入有效手机号',
});

let inputData1 = reactive({
	inputValue: '' as any,
	iconfont: 'icon-mima',
	placeholder: '密码',
	type: 'password',
	checkType: 'passWord',
	check: false,
	checkContent: '请输入密码',
});

let hangleInput = (Value: any, type: string) => {
	if (type === 'phone') {
		let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
		if (!reg.test(Value) || !Value) inputData.check = true;
		else inputData.check = false;
	} else {
		if (!Value) inputData1.check = true;
		else inputData1.check = false;
	}
};

let clickNextStep = () => {
	if (!inputData.inputValue || !inputData.inputValue) {
		inputData.check = true;
		inputData1.check = true;
		return;
	} else if (!inputData.check || !inputData1.check) {
		initLogin(inputData.inputValue, inputData1.inputValue);
	} else {
		console.log('检验不通过');
	}
};

// user123
let initLogin = async (mobile: number, password: string) => {
	uni.clearStorage();
	let res: any = await login({ mobile, password });
	if (res.data.code === 200) {
		uni.setStorage({
			key: 'token',
			data: res.data.data.token,
			success: () => {
				uni.switchTab({
					url: '../profile/index',
					success() {
						uni.setStorage({
							key: 'mobile',
							data: inputData.inputValue,
							success() {
								uni.setStorage({
									key: 'nickName',
									data: res.data.data.userInfo.nickName,
									success() {
										uni.showToast({
											title: '登陆成功',
											icon: 'none',
											duration: 1000,
										});
									},
								});
							},
						});
					},
				});
			},
		});
	} else {
		console.log('5000');
		uni.showToast({
			title: '手机号或密码错误',
			icon: 'none',
			duration: 2000,
		});
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: #fff;
}
.login-container {
	padding-top: 40%;
	box-sizing: border-box;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	.getCaptcha {
		width: 400rpx;
		background-color: rgb(253, 243, 208);
		color: $u-tips-color;
		border: none;
		font-size: 30rpx;
		margin-top: 20rpx;
		&::after {
			border: none;
		}
	}
	.title-iamge {
		width: 400rpx;
	}
	.login-text {
		margin-top: 10%;
		font-weight: 700;
		font-size: 40rpx;
		color: #1d2b5f;
	}
	.login-form {
		margin-top: 15%;
	}
	.next-step {
		margin-top: 20rpx;
		width: 245rpx;
		height: 90rpx;
	}
	.footer-text {
		margin-top: 40%;
		display: block;
		width: 100%;
		color: #d79972;
		font-size: 30rpx;
		text-align: center;
		align-self: flex-end;
	}
}
</style>
