<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="idName" placeholder="请输入姓名"></input>
			</view>
			<view class="login-info-1">
				<input class="login-info-1-1" type="idcard" v-model="idNumber" placeholder="请输入身份证号"></input>
			</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'
	import {
		isCardID
	} from '@/utils/util/util.js'
	export default {
		data() {
			return {
				idName: "",
				idNumber: "",
			}
		},
		methods: {
			goLogin() {
				if (!this.idName || !this.idNumber) {
					uni.showToast({
						icon: 'none',
						title: '姓名身份证必填'
					});
					return
				}
				let res = isCardID(this.idNumber);
				if (!res.state) {
					uni.showToast({
						icon: 'none',
						title: res.data
					});
					return
				}
				uni.showLoading({
					title: '登录中...',
					icon: 'loading',
					mask: true
				})
				let data = {
					idName: this.idName,
					idNumber: this.idNumber,
					loginType: "verify",
					password: "",
					username: ""
				}
				login(data).then(async res => {
					uni.hideLoading()
					await 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/login"
				})
			},
		}
	}
</script>

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

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

		// .login-title {
		// 	position: fixed;
		// 	top: 115px;
		// 	left: 45px;
		// 	color: #203349;
		// 	text-align: left;
		// 	font-size: 28px;
		// 	font-weight: 700;
		// 	letter-spacing: 3.15px;
		// }

		.login-info {
			position: fixed;
			top: 110px;
			width: 100%;
			padding: 25px;
			// 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: 90%;
			}

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

		}

		// .btn {
		// 	width: 100%;
		// 	text-align: center;
		// 	padding: 10px 33px 20px;
		// 	box-sizing: border-box;
		// 	position: fixed;
		// 	top: 390px;
		// 	// background-color: red;
		// }

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

	}

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