<template>
	<view class="normal-login-container">
		<view class="title">服装扫描装箱</view>
		<view class="login-form ">
			<view class="login-form-content">
				<view class="login-form-area">
					<view class="area-text"> 用户名</view>
					<view class="input-item flex align-center">
						<input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号"
							maxlength="30" />
					</view>
				</view>
				<view class="login-form-area">
					<view class="area-text"> 密码</view>
					<view class="input-item flex align-center">
						<input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码"
							maxlength="20" />
					</view>
				</view>
				<!-- 记住密码功能 -->
				<u-toast ref="uToast"></u-toast>

				<view class="action-btn flex justify-center">
					<button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round ">登录</button>
					<!-- <button class="login-btn cu-btn block bg-blue lg round ">退出</button> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		login
	} from '../../api/login';

	export default {
		data() {
			return {
				loginForm: {
					acctID: '',
					username: '',
					password: '',
					lcid:'',
				}
				
				
			};
		},
		onLoad() {
			console.log("onLoad")
			uni.setStorageSync('username', '')
			this.loginForm.acctID = '664eed7afec29f';
			this.loginForm.lcid = '2052';
			this.loginForm.username = 'LT068633';
			this.loginForm.password = 'sunj@123';
			
			
		},
		
		methods: {
			
			// 登录方法
			async handleLogin() {
				// this.$tab.reLaunch('/pages/index/index');
					// uni.setStorageSync('Yycbm', this.loginForm.FacadeName);
				if (this.loginForm.username === '') {
					this.$modal.msgError('请输入您的账号');
				} else if (this.loginForm.password === '') {
					this.$modal.msgError('请输入您的密码');
				} else {
					
					uni.showLoading({
						title: '登录中，请耐心等待...',
						mask: true,
					});
					this.pwdLogin();

				}
			},
			// 密码登录
			async pwdLogin() {
				console.log( this.loginForm)
				
				try{
					let res = await login(this.loginForm)
					if(res && res.IsSuccessByAPI){
						uni.hideLoading()
						let realName = res.Context.UserName
						this.$modal.msgSuccess("您好！"+realName)
						setTimeout(function() {}, 1000); 
							this.loginSuccess(this.loginForm.username)
						
					}else{
						console.log(res.Message)
						uni.hideLoading()
						this.$refs.uToast.show({
							message:res.Message,
							type: 'error',
							icon: true,
							// position: 'top'
						});
						// this.$modal.msgError(res.Message);
					}
				}catch(error){
					console.log(error)
					uni.hideLoading()
					this.$refs.uToast.show({
						message: '请检查网络',
						type: 'error',
						icon: true,
						// position: 'top'
					});
					
				}
				
			},
			// 登录成功后，处理函数
			loginSuccess(name) {
				// console.log(JSON.stringify(result))
					uni.setStorageSync('username', name)
				this.$tab.navigateTo('/pages/index/index');
				
			}
			//多语言切换
		}
	};
</script>

<style lang="scss" >
	page {
		background-image: linear-gradient(to bottom, #c6e0ff, #ffffff 80%);
		// background-image:  #ffffff 
	}

	.normal-login-container {
		width: 100%;
		height: 100%;

		.title {
			text-align: center;
			font-size: 40px;
			font-weight: bold;
			padding-top: 15%;
		}

		.login-form {
			display: flex;
			flex-direction: column;

			.logo {
				width: 80%;
				justify-content: center;
				text-align: center;
				font-size: 44px;
			}
		}
		.login-form-content {
			text-align: center;
			margin: 5% auto;
			// margin-top: 15%;
			width: 80%;
			display: flex;
			flex-direction: column;
			justify-content: center;

			.login-form-area {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.area-text {
					width: 30%;
					font-size: 15px;
				}

				.input-select {
					width: 65%;
					margin: 10px auto;
					background-color: #f5f6f7;
					border-radius: 5px;
				}

				.input-item {
					margin: 10px auto;
					background-color: #f5f6f7;
					height: 40px;
					border-radius: 5px;
					width: 65%;

					.icon {
						font-size: 38rpx;
						margin-left: 10px;
						color: #999;
					}

					.input {
						width: 100%;
						font-size: 15px;
						line-height: 20px;
						text-align: left;
						padding-left: 15px;
					}
				}
			}

			.login-btn {
				margin-top: 20px;
				height: 45px;
				width: 70%;
			}

			.xieyi {
				color: #333;
				margin-top: 20px;
			}
		}

		.language-select {
			width: 35%;
			margin: 5px auto;
			background-color: #f5f6f7;
			border-radius: 5px;
			text-align: center;
		}

		.easyinput {
			width: 100%;
		}
	}

	.login-code-img {
		height: 45px;
	}
</style>