<template>
	<view class="u-login">
		<view class="u-logo">
			 <image class="logo" src="/static/logo.png"></image>
			 <view>iSCM 检货系统</view>
		</view>
		<view class="u-forms">
			<form @submit="AndroidCheckUpdate">
				<view class="uni-form-item">
					<view class="uni-form-title">
						<text class="iconfont icon-icon-test23"></text>
					</view>
					<input class="uni-input" v-model="username" name="username" placeholder="请输入用户名" />
				</view>
				<view class="uni-form-item">
					<view class="uni-form-title">
						<text class="iconfont icon-icon-test16"></text>
					</view>
					<input class="uni-input" v-model="password" name="password" password placeholder="请输入密码" />
				</view>
				<view class="uni-btn-v">
					<button form-type="submit" type="primary">登录</button>
				</view>
			</form>
		</view>
		<view class="copright">
			<view>系统版本：{{version}}</view>
			<view>Copyright © 2023 陕西山海高科信息技术有限公司</view>
		</view>
	</view>
</template>

<script>
	import { login, getSysVersion } from '@/config/api.js'
	import { checkVersionToLoadUpdate } from '@/libs/tools.js'
	export default {
		data() {
			return {
				showPassword: false,
				username: '',
				password: '',
				version: ''
			};
		},
		onLoad() {
			//#ifdef APP-PLUS
			  uni.getSystemInfo({
				  success:(res) => {
					  console.log(res)
					  // 获取最新版本信息
					  plus.runtime.getProperty(plus.runtime.appid,(wgtinfo)=>{
						wgtinfo.platform = res.platform
					  	getApp().globalData.version = wgtinfo
						const curr_version = wgtinfo && wgtinfo.version || ''
						this.version = curr_version
					  })
				  }  
			  })
			//#endif
			
			const devInfo = uni.getDeviceInfo()
			this.$store.state.vuex_deviceId = devInfo.deviceId
			
			// 记住用户密码
			const account = uni.getStorageSync('account')
			if(account){
				 this.username = account.username
				 this.password = account.password
			}
		},
		methods: {
			// 版本更新
			AndroidCheckUpdate(){
				let _this = this
				uni.showLoading({
					title: '正在登录...'
				});
				getSysVersion({versionType:uni.getSystemInfoSync().platform == "ios"?'IOS':'ANDROID', applyCode: 'scsb'}).then(ret => {
					console.log(ret)
					if(ret.status == 200){
						if(ret.data){
							this.$store.state.vuex_versionInfo = ret.data || null
							checkVersionToLoadUpdate(ret.data,0,_this.formSubmit)
						}else{
							_this.formSubmit();
						}
					}
					uni.hideLoading()
				})
			},
			// 过滤权限code
			fiterAuthCode(data) {
				data.permCodes = data.permCodes.filter(item => item.indexOf('_mobile') > 0);
				return data;
			},
			// 登录
			async formSubmit(e) {
				const formdata = {
					username: this.username,
					password: this.password
				}
				if(formdata.username && formdata.password){
					const res = await login(formdata)
					if(res.status == 200){
						this.$store.state.vuex_userData = this.fiterAuthCode(res.data.auth_user)
						this.$store.state.vuex_token = res.data.access_token
						this.$store.state.vuex_user = res.data.auth_user
						// 记住用户密码
						this.$store.state.vuex_userAccount = {
						 username: this.username,
						 password: this.password
						}
						uni.setStorageSync('account',this.$store.state.vuex_userAccount)
						uni.redirectTo({
							url: "/pages/index/index"
						})
					}
					uni.hideLoading()
				}else{
					uni.$u.toast("请输入用户名和密码")
				}
			}
		},
	}
</script>

<style lang="scss">
	.u-login{
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		height: 100vh;
		.u-logo{
			text-align: center;
			padding-top: 20%;
			image{
				width: 150upx;
				height: 150upx;
				border-radius: 250upx;
			}
			> view{
				font-size: 50upx;
				padding: 10upx 0;
			}
		}
		.u-forms{
			width: 80%;
			margin: 0 auto 20%;
			.uni-form-item{
				display: flex;
				align-items: center;
				position: relative;
				margin: 30upx 0;
				border-bottom: 1px solid #eee;
				border-radius: 20upx;
				padding: 20upx 10upx;
				.uni-form-title{
					padding: 0 15upx;
					text{
						font-size: 50upx;
						color: $uni-text-color-grey;
					}
				}
				.uni-input{
					flex-grow: 1;
					padding: 0 15upx;					
					&:focus{
						border-color: $uni-color-primary;
					}
				}
				.uni-icon{
					position: absolute;
					right: 20upx;
					color: $uni-text-color-grey;
				}
			}
			.uni-btn-v{
				padding: 30upx 20%;
				button{
					background: $uni-color-primary;
					font-size: 36upx;
				}
			}
		}
		.copright{
			text-align: center;
			color: $uni-text-color-grey;
			font-size: 20upx;
		}
	}
</style>
