<template>
	<view id="login">
		<view class="login-box">
			<view class="title-box">
				<!-- #ifdef MP-WEIXIN -->
				<image src="https://am-img.gkiiot.com/iotos/app/img/login/logo.png" mode=""></image>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<image src="data:image/png;base64,[encoded data, 17388 characters]" mode=""></image>
				<!-- #endif -->
				<text>海创微联</text>
			</view>
			<view class="form-box">
				<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-yanzhengma"></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-password">
					<view class="iconfont icon-tubiaoshangchuanmoban"></view>
					<input v-model.trim="ipAddress" type="text" placeholder="请输入地址如:192.168.0.1" />
				</view> -->
			</view>
			<view class="forget-password">
				<!-- <text @click="goUrl('./forget-password')">忘记密码？</text> -->
			</view>
			<view class="btn-box">
				<button type="default" @click="btnLogin">登录</button>
			</view>
		</view>
		<u-toast ref="uToast" />
		<!-- 更新组件 force 是否强制更新    tabbar：页面是否有原生tabbar组件-->
		<!-- #ifdef APP-PLUS -->
		<app-update ref="app_update" :tabbar="false"></app-update>
		<!-- #endif -->
	</view>
</template>

<script>
	// #ifdef APP-PLUS
	import appUpdate from "@/common/components/content/update/app-update.vue"
	// #endif
	export default {
		data() {
			return {
				username: null,
				password: null,
				// ipAddress: null,
				// username:'admin',
				// password:123456,
				// ipAddress:'192.168.21.190',
				passwordIsShow: true,
			}
		},
		components:{
			// #ifdef APP-PLUS
			appUpdate
			// #endif
		},
		mounted() {
			// #ifdef APP-PLUS
			this.$refs.app_update.update();  //调用子组件 检查更新
			// #endif
		},
		onLoad() {
			
		},
		onShow() {
			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;
				}
			})
		},
		methods: {
			// 密码显示切换
			toggle() {
				this.passwordIsShow = !this.passwordIsShow;
			},
			/*
				根据账号、密码、ip地址发起登录请求，
				请求成功缓存token和ip地址
						*/
			btnLogin() {
				// uni.switchTab({
				// 	url:'./home'
				// })
				// 表单验证
				if(this.verification()){
					let that = this;
					let opt = {
						url: '/prod-api/oauth/token',
						method: 'GET',
						header: {
							'Authorization': 'Basic dGVzdDoxMjM0NTY=',
						},
					};
					let params = {
						username: this.username,
						password: this.password,
						grant_type: 'password'
					}
					this.$request.basicRequest(opt, params).then(res => {
						if (!res.code) {
							// 保存数据到vuex
							this.$store.commit('setTokenKey', res.access_token);
							// this.$store.commit('setHtpUrl', this.$htoProtocol + this.ipAddress);
							// 缓存信息
							uni.setStorage({
								key:'token',
								data: res.access_token,
							}).then(res => {
								// console.log("保存token");
								return uni.setStorage({
									key:'username',
									data: this.username,
								})
							}).then(res => {
								// console.log("保存name");
								return uni.setStorage({
									key:'password',
									data: this.password,
								})
							}).then(res => {
								// console.log("保存password");
								
								this.$refs.uToast.show({
									title: '登录成功',
									type: 'success',
									url: '/pages/index/home',
									isTab:true,
									duration:1000
								})
							})
							
						} else {
							if(res.msg){
								this.$u.toast(res.msg);
							}else{
								this.$u.toast('登录失败');
							}
						}
					}, error => {
						this.$u.toast('服务器开小差了呢，请您稍后再试')
						console.log(error);
					})
				}
			},
			//	表单验证
			verification(){
				if(!this.username){
					// this.$u.toast('请输入账号!');
					this.$refs.uToast.show({
						title: '请输入账号!',
						type: 'error'
					})
					return false;
				}else if(!this.password){
					// this.$u.toast('请输入密码!');
					this.$refs.uToast.show({
						title: '请输入密码!',
						type: 'error'
					})
					return false;
				}else{
					console.log('true',true)
					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;
		
	}

	.login-box {
		width: 690rpx;
		height: 690rpx;
		background-color: #fff;
		/* background: linear-gradient(0deg, #0AB6FE 0%, #495AFF 100%); */
		border-radius: 20rpx;
		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 {
			// width: 191px;
			// height: 34px;
			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;
		}
	}

	.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;
		}
	}
</style>
