<template>
	<view class="login">
		<view class="register">
			<view class="top">
				<image class="img" src="../../static/login/hqt.png" mode=""></image>
				<text class="text">红蜻蜓</text>
			</view>
			<view class="form">
				<view class="input">
					<input type="text" class="value" placeholder="请输入用户名" v-model="username">
				</view>
				<view class="input">
					<input type="text" password class="value" placeholder="请输入密码" v-model="password">
				</view>
				<button class="btn" type="primary" @click="submit()">登录</button>
			</view>
		</view>
		<view class="bj">
			<image class="img" src="../../static/login/login.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	import {
		login
	} from '../../api/user.js'
	import md5 from "../../utils/md5.js";
	import store from '../../store/index.js'
	export default {
		data() {
			return {
				username: '',
				password: '',
			};
		},
		created() {
			const username = uni.getStorageSync('username');
			const password = uni.getStorageSync('password');

			if (username && password) {
				this.username = username;
				this.password = password;
				this.submit()
			}
		},

		methods: {
			async submit() {
				let pass = md5.hex_md5(this.password)
				if (this.password && this.username) {
					const res = await login({
						username: this.username,
						password: pass,
					})
					if (res.data.success == 0) {
						uni.setStorage({
							key: 'username',
							data: this.username
						});
						uni.setStorage({
							key: 'password',
							data: this.password
						});
						uni.setStorage({
							key: 'tokenInfo',
							data: res.data.data.token
						});
						uni.setStorage({
							key: 'account',
							data: res.data.data.account
						});
						store.dispatch('addTokenInfo', res.data.data.token)
						store.dispatch('addUser', res.data.data)
						store.dispatch('addPower',res.data.data.power)
						uni.redirectTo({
							url: '/pages/home/home'
						});
					}
				} else {
					uni.showToast({
						title: '账号或密码不能为空',
						icon: 'none'
					});
				}
			},
		}
	}
</script>

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

		.register {
			width: 500rpx;
			height: 600rpx;
			border-radius: 6px;
			background: rgba(241, 238, 233, 0.9);
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			.top {
				text-align: center;
				position: relative;
				padding: 30rpx 0;

				.img {
					width: 130rpx;
					height: 130rpx;
					position: absolute;
					left: -30rpx;
					top: -60rpx;
				}

				.text {
					font-size: 40rpx;
					color: #e61c28;
					font-weight: bolder;
				}
			}

			.form {
				padding: 30rpx 40rpx 0;

				.input {
					height: 80rpx;
					margin: 40rpx 0;

					.value {
						height: 100%;
						padding-left: 10rpx;
						border-bottom: 1rpx solid #959595;

					}
				}

				.btn {
					width: 200rpx;
					height: 70rpx;
					line-height: 70rpx;
					background-color: #e61c28;
					margin-top: 30rpx;
				}
			}
		}

		.bj {
			width: 100%;
			height: 100%;
			position: absolute;
			z-index: -1;

			.img {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>