<template>
	<view class="content">
		<!-- <image mode="widthFix" class="loginimg" src="../../static/login.png"></image> -->
		<image mode="widthFix" class="loginimg" src="../../static/icons_ui/login_bg.png"></image>
		<view class="login_title">
			<text>您好，欢迎使用</text><br>
			WMS仓库管理系统
		</view>
		<view class="bgf login_wrap">
			<view class="loginbox">
				<form >
					<view class="mytab">
						<!-- <view class="mytabline" :class="tapstyle == 1?'active':''" @click="tapchenge(1)">扫码登录</view> -->
						<view class="mytabline" :class="tapstyle == 2?'active_in':''" @click="tapchenge(2)">密码登录</view>
					</view>

					<!-- <view class="mybox" v-if="tapstyle == 1">
						<view class="conone">
							<uni-easyinput prefixIcon="scan" class="uni-input" type="password" v-model="smloginmsg"
								name="nickname" placeholder="扫码登录"></uni-easyinput>
						</view>
					</view> -->
					<view class="mybox" v-if="tapstyle == 2">
						<view class="conone">
							<view class="title uni-flex">
								<image class="icon_normal" src="../../static/icons_ui/icon_login_user.svg"></image>
								用户名
							</view>
							<view>
								<input class="uni-input" placeholder="请输入用户名" v-model="username" />
							</view>
						</view>
						<view class="conone">
							<view class="title uni-flex">
								<image class="icon_normal" src="../../static/icons_ui/icon_login_password.svg"></image>
								密码
							</view>
							<view class="uni-input-wrapper">
								<input class="uni-input" placeholder="请输入密码" :password="showPassword"
									v-model="password" />
								<text class="uni-icon" :class="[!showPassword ? 'uni-eye-active' : '']"
									@click="changePassword">&#xe568;</text>
							</view>
							<!-- 	<view class="uni-input-wrapper">
							  <input class="uni-input"  type="password" name="password"
							  :password="showPassword"
							  	placeholder="请输入密码" v-model="password"></input>
							    <text class="uni-icon" :class="[!showPassword ? 'uni-eye-active' : '']" @click="changePassword">&#xe568;</text>
							</view> -->

						</view>

					</view>
					<view class="loginbtnbox">
						<button @click="handelerlogin()" class="loginbtn">登录</button>
					</view>
				</form>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getlogin
	} from '@/api/index.js';
	import jwtDecode from 'jwt-decode'
	// import qs from 'qs'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	// import VUE from 'vue'
	// import Base64 from 'base-64';
	// import vue from vue
	export default {
		data() {
			return {
				smloginmsg: "",
				username: "",
				password: "",
				tapstyle: 2,
				loading: false,
				showPassword: true
			}
		},
		computed: mapState(['forcedLogin', 'hasLogin']),
		mounted() {
			uni.clearStorage(); //清除缓存
			if (process.env.NODE_ENV === 'development') {
				this.username = "admin"
				this.password = "1234qwer!@#$QWER";
			}
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: "#476DF5 !important"
			})
		},
		onLoad() {},
		methods: {
			...mapMutations(['login']),
			handelerlogin() {
				if (this.username === '') {
					uni.showToast({
						title: '用户名不能为空',
						icon: 'none',
						mask: true
					})
				} else if (this.password === '') {
					uni.showToast({
						title: '密码不能为空',
						icon: 'none',
						mask: true
					})
				} else {
					// console.log("用户名：", this.username, "密码：", this.password, this.tapstyle, this.smloginmsg)
					let logininfo = {
						grant_type: 'password',
						client_id: 'Auth_App',
						client_secret: '1q2w3E*',
						username: "",
						password: ""
					}
					if (this.tapstyle == 2) //密码登录
					{
						logininfo.username = this.username;
						logininfo.password = this.password
					} else if (this.tapstyle == 1) {
						// let arr = Base64.decode(this.smloginmsg).split(':')
						// logininfo.username = arr[0];
						// logininfo.password = arr[1]
					}
					let params = JSON.stringify(logininfo);
					console.log('params', params);
					// let params = qs.stringify(logininfo)
					this.toLogin(params);
				}
			},
			toLogin(params) {
				uni.showLoading({
					title: '登录中...'
				})
				localStorage.setItem("token_type", 'application/json')
				getlogin(params).then((res) => {
					console.log("res", res)
					this.setStorage(res);
					if (res) {
						this.toMain(res);
					} else {
						uni.showToast({
							title: '请求失败',
							icon: 'none',
							mask: true
						})
					}
					uni.hideLoading();
				}).catch((err) => {
					this.loading = false;
					if (err.message.includes('token返回的res为空')) {
						uni.showToast({
							title: '无法连接到认证服务器!',
							icon: 'none',
							duration: 2000
						});
					} else {
						uni.showToast({
							title: err.message,
							icon: 'none',
							duration: 2000
						});
					}
				
					uni.hideLoading();
				})
						// this.loading = false;
						// uni.showToast({
						// 	title: eror.message,
						// 	icon: 'none',
						// 	duration: 2000
						// });
						// if (eror=='token返回的res为空') {
						// 	uni.showToast({
						// 		title: '无法连接到认证服务器!',
						// 		icon: 'none',
						// 		duration: 2000
						// 	});
						// } else {
						// 	uni.showToast({
						// 		title: err.message,
						// 		icon: 'none',
						// 		duration: 2000
						// 	});
						// }
						// getlogin(params).then(res => {
						// 	console.log("请求getlogin", res)
						// 	console.log("res", res)
						// 	this.setStorage(res);
						// 	if (res) {
						// 		this.toMain(res);
						// 	} else {
						// 		uni.showToast({
						// 			title: '请求失败',
						// 			icon: 'none',
						// 			mask: true
						// 		})
						// 	}
						// 	uni.hideLoading();
						// }).catch((err) => {
						// 	this.loading = false;
						// 	// if (err.message.includes('token返回的res为空')) {
						// 	// 	uni.showToast({
						// 	// 		title: '无法连接到认证服务器!',
						// 	// 		icon: 'none',
						// 	// 		duration: 2000
						// 	// 	});
						// 	// } else {
						// 	// 	uni.showToast({
						// 	// 		title: err.message,
						// 	// 		icon: 'none',
						// 	// 		duration: 2000
						// 	// 	});
						// 	// }

						// 	uni.hideLoading();
						// })
					},

					setStorage(res) {
						sessionStorage.setItem('isLogin', 1); //登录判断
						sessionStorage.setItem('hasLogin', true);
						localStorage.setItem("token_type", res.token_type + ' ' + res.access_token)
						localStorage.setItem('userName', this.username);
						localStorage.setItem('company', this.$companyCode);
						localStorage.setItem('warehouseCode', this.$warehouseCode);
						var decode = jwtDecode(localStorage.getItem('token_type'))
						localStorage.setItem('userId', decode.sub);
					},
					clearStorage(res) {
						sessionStorage.setItem('isLogin', 0); //登录判断
						sessionStorage.setItem('hasLogin', false);
						localStorage.setItem("token_type", "")
					},

					toMain(user) {
						console.log("user", user)
						this.login(user);
						uni.switchTab({
							url: '/views/index/index'
						});

						/**
						 * 强制登录时使用reLaunch方式跳
						 * 返回首页也是使用reLaunch方式
						 */
						// if (this.forcedLogin) //强制登录
						// {
						// 	uni.reLaunch({
						// 		url: '../index/index'
						// 	})
						// } else {
						// 	uni.navigateBack()
						// }
					},
					tapchenge(e) {
						this.tapstyle = e
					},
					onchange(e) {
						const value = e.detail.value
					},
					onCompanyChange(company) {
						if (company === 'IACHZ') {} else {

						}
					},
					// onBackPress(e) {
					// 	console.log("监听返回按钮事件", e);
					// 	// 此处一定要return为true，否则页面不会返回到指定路径
					// 	return true;
					// }
					changePassword: function() {
						this.showPassword = !this.showPassword;
					},
			}
		}
</script>

<style>
	page {
		background-color: #fff;
	}

	.content {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #FFFFFF;
	}

	.cs {
		margin-bottom: 20upx;
	}

	.mytab {
		display: flex;
	}

	.mytabline {
		flex: 1;
		text-align: center;
		padding: 20rpx 0;
		color: #666;
		position: relative;
		font-size: 0.875rem;
	}

	.active_in {
		color: #101010;
		font-weight: bold;
	}

	.active_in::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		height: 8rpx;
		background-color: #007AFF;
		width: 40rpx;
		border-radius: 8rpx;
	}

	.loginbox {
		box-sizing: border-box;
		padding: 30rpx;

	}

	.loginimg {
		width: 100%;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.conone {
		margin: 30rpx 0;
		align-items: center;
	}

	.conone .uni-input-wrapper {
		position: relative;
	}

	.conone .uni-input {
		background-color: #F7F9FF;
		height: 90rpx;
		line-height: 90rpx;
		padding: 0 0 0 20rpx;
	}

	.conone .title {
		font-size: .875rem;
		align-items: center;
		margin-bottom: 20rpx;
		letter-spacing: 1rpx;
	}

	.conone .title image {
		margin-right: 6rpx;
	}

	.uni-easyinput .is-input-border {
		border-color: transparent !important;
	}

	.loginbtnbox {
		margin-top: 40rpx;
	}

	.loginbtn {
		color: #fff;
		font-size: 0.875rem;
		height: 100rpx;
		line-height: 100rpx;
		background: #5d66de;
		border-radius: 8rpx;
		border: none;
		outline: none;
	}

	.conone .uni-icon {
		float: right;
		position: absolute;
		right: 20rpx;
		color: #ccc;
		font-size: 1.25rem;
	}

	.conone .uni-eye-active {
		color: #5a7cf3;
	}
</style>
