<template>
	<view class="login-bg relative">
		<view class="logo-wraper">
			<img src="../../static/images/logo.png" alt="">
		</view>
		<view class="login_wrap">
			<view class="login_w">
				<view class="zd-row jcflexstart login_tab">
					<view class="login_tab_item" :class="{'login_tab_active': drift === 0}" @tap="_tabChange(0)">登录</view>
					<view class="login_tab_item" :class="{'login_tab_active': drift === 50}" @tap="_tabChange(50)">配置</view>
				</view>
				<view class="login_cnt drift" :style="{'left': '-'+drift*2+'%'}">
					<view class="login_card">
						<view class="card_wrap">
							<view class="zd-row mgb20">
								<view class="zd-col-4 login_label">账号</view>
								<view class="zd-col-20">
									<input type="text" placeholder="用户名" v-model="loginname" class="inputStyle">
								</view>
							</view>
							<view class="zd-row mgb20">
								<view class="zd-col-4 login_label">密码</view>
								<view class="zd-col-20 relative">
									<input :type="inputType" placeholder="密码" v-model="password" class="inputStyle">
									<text class="iconfont login_icon" :class="eyeOpen ? 'eye_colse_icon' : 'eye_open_icon'" @click="passwordShow"></text>
								</view>
							</view>
						</view>
						<view class="zd-row mgt20 mgb20">
							<button class="primary-button" :disabled="disabled" @click="toLogin">登&nbsp;&nbsp;录</button>
						</view>
						<view class="zd-row">
							<!-- <view class="iconfont scan_icon"></view> -->
							<!-- <text class="san_text">扫码登录</text> -->
							<text class="zd-col-24 san_text" @tap="isUpdate">升级版本</text>
						</view>
					</view>
					<view class="login_card">
						<view class="card_wrap">
							<view class="zd-row mgb20">
								<view class="zd-col-4 login_label">域名</view>
								<view class="zd-col-20">
									<input type="text" placeholder="域名地址" v-model.trim="baseUrl" class="inputStyle">
								</view>
							</view>
							<view class="zd-row mgb20">
								<view class="zd-col-6 login_label">刷新时间</view>
								<view class="zd-col-18">
									<input type="number" placeholder="刷新时间" v-model.trim="setTime" class="inputStyle">
								</view>
							</view>
						</view>
						<view class="zd-row mgt20 mgb20">
							<button class="primary-button" :disabled="disabled" @tap="toConfig">配&nbsp;&nbsp;置</button>
						</view>
					</view>
				</view>
			</view>
			<view class="daoying_bg"></view>
		</view>
		<view v-if="version !== ''" class="version-name">v{{version}}</view>
		<Up-grade v-if="grade === true" @closeUpdate="closeUpdate" :androidUrl="androidUrl"></up-grade>
	</view>
</template>

<script>
	import { RSAencrypt } from '@/utils/jsencrypt.js'
	import {handLogin, pdaUpdate} from '@/utils/getData2.js'
	import permision from "@/utils/permission.js"
	import UpGrade from './upgrade.vue'
	export default {
		components: {
			UpGrade
		},
		data() {
			return {
				loginname: this.$store.getters.loginName,
				password: '',
				baseUrl: this.$store.getters.baseUrl,
				setTime: this.$store.getters.setTime / 1000,
				inputType: 'password',
				eyeOpen: true,
				drift: 0,
				disabled: false,
				jobnum: '',
				qrcode: '',
				logintype: '',
				version: '',
				versionCode: '',
				grade: false,
				androidUrl: ''
			};
		},
		mounted () {
			// alert(window.screen.availWidth)
			// alert(window.screen.availHeight)
		},
		methods: {
			_tabChange (num) {
				this.drift = num
			},
			passwordShow () {
				this.eyeOpen = !this.eyeOpen
				if (this.eyeOpen) {
					this.inputType = 'password'
				} else {
					this.inputType = 'text'
				}
			},
			toConfig () {
				let obj = {
					baseUrl: this.baseUrl,
					setTime: this.setTime * 1000
				}
				this.$store.dispatch('setConfig', obj)
				this._tabChange(0)
			},
			async toLogin() {
				// uni.redirectTo({
				// 	url: '/pages/management/in-storage'
				// })
				this.disabled = true
				if (this.loginname === '') {
					uni.showToast({
						title: '用户名不能为空',
						icon: 'none'
					})
					this.disabled = false
					return
				}
				  if (this.password === '') {
					uni.showToast({
						title: '密码不能为空',
						icon: 'none'
					})
					this.disabled = false
					return
				}
				try {
					let res = await handLogin(this.loginname, RSAencrypt(this.password))
					this.$store.dispatch('saveUserInfo', JSON.stringify(res.user.user))
					this.$store.dispatch('saveToken', res.token)
					this.$store.dispatch('saveLoginName', this.loginname)
					uni.redirectTo({
						url: '/pages/home/home'
					})
					this.disabled = false
				} catch (e) {
					this.disabled = false
				}
			},
			isUpdate () {
				this._pdaUpdate()
			},
			async _pdaUpdate () {
				let res = await pdaUpdate()
				if (res.versionName === this.version) {
					uni.showToast({
						title: '当前为最新版本',
						icon: 'none'
					})
				} else {
					this.grade = true
					this.androidUrl = res.url
				}
			},
			closeUpdate () {
				this.grade = false
			}
		}
	}
</script>

<style lang="stylus" scoped>
@import '../../common/style/mixin.styl';
.login-bg
	_wh(100%, 100%)
	_bis(#fff,'../../static/images/login_bg.jpg', 100%, 100%,bottom)
.logo-wraper
	_wh(90%, auto)
	margin 0 auto
	text-align center
	_bis(,'../../static/images/login_bg.png', 100%, 100%,bottom)
	img
		_wh(30%, auto)
.login_wrap
	position fixed
	left 50%
	top 50%
	width 60%
	padding 5% 8%
	transform translate3d(-50%, -50%, 0)
	_bis(,'../../static/images/form_bg.png', 100%, 100%,bottom)
.login_w
	_wh(100%, 100%)
	overflow hidden
.login_tab
	height 50px
	padding 0 5px 25px 10%
	margin-bottom 15px
	_bis(,'../../static/images/login_tabs_bg.png', 100%, 100%,bottom)
.login_tab_item
	cursor pointer
	_font(25px,33px,#99B1DD,,center)
	font-family: YouSheBiaoTiHei;
	padding 0 25px 0 5px
.login_tab_active
	color #fff
	_bis(,'../../static/images/login_tab_active.png', 100%, 100%,bottom)
.login_cnt
	position relative
	width 200%
	overflow hidden
.login_card
	width 50%
	float left
.card_wrap
	overflow hidden
.login_label
	_font(18px, 45px, #AFBED8,,)
.inputStyle
	_font(18px, 45px, #fff,,)
	_wh(100%, 45px)
	background: rgba(45,88,184,0.1);
	border: 1px solid #4980BD;
	padding 0 11px
.inputStyle[focus]
	background: rgba(45,88,184,0.25);
	border: 1px solid #21D0F2;
	line-height 45px
.login_icon
	position absolute
	top 5px
	right 10px
.primary-button
	_wh(auto, 50px)
	padding 0 50px
	_font(25px,50px,#fff,,center)
	_bis(,'../../static/images/button.png', 100%, 100%,bottom)
.san_text
	_font(18px,36px,#fff,,center)
.drift
	transition left .3s linear
.version-name
	width 100%
	position: absolute
	bottom 3%
	_font(15px, 30px, #fff,,center)
.daoying_bg
	position: absolute
	bottom -30%
	left 0
	_wh(100%, 30%)
	_bis(,'../../static/images/daoy.png', 100%, 100%,bottom)
</style>
