<template>
	<view id="login">
		<view class="login-box" :style="{height:tabCurrent==0?'840rpx':'700rpx'}">
			<view class="config-icon iconfont icon-shezhixitongshezhigongnengshezhishuxing" @click="goConfig"></view>
			<view class="title-box">
				<!-- #ifdef MP-WEIXIN -->
				<image src="https://hcwl-cdn.cdn.bcebos.com/hcapp/hc-work/img/logo.png" mode=""></image>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<image src="data:image/png;base64,[encoded data, 74488 characters]"></image>
				<!-- #endif -->
				<text>物联网可视化</text>
			</view>
			<u-tabs :list="tabList" :is-scroll="false" bar-width="325" :current="tabCurrent" @change="tabChange"></u-tabs>
			<view class="form-box password-box" v-if="tabCurrent==0">
				<view class="form-item login-name">
					<view class="iconfont icon-user"></view>
					<input v-model.trim="username" type="text" placeholder="请输入账号" />
				</view>
				<view class="form-item login-password">
					<view class="iconfont icon-mima1"></view>
					<input v-if="passwordIsShow" v-model.trim="password" type="password" placeholder="请输入密码" />
					<input v-else v-model.trim="password" type="text" placeholder="请输入密码" />
					<view v-if="passwordIsShow" class="iconfont icon-biyan" @click="toggle"></view>
					<view v-else class="iconfont icon-kaiyan" @click="toggle"></view>
				</view>
				<view class="form-item login-img">
					<view class="iconfont icon-yanzhengma"></view>
					<input v-model.trim="imgCodeTxt" type="text" cursor-spacing="10" placeholder="请输入图片验证码" />
					<image :src="imgCodePath" @click="getImgCodeTxt" mode=""></image>
				</view>
			</view>
			<view class="form-box phone-box" v-else>
				<view class="form-item login-name">
					<view class="iconfont icon-shoujihao"></view>
					<input v-model.trim="phone" type="text" placeholder="请输入手机号" />
				</view>
				<view class="form-item login-phone">
					<view class="iconfont icon-yanzhengma"></view>
					<input v-model.trim="code" type="text" placeholder="请输入验证码" />
					<button type="primary" class="login-phone-btn" @click="verifygetImgCode">获取验证码</button>
				</view>
			</view>
			
			<view class="forget-password">
			</view>
			<view class="btn-box">
				<button type="default" @click="Login">登录</button>
			</view>
		</view>
		<u-modal v-model="codeShow" ref="codeModal" async-close title="图片验证码" :mask-close-able="true" @confirm="verifySenCode">
			<view class="slot-content imgCodeModel-content" >
				<view class="imgCodeModel-content-title">
					<image slot="right" style="width: 500rpx;height:150rpx" @click="getImgCodeTxt"  :src="imgCodePath" mode=""></image>
				</view>
				<view class="imgCodeModel-content-input">
					<u-input border class="login-input" type="text" v-model="imgCodeTxt" c
						laceholder-style="font-size:36rpx" placeholder="请输入图片验证码" />
				</view>
			</view>
		</u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {encrypt} from '@/common/js/util/encrypt.js'
	export default {
		data() {
			return {
				tabList:[
					{name:'密码登录'},
					{name:'手机号登录'},
				],
				tabCurrent:0,
				ipAddress: null,
				username:'',
				password:'',
				passwordIsShow: true,
				passImgCode:'',
				codeShow:false,
				imgCodePath:'',
				imgCodeKey:'',
				imgCodeTxt:'',
				phone:null,
				code:'',
			}
		},
		components:{
		},
		mounted() {
		},
		onLoad() {
		},
		onShow() {
			this.getImgCodeTxt();
			uni.getStorage({
				key:'username',
			}).then(res => {
				// 如果返回数组为两位就是正确
				if(res.length==2){
					this.username = res[1].data;
				}
				return uni.getStorage({
					key:'password',
				})
			}).then(res => {
				if(res.length==2){
					this.password = res[1].data;
				}
			})
			uni.getStorage({
				key:'phone',
			}).then(res => {
				// 如果返回数组为两位就是正确
				if(res.length==2){
					this.phone = res[1].data;
				}
			})
			let tokenKey = uni.getStorageSync('token');
			if(tokenKey){
				this.verifyToken()
			}
		},
		methods: {
			// 验证token是否有效
			verifyToken(){
				this.$api.getUserInfo({}).then(res => {
					if(res.code == 0){
						uni.switchTab({url:'/pages/tabbar/workbench'})
					}
				}, error => {
				})
			},
			goConfig(){
				uni.navigateTo({
					url:'/pages/tabbar/config'
				})
			},
			tabChange(index){
				console.log("tabChange",index)
				this.tabCurrent = index;
				if(index==0){
					this.getImgCodeTxt();
				}
			},
			// 密码显示切换
			toggle() {
				this.passwordIsShow = !this.passwordIsShow;
				
			},
			verifygetImgCode(){
				if(!this.phone){
					this.$refs.uToast.show({
						title: '请先输入手机号',
						type: 'error',
					})
				}else if(!this.$u.test.mobile(this.phone)){
					this.$refs.uToast.show({
						title: '请先输入正确的手机号',
						type: 'error',
					})
				}else{
					this.getImgCodeTxt();
				}
			},
			verifySenCode(){
				if(this.imgCodeTxt){
					this.getCode()
				}else{
					this.$u.toast('请输入图片验证码');
					this.$refs.codeModal.clearLoading();
				}
			},
			getCode(){
				uni.showLoading({
					title: '正在获取验证码'
				})
				let parmas = {
					mobile:this.phone,
					event:'login',
					imageCode:this.imgCodeTxt,
					cid:this.imgCodeKey
				}
				this.$api.sendSms(parmas).then(res => {
					if(res.code == 0){
						uni.hideLoading();
						this.$refs.codeModal.clearLoading();
						this.$u.toast('验证码已发送');
						this.codeShow = false;
					}else{
						uni.hideLoading();
						this.$refs.codeModal.clearLoading();
						this.$u.toast(res.message);
						setTimeout(()=>{
							this.getImgCodeTxt();
						},1200)
					}
				}, error => {
					this.$u.toast('服务器开小差了呢，请您稍后再试')
				})
			},
			getImgCodeTxt(){
				this.$api.getImgCode({}).then(res => {
					if(res.code == 0){
						this.imgCodeKey = res.data.cid;
						this.imgCodePath = res.data.base64;
						this.imgCodeTxt = '';
						// 获取图片验证码
						if(this.tabCurrent==1){
							this.codeShow = true;
						}
					}else{
						this.$u.toast(res.message);
					}
				}, error => {
					this.$u.toast('服务器开小差了呢，请您稍后再试')
				})
			},
			Login(){
				if(this.tabCurrent==0){
					this.btnLogin();
				}else{
					this.codeLogin()
				}
			},
			/*
				根据账号、密码、ip地址发起登录请求，
				请求成功缓存token和ip地址
						*/
			btnLogin() {
				// 表单验证
				if(this.verification()){
					let params = {
						username: this.username,
						password: encrypt(this.password),
						// grant_type: 'password'
						autoLogin:true,
						code:this.imgCodeTxt,
						cid:this.imgCodeKey
					}
					this.$api.passwordLogin(params).then(res => {
						if (res.code == 0) {
							// 保存数据到vuex
							this.$store.commit('setTokenKey', res.data.token);
							// this.$store.commit('setHtpUrl', this.$htoProtocol + this.ipAddress);
							// token过期时间
							let expire = res.data.expires*1000 + new Date().getTime();
							// 缓存信息
							uni.setStorage({
								key:'token',
								data: res.data.token,
							}).then(res => {
								return uni.setStorage({
									key:'expire',
									data: expire,
								})
							}).then(res => {
								return uni.setStorage({
									key:'username',
									data: this.username,
								})
							}).then(res => {
								return uni.setStorage({
									key:'password',
									data: this.password,
								})
							}).then(res => {
								this.$refs.uToast.show({
									title: '登录成功',
									type: 'success',
									url: '/pages/tabbar/workbench',
									isTab:true,
									duration:1000
								})
							})
						} else {
							this.$u.toast(res.message)
							this.getImgCodeTxt();
						}
					}, error => {
						this.$u.toast('服务器开小差了呢，请您稍后再试')
						console.log(error);
					})
				}
			},
			codeLogin() {
				// 表单验证
				if(this.phoneVerification()){
					let params = {
						mobile: this.phone,
						code: this.code,
						autoLogin: true
					}
					this.$api.mobileLogin(params).then(res => {
						if (res.code==0) {
							// 保存数据到vuex
							this.$store.commit('setTokenKey', res.data.token);
							// this.$store.commit('setHtpUrl', this.$htoProtocol + this.ipAddress);
							let expire = res.data.expires*1000 + new Date().getTime();
							// 缓存信息
							uni.setStorage({
								key:'token',
								data: res.data.token,
							}).then(res => {
								return uni.setStorage({
									key:'expire',
									data: expire,
								})
							}).then(res => {
								return uni.setStorage({
									key:'phone',
									data: this.phone,
								})
							}).then(res => {
								this.$refs.uToast.show({
									title: '登录成功',
									type: 'success',
									url: '/pages/tabbar/workbench',
									isTab:true,
									duration:1000
								})
							})
						} else {
							this.$u.toast(res.message)
						}
					}, error => {
						this.$u.toast('服务器开小差了呢，请您稍后再试')
						console.log(error);
					})
				}
			},
			//	表单验证
			verification(){
				if(!this.username){
					this.$refs.uToast.show({
						title: '请输入账号!',
						type: 'error'
					})
					return false;
				}else if(!this.password){
					this.$refs.uToast.show({
						title: '请输入密码!',
						type: 'error'
					})
					return false;
				}else{
					console.log('true',true)
					return true;
				}
			},
			//	表单验证
			phoneVerification(){
				if(!this.phone){
					this.$refs.uToast.show({
						title: '请先输入手机号',
						type: 'error',
					})
					return false;
				}else if(!this.$u.test.mobile(this.phone)){
					this.$refs.uToast.show({
						title: '请先输入正确的手机号',
						type: 'error',
					})
					return false;
				}else if(!this.code){
					this.$refs.uToast.show({
						title: '请先输入验证码',
						type: 'error',
					})
					return false;
				}else{
					return true;
				}
			},
			goUrl(url){
				console.log(url)
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style scoped lang="less">
	#login {
		height: 100vh;
		background: url(https://am-img.gkiiot.com/iotos/app/img/login/login-bg1x.png) no-repeat;
		/*  #ifdef  APP-PLUS  */
		background: url(data:image/png;base64,[encoded data, 328252 characters]) no-repeat;
		/*  #endif  */
		background-size: 100% 100%;
		display: flex;
		justify-content: center;
		// align-items: center;
		padding-top: calc((100vh - 700rpx)/2);
	}

	.login-box {
		width: 690rpx;
		height: 700rpx;
		background-color: #fff;
		/* background: linear-gradient(0deg, #0AB6FE 0%, #495AFF 100%); */
		border-radius: 20rpx;
		padding: 20rpx;
		position: relative;
		.config-icon{
			position: absolute;
			top:0;
			right:0rpx;
			font-size: 60rpx;
			padding: 20rpx;
		}
	}

	.title-box {
		margin-top: 12rpx;
		margin-bottom: 42rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 96rpx;
			height: 96rpx;
			margin-right: 10rpx;
		}

		text {
			font-size: 36rpx;
			font-family: Source Han Sans SC;
			font-weight: 500;
			color: #010101;
			line-height: 89rpx;
		}
	}

	.form-item {
		height: 126rpx;
		border-bottom: 1px solid #ddd;
		display: flex;
		align-items: center;
		padding: 0 21rpx;

		.iconfont {
			&:first-of-type {
				font-size: 40rpx;
				color: #45a5ff;
				font-weight: 550;
			}

			&:nth-of-type(2) {
				font-size: 45rpx;
				color: #707070;
			}
		}

		input {
			width: 500rpx;
			padding-left: 20rpx;
		}
		&.login-phone{
			input {
				width: 350rpx;
				padding-left: 20rpx;
			}
			.login-phone-btn{
				font-size: 24rpx;
				background: #2F7EFD;
			}
		}
		&.login-img{
			input {
				width: 350rpx;
				padding-left: 20rpx;
			}
			image{
				width: 300rpx;
				height: 100rpx;
			}
		}
	}

	.forget-password {
		padding: 33rpx 37rpx 40rpx 0;
		font-size: 24rpx;
		color: #666;
		text-align: end;
	}

	.btn-box {
		display: flex;
		justify-content: center;

		button {
			display: block;
			color: #fff;
			font-weight: bold;
			width: 590rpx;
			height: 85rpx;
			background: linear-gradient(0deg, #2F7EFD, #65A4FF);
			border-radius: 43rpx;
			border: none;
			line-height: 85rpx;
		}
	}
	.imgCodeModel-content{
		padding: 10rpx 50rpx;
	}
</style>
