<template>
	<view class="login">
		<image src="@/static/bg-1.png" mode=""></image>
		<view class="login-info">
			<view class="login-title">
				账号登录
			</view>
			<view class="login-info-1">
				<input class="login-info-1-1" type="text" v-model="username" placeholder="请输入账号"></input>
			</view>
			<view class="login-info-1">
				<input :password="!open" class="login-info-1-1" type="text" v-model="password"
					placeholder="请输入密码"></input>
				<u-icon v-if="!open" name="eye-off" color="#8893AB" size="28" @click="onSwitch"></u-icon>
				<u-icon v-if="open" name="eye-fill" color="#8893AB" size="28" @click="onSwitch"></u-icon>
			</view>
			<view class="btn">
				<u-button type="primary" text="登录" @click="goLogin" color="#3074FF"></u-button>
			</view>
			<view class="login-text">
				<span @click="goLoginText">实名登录</span>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		login,
		getUserInfo
	} from '@/api/login.js'
	export default {
		data() {
			return {
				username: "",
				password: "",
				open: false, //默认不显示密码
			}
		},
		methods: {
			goLogin() {
				if (!this.username || !this.password) {
					uni.showToast({
						icon: 'none',
						title: '账号密码必填'
					});
					return
				}
				uni.showLoading({
					title: '登录中...',
					icon: 'loading',
					mask: true
				})
				let data = {
					idName: null,
					idNumber: null,
					loginType: "account",
					username: this.username,
					password: this.password
				}
				login(data).then(res => {
					uni.hideLoading()
					uni.setStorageSync('token', res.data.token)
					uni.showToast({
						title: '登录成功',
						icon: 'none',
						duration: 1000,
						mask: true,
						success: () => {
							// uni.switchTab({
							// 	url: '/pages/signIn/signIn',
							// });
							setTimeout(() => {
								this.checkUserInfo();
							}, 800)
						}
					})
				}).catch(err => {
					uni.hideLoading()
				})
			},
			// 获取信息
			checkUserInfo() {
				getUserInfo().then(res => {
					uni.setStorageSync('userInfo', res.data)
					uni.switchTab({
						url: '/pages/signIn/signIn',
					});
				}).catch(err => {});
			},
			goLoginText() {
				uni.navigateTo({
					url: "/pages/login/index"
				})
			},
			onSwitch() {
				this.open = !this.open
			},

		}
	}
</script>

<style lang="scss" scoped>
	.login {
		width: 100%;
		height: 100%;

		image {
			width: 100%;
			height: 100%;
		}

		.login-info {
			position: fixed;
			top: 110px;
			width: 100%;
			padding: 30px;
			// height: 180px;
			box-sizing: border-box;

			.login-title {
				color: #203349;
				text-align: left;
				font-size: 28px;
				font-weight: 700;
				letter-spacing: 3.15px;
				margin-bottom: 70px;
			}

			.login-info-1 {
				width: 100%;
				height: 50px;
				display: flex;
				align-items: center;
				margin-bottom: 15px;
				background-color: #fff;
				border-radius: 30px;

			}

			.login-info-1-1 {
				margin-left: 30px;
				width: 77%;
			}

			.btn {
				width: 100%;
				text-align: center;
				margin-top: 30px;
				margin-bottom: 20px;
				// background-color: red;
			}

			.login-text {
				width: 100%;
				color: #578AD8;
				text-align: center;
				font-size: 15px;
				font-weight: 400;
			}
		}
	}

	::v-deep .u-button {
		height: 50px !important;
		border-radius: 30px !important;
	}
</style>