<template>
	<view>
		<!-- 返回 -->
		<tm-nav-bar left-icon="arrow-left" title="登陆账号" :rbgs="false" :width="`100%`"/>
		<view class="login flx flx_jc">
			<view class="flx flx_jc flx_ac" style="width:100%; height: 100vh;">
				<view class="content" style="height: 50vh">
					<view style="margin-bottom: 60rpx" class="flx flx_jc">
						<uqrcode v-if="qrCode" ref="uqrcode" canvas-id="qrcode" :value="qrCode" :options="{ margin: 10 }"></uqrcode>
						<view class="flx flx_ac" v-else style="width: 200px;height: 200px;border: 2rpx #000 dashed;border-radius: 10rpx;">
							<view class="" style="text-align: center; width: 100%;">
								{{qrCodeMsg}}
							</view>
						</view>
					</view>
					<view class="">
						<wButton
							class="wbutton"
							text="刷新二维码"
							:rotate="isRotate"
							@click="getLoginCode"
						></wButton>
					</view>
					<!-- <view class="footer">
						<view class="" @click="doLoginType(1)">
							密码登录{{sn}}
						</view>
						<text>|</text>
						<navigator url="register" open-type="navigate">注册账号</navigator>
					</view> -->
				</view>
			</view>
			
			<view class="flx flx_jc flx_ac" style="width:100%; height: 100vh">
				<view class="content" style="height: 50vh">
					<!-- 头部logo -->
					<view class="header">
						<image src="../../static/a-ziyuan85.png"></image>
					</view>
						<!-- 主体表单 -->
						<view class="main">
							<wInput
								v-model="phoneData"
								type="text"
								maxlength="11"
								placeholder="用户名/电话"
								:focus="isFocus"
							></wInput>
							<wInput
								v-model="passData"
								type="password"
								maxlength="9999"
								placeholder="密码"
							></wInput>
						</view>
						<wButton 
							class="wbutton"
							text="登 录"
							:rotate="isRotate" 
							@click="startLogin"
						></wButton>
					
					<!-- 底部信息 -->
					<view class="footer">
						<navigator url="forget" open-type="navigate">找回密码</navigator>
						<text>|</text>
						<navigator url="register" open-type="navigate">注册账号</navigator>
					</view>
				</view>
			</view>
			
			<view class="" style="text-align: center;position: absolute;bottom: 40rpx;width: 100%;color: #f1f1f1;">
				{{ version }}
			</view>
		</view>
	</view>
</template>

<script>
	let _this;
	import store from "@/store/index.js";
	import wInput from '../../components/watch-login/watch-input.vue' //input
	import wButton from '../../components/watch-login/watch-button.vue' //button
	export default {
		data() {
			return {
				sn:'',
				version:'',
				qrCodeMsg:'加载中...',
				qrCode:'',
				qrCodeVal:'',
				login_type:0,
				phoneData:'', //用户/电话
				passData:'', //密码
				isRotate: false, //是否加载旋转
				isFocus: true // 是否聚焦
			};
		},
		onLoad() {
			let token = this.$store.getters['api/getApiToken']
			if(token){
				uni.navigateTo({
					url: '/pages/index/index'
				})
			}
			if(this.login_type == 0){
				this.getLoginCode()
			}
			this.version = this.$utils.getVersion()
			// this.doFunc()
		},
		
		components:{
			wInput,
			wButton,
		},
		mounted() {
			_this= this;
		},
		methods: {
			back() {
				uni.navigateTo({
					url: '/pages/index/index'
				})
			},
			getLoginCode(){
				// 验证一下token是否有值
				let token = this.$store.getters['api/getApiToken']
				if(!token){
					console.log('无token')
					this.$store.dispatch('api/getLoginCode').then(res => {
						this.qrCode = 'https://ai.agrimedia.cn/qrcodeLogin/index?qrcode=' + res.key
						this.qrCodeVal = res.key
						setTimeout(() => {
							this.qrCode = '';
							this.qrCodeMsg = '二维码已过期'
						},55000)
						this.checkQrCode()
					})
				}
			},
			checkQrCode(){
				if(this.qrCode){
					setTimeout(() => {
						this.$store.dispatch('api/checkLoginCode',{
							key:this.qrCodeVal
						}).then(res => {
							if(res.status == 0){
								this.checkQrCode()
							}
							if(res.status == 1){
								this.$store.commit('api/setApiToken',res.token)
								uni.reLaunch({
									url: '/pages/index/index'
								})
							}
						})
					},1000)
				}
			},
		    startLogin(e){
				//登录
				if(this.isRotate){
					//判断是否加载中，避免重复点击请求
					return false;
				}
				if (this.phoneData == "") {
				     uni.showToast({
				        icon: 'none',
						position: 'bottom',
				        title: '账号不能为空'
				    });
				    return;
				}
		        if (this.passData == "") {
		            uni.showToast({
		                icon: 'none',
						position: 'bottom',
		                title: '密码不能为空'
		            });
		            return;
		        }
				
				
				uni.showLoading({
					title: '登录中'
				});
				this.$store.dispatch('api/dologin', { mobile: this.phoneData, password: this.passData }).then(res => {
					if (res.token) {
						this.$store.commit('api/setApiToken',res.token)
						uni.reLaunch({
							url: '/pages/index/index'
						})
					}
				})
		    }
		}
	}
</script>

<style lang="scss" scoped>
	@import url("../../components/watch-login/css/icon.css");
	
	.login {
		width: 70%;
		margin: 0 auto;
	}
	
	.content {
		display: flex;
		flex-direction: column;
		justify-content:center;
		/* margin-top: 128rpx; */
	}
	
	/* 头部 logo */
	.header {
		width:161rpx;
		height:161rpx;
		box-shadow:0rpx 0rpx 60rpx 0rpx rgba(0,0,0,0.1);
		border-radius:50%;
		background-color: #000000; 
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}
	.header image{
		width:161rpx;
		height:161rpx;
		border-radius:50%;
	}
	
	/* 主体 */
	.main {
		display: flex;
		flex-direction: column;
	}
	.tips {
		color: #999999;
		font-size: 28rpx;
		margin-top: 64rpx;
		margin-left: 48rpx;
	}
	
	/* 登录按钮 */
	.wbutton{
		margin-top: 96rpx;
	}
	
	/* 底部 */
	.footer{
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		margin-top: 64rpx;
		color: rgba(0,0,0,0.7);
		text-align: center;
		height: 40rpx;
		line-height: 40rpx;
	}
	.footer text{
		font-size: 24rpx;
		margin-left: 15rpx;
		margin-right: 15rpx;
	}
	
	.back {
			position: fixed;
			top: 50rpx;
			left: 50rpx;
		}
</style>
