<template>
	<view class="normal-login-container">
		<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.Env" class="input" type="text" placeholder="请输入环境" maxlength="30" />
					</view>
				</view>
				<view class="login-form-area">
					<view class="area-text">登录账套</view>
					<view class="input-select">
						<uni-data-select v-model="loginForm.acctID" :localdata="range" @change="change"
							:clear="false"></uni-data-select>
					</view>
				</view>
				<view class="login-form-area">
					<view class="area-text">组织机构</view>
					<view class="input-select">
						<uni-data-select v-model="loginForm.FStockOrgId" :localdata="orgRange" @change="change"
							:clear="false"></uni-data-select>
					</view>
				</view>
				<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>
				<!-- 记住密码功能 -->
				<view class="remember-psw">
					<checkbox-group @change="checkboxChange">
						<checkbox id="chkRem" type="checkbox" :checked="rememberPsw" @tap="rememberPsw = !rememberPsw"
							color="#09CC86" />
						记住账号密码
					</checkbox-group>
				</view>
				<view class="action-btn flex justify-center">
					<button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round ">登录</button>
				</view>
			</view>
		</view>
	</view>
</template>

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

	export default {
		data() {
			return {
				loginForm: {
// <<<<<<< HEAD
// 					// Env: 'http://10.201.3.146',//测试地址
// 					// Env: 'http://10.200.0.222',
// 					acctID: '5d5812913fe36c',
// =======
// <<<<<<< HEAD
					Env: 'http://10.201.3.146',
					acctID: '65864d91189ad0',
// =======
					// Env: 'http://10.201.3.146',//测试地址
					// Env: 'http://10.200.0.222',
// 					acctID: '5d5812913fe36c',
// >>>>>>> e217401 (记住地址功能)
// >>>>>>> storage
					FStockOrgId: '100',
					UserName: '',
					Password: '',
					// FacadeName: ''
				},
				rememberPsw: true, //复选框状态 默认勾选
				range: [{

					value: '65864d91189ad0',
					text: "LTTC1222",
					// value: '65852638e0237f',
					// text: "LTTC1221【开发库勿打包】",
					// value: '664eed7afec29f',
					// text: "LTTC0516"
				},{

					value: '5d5812913fe36c',
					text: "正式数据库",
					// value: '65852638e0237f',
					// text: "LTTC1221【开发库勿打包】",
					// value: '664eed7afec29f',
					// text: "LTTC0516"
				}],
				orgRange: [{
					value: '100',
					text: "鲁泰纺织股份有限公司",
				}, {
					value: '100.1',
					text: "服装营销一科",
				}, {
					value: '100.2',
					text: "服装营销二科",
				}, {
					value: '100.3',
					text: "品牌推广部",
				}, {
					value: '100.4',
					text: "制衣事业部",
				}, {
					value: '200',
					text: "POLARIS APPAREL CO",
				}, {
					value: '300',
					text: "VANGUARD APPAREL CO",
				}, {
					value: '400',
					text: "UNIVERSAL APPAREL CO",
				}, {
					value: '600',
					text: "山东鲁嘉进出口有限公司",
				}],
			};
		},
		onLoad() {
			uni.setStorageSync('Url', this.loginForm.Env)
			if(uni.getStorageSync('Env') == ''){
				this.loginForm.Env = 'http://10.201.3.146'
			}
		},
		mounted() {
			//记住密码
			//缓存的账号
			const HBusername = uni.getStorageSync('HBusername');
			//缓存的密码
			const HBpassword = uni.getStorageSync('HBpassword');
			//缓存的业务类型
			const Env = uni.getStorageSync('Env');
			console.log('缓存的账号:' + HBusername);
			console.log('缓存的密码:' + HBpassword);
			console.log('缓存的地址:' + Env);
			// console.log('缓存的业务类型:' + HBFacadeName);
			//有缓存就赋值给文本没有就清空
			if (HBusername && HBpassword) {
				this.loginForm.UserName = HBusername;
				this.loginForm.Password = HBpassword;
				this.loginForm.Env = Env;
			} else {
				this.loginForm.UserName = '';
				this.loginForm.Password = '';
				this.loginForm.Env = 'http://10.201.3.146';

			}
			//自动登录
		},
		created() {
			//this.getCode()
		},
		methods: {
			change(e) {
				console.log("e:", e);
				uni.setStorageSync('Yycbm', e)
			},
			checkboxChange: function(e) {
				console.log('复选框状态:' + e.detail.value.length);
				if (e.detail.value.length == 1) {
					//获取缓存的账号 赋值
					uni.getStorageSync('HBusername', this.loginForm.UserName);
					uni.getStorageSync('HBpassword', this.loginForm.Password);
					uni.getStorageSync('Env', this.loginForm.Env);
				} else {
					//销毁
					uni.removeStorageSync('HBusername');
					uni.removeStorageSync('HBpassword');
					uni.removeStorageSync('Env');
				}
			},
			// 登录方法
			async handleLogin() {
				uni.setStorageSync('Url', this.loginForm.Env);
				if (this.loginForm.UserName === '') {
					this.$modal.msgError('请输入您的账号');
				} else if (this.loginForm.Password === '') {
					this.$modal.msgError('请输入您的密码');
				} else if (this.loginForm.acctID === '') {
					this.$modal.msgError('请输入您的账套');
				} else if (this.loginForm.FStockOrgId === '') {
					this.$modal.msgError('请输入您的组织机构');
				} else {
					this.$modal.loading('登录中，请耐心等待...');
					this.pwdLogin();
				}
			},
			// 密码登录
			async pwdLogin() {
				this.$store
					.dispatch('Login', this.loginForm)
					.then(res => {
						console.log(res)
						this.$modal.closeLoading();
						this.loginSuccess();
					})
					.catch(error => {
						console.log(error)
						this.$modal.closeLoading();
						this.$modal.showToast(error);
					});
			},
			// 登录成功后，处理函数
			loginSuccess() {
				if (this.rememberPsw) {
					uni.setStorageSync('HBusername', this.loginForm.UserName);
					uni.setStorageSync('HBpassword', this.loginForm.Password);
					uni.setStorageSync('Env', this.loginForm.Env);
				} else {
					//销毁缓存
					uni.removeStorageSync('HBusername');
					uni.removeStorageSync('HBpassword');
					uni.removeStorageSync('Env');
				}

				// 设置用户信息
				// this.$store.dispatch('GetInfo').then(() => {
				uni.setStorageSync('FStockOrgId', this.loginForm.FStockOrgId);
				this.$tab.reLaunch('/pages/index/index');
			}
			//多语言切换
		}
	};
</script>

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

	.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: 90%;
			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: 100%;
					margin: 10px auto;
					background-color: #f5f6f7;
					border-radius: 5px;
				}

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

					.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>