<template>
	<view class="login-container">
		<image src="/static/msjf-picture/msjf-06.png" mode="scaleToFill" class="title-iamge"></image>
		<text class="login-text">欢迎登陆</text>
		<text class="login-text1">茅山玖坊高端定制酒</text>

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

		<image src="/static/msjf-picture/msjf-07.png" mode="" class="next-step" @click="clickNextStep"></image>

		<text class="footer-text">定制管理平台</text>
	</view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { login } from '@/services/api';
import inputLogin from '@/components/inputLogin.vue';

let inputData = reactive({
	inputValue: 15616168157,
	iconfont: 'icon-a-ziyuan16',
	placeholder: '手机号码',
	type: 'text',
	checkType: 'phone',
	check: false,
	checkContent: '请输入有效手机号'
});

let inputData1 = reactive({
	inputValue: 'user123',
	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('检验不通过');
	}
};

let initLogin = async (mobile: number, password: string) => {
	let res: any = await login({ mobile, password });
	if (res.data.errno == 0) {
		uni.setStorage({
			key: 'token',
			data: res.data.data.token,
			success() {
				uni.navigateTo({
					url: '../customized/order',
					success() {
						uni.setStorage({
							key: 'mobile',
							data: inputData.inputValue
						});
					}
				});
			}
		});
	} else {
		uni.showToast({
			title: '手机号或密码错误',
			icon: 'none'
		});
	}
};
</script>

<style lang="scss" scoped>
.login-container {
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	.title-iamge {
		width: 300rpx;
		height: 240rpx;
	}
	.login-text {
		margin-top: 10%;
		font-weight: 700;
		font-size: 40rpx;
		color: #1d2b5f;
	}
	.login-text1 {
		font-weight: 700;
		font-size: 40rpx;
		color: #1d2b5f;
		margin-top: 10rpx 0 20% 0;
	}
	.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>
