<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仓库管理系统<br>
			版本: {{version}}
		</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_tenant.svg"></image>
								租户
							</view>
							<view>
								<!-- <input class="uni-input" placeholder="请输入租户名" v-model="tenantName" disabled="true" /> -->
								<uni-data-select class="uni-data-select" placeholder="请输入租户名" v-model="tenantValue"
									:clear="false" :localdata="tenantArray"></uni-data-select>
							</view>
						</view>
						<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" style="padding:25rpx" 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" style="padding:25rpx" 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 style="display: flex;flex-direction: row;" v-if="needCode">
						<!-- <view class="uni-input">
							<input class="" placeholder="请输入验证码"
							v-model="code"
								style="background-color: lightgray;padding-top: 40rpx;padding-bottom: 40rpx;margin-right: 20rpx;" />
						</view> -->
						<view class="uni-input-wrapper" >
							<input class="" style="height: 80rpx; background-color: #F7F9FF;margin-right: 20rpx;"
								placeholder="请输入验证码" type="number" v-model="code" />
						</view>
						<view class="display: flex; align-items: center; text-center">
							<view class="">
								<image :src="imageSrc" style="width: 260rpx;height: 80rpx;" @click="getCode"></image>
							</view>
							<view style="font-size: 35rpx;color: #476DF5;" @click="getCode"> 获取验证码?</view>
						</view>

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

<script>
	import {
		getCaptchaImage
	} from '@/api/request2.js';
	import storage from '@/common/utils/storage'
	import {
		mapState,
		mapMutations
	} from 'vuex'

	export default {
		components: {},
		data() {
			return {
				tenantArray: JSON.parse(import.meta.env.VITE_TENANT),
				smloginmsg: "",
				tenantValue: 0,
				// tenantName: "闻荫源码",
				username: "",
				password: "",
				tapstyle: 2,
				loading: false,
				showPassword: true,
				imageSrc: "",
				code: "",
				uuid: "",
				version: "",
				needCode:false
			}
		},
		// computed: mapState(['forcedLogin', 'hasLogin']),
		mounted() {
			this.tenantValue = this.tenantArray[0].value
			// uni.clearStorageSync()
			// uni.clearStorage(); //清除缓存
			
			storage.clearStorage()
			if (process.env.NODE_ENV === 'development') {
				this.username = "admin"
				this.password = "win123456";
			}
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: "#476DF5 !important"
			})

			// #ifdef APP-PLUS
			uni.setNavigationBarColor({
				frontColor: "#ffffff",
				backgroundColor: "#476DF5"
			})
			// #endif


		},
		//返回首页
		onNavigationBarButtonTap(e) {
			if (e.index === 0) {
				uni.navigateTo({
					url: "/pages/config/config"
				})
			}

		},
		onLoad() {
			if(this.needCode){
				getCaptchaImage().then(res => {
					if (res) {
						var code = res.data.img;
						let base64 = 'data:image/jpeg;base64,' + code
						// console.log("图标", base64)
						this.imageSrc = base64.replace(/[\r\n]/g, "")
						this.uuid = res.data.uuid
					}
				}).catch(error => {
					this.showErrorMessage(error);
				})
			}
			
			this.getAppVersion()
		},
		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 if (this.needCode&&this.code === '') {
					uni.showToast({
						title: '验证码不能为空',
						icon: 'none',
						mask: true
					})
				} 
				else {
					// console.log("用户名：", this.username, "密码：", this.password, this.tapstyle, this.smloginmsg)
					let logininfo = {
						username: "",
						password: "",
						code: "",
						uuid: ""
					}
					if (this.tapstyle == 2) //密码登录
					{
						logininfo.username = this.username;
						logininfo.password = this.password
						logininfo.code = this.code;
						logininfo.uuid = this.uuid;
						logininfo.tenantName = this.tenantArray.find(item => item.value == this.tenantValue).text;

						uni.setStorageSync('tenantId', this.tenantValue)

					} 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);
					this.newLogin(logininfo)

				}
			},

			async newLogin(logininfo) {
				uni.showLoading({
					title: "正在登录",
					mask: true
				})
				try{
					var result = await this.$store.dispatch('Login', logininfo);
					// await this.$store.dispatch('GetTenantIdInfo', this.tenantName)
					console.log(result)
					uni.hideLoading()
					uni.setStorageSync('hasLogin', true)
					uni.switchTab({
						url: '/pages/index/index'
					});
					uni.setStorageSync('username', this.username);
				}catch(e){
					uni.hideLoading()
					this.showErrorMessage(e)
				}
				
			},


			tapchenge(e) {
				this.tapstyle = e
			},
			onchange(e) {
				const value = e.detail.value
			},
			changePassword: function() {
				this.showPassword = !this.showPassword;
			},
			showErrorMessage(message) {
				this.$refs.comMessage.showErrorMessage(message, res => {
					if (res) {

					}
				});
			},
			getCode() {
				getCaptchaImage().then(res => {
					if (res) {
						var code = res.data.img;
						let base64 = 'data:image/jpeg;base64,' + code
						this.imageSrc = base64.replace(/[\r\n]/g, "")
						this.uuid = res.data.uuid
					}
				}).catch(error => {
				this.showErrorMessage(error);
			})
			},
			getAppVersion() {
				const systemInfo = uni.getSystemInfoSync();
				// #ifdef H5
				this.version = systemInfo.appVersion;
				console.log(systemInfo.appVersion, '版本号');
				// #endif

				// #ifdef APP
				this.version = systemInfo.appWgtVersion;
				// #endif

			}

		}
	}
</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: 10rpx 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 .uni-data-select .uni-select {
		background-color: #F7F9FF;
		height: 90rpx;
		line-height: 90rpx;
		border: 0px;
		padding: 0 10rpx 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>