<template>
	<view class="login-container">
		<image src="/static/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>

		<button type="default" size="mini" class="next-step" @click="clickNextStep">登录</button>

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

<script>
import inputLogin from '@/pages/login/inputLogin.vue';
export default {
	components: {
		inputLogin
	},
	data() {
		return {
			inputData: {
				inputValue: '',
				iconfont: 'icon-a-ziyuan16',
				placeholder: '手机号码',
				type: 'text',
				checkType: 'phone',
				check: false,
				checkContent: '请输入有效手机号'
			},
			inputData1: {
				inputValue: '',
				iconfont: 'icon-mima',
				placeholder: '密码',
				type: 'password',
				checkType: 'passWord',
				check: false,
				checkContent: '请输入密码'
			}
		};
	},
	methods: {
		hangleInput(Value, type) {	
			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) this.inputData.check = true;
				else this.inputData.check = false;
			} else {
				if (!Value) this.inputData1.check = true;
				else this.inputData1.check = false;
			}
		},
		clickNextStep() {
			if (!this.inputData.inputValue || !this.inputData.inputValue) {
				this.inputData.check = true;
				this.inputData1.check = true;
				return;
			} else if (!this.inputData.check || !this.inputData1.check) {
				this.initLogin(this.inputData.inputValue, this.inputData1.inputValue);
			} else {
				console.log('检验不通过');
			}
		},
		async initLogin(mobile, password) {
			uni.request({
				url: 'https://maoshanjiufang.gzmsjf.com/wx/auth/login_by_mobile',
				method: 'POST',
				data: { mobile, password },
				success(res) {
					if (res.data.errno == 0) {
						uni.setStorage({
							key: 'token',
							data: res.data.data.token,
							success() {
								uni.navigateTo({
									url: '/pages/print/index',
									success() {
										uni.setStorage({
											key: 'mobile',
											data: this.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;
		background-color: #d79972;
		color: #fff;
	}
	.footer-text {
		margin-top: 40%;
		display: block;
		width: 100%;
		color: #d79972;
		font-size: 30rpx;
		text-align: center;
		align-self: flex-end;
	}
}
</style>
