<template>
	<view class="login-page">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="u-flex" style="flex-direction: column;">
			<view style="height: 250rpx;margin-top: 90rpx;margin-left: -107rpx;">
				<view style="font-size: 30px;color:#3A4759">您好,</view>
				<view style="position: relative;font-size: 30px;color:#3A4759" class="">欢迎来到ThingsKit!</view>
				<view class="circleStyle"></view>
			</view>
		</view>
		<view class="f__login">
			<view class="loginPhone">
				<view class="form-row">
					<u--input border="bottom" class="input" prefixIcon="account-fill" type="text" placeholder="登录账号" v-model="loginForm.username"></u--input>
				</view>
				<view class="form-row">
					<u-input
						border="bottom"
						class="input"
						prefixIcon="lock-fill"
						suffixIconStyle="color: #909399"
						:type="showPasswordOrText"
						placeholder="请输入密码"
						v-model="loginForm.password"
						@change="passwordChange"
					>
						<template slot="suffix">
							<u-icon @click="showPasswordMode" :name="showPasswordIcon"></u-icon>
						</template>
					</u-input>
				</view>
				<button class="submit" size="default" @click="onSubmitFunc"><text style="color:#FFFFFF">登录</text></button>
				<view class="u-flex" style="flex-direction: row;margin-top: 20rpx;justify-content: space-between;">
					<view style="color: #999999;font-size: 13px;" @click="openCodeFunc">手机验证码登录</view>
					<view style="color: #999999;font-size: 13px;position: relative;" @click="findPassrordFunc">忘记密码</view>
				</view>
				<view class="u-flex" style="justify-content: center;flex-direction: column;margin-top: 220rpx;">
					<view style="color:#999999;font-size: 13px;">第三方账号登录</view>
					<view style="height:20rpx"></view>
					<view><image style="width: 75rpx;height: 75rpx;" src="../../static/weixin.png" mode="aspectFill"></image></view>
					<view class="circleStyleBottom"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
	data() {
		return {
			showPasswordIcon: 'eye-off',
			showPasswordOrText: 'password',
			loginForm: {
				username: '',
				password: ''
			}
		};
	},
	methods: {
		...mapMutations(['setUserInfo']),
		passwordChange() {},
		onSubmitFunc() {
			if (this.loginForm.username == '' || this.loginForm.password == '') {
				return uni.$u.toast('请输入用户名或密码');
			}
			uni.$u.http.post('/auth/login', this.loginForm).then(res => {
				if (res) {
					// 储存登录信息
					let resObj = {
						refreshToken: res.refreshToken,
						isToken: res.token
					};
					let userInfo = {
						...resObj,
						token: true //token用于判断是否登录
					};
					this.setUserInfo(userInfo);
					uni.showToast({
						title: '登录成功~',
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateBack();
					}, 500);
				}
			});
		},
		openCodeFunc() {
			uni.navigateTo({
				url: './code'
			});
		},
		findPassrordFunc() {
			uni.navigateTo({
				url: './findPassword'
			});
		},
		showPasswordMode() {
			if (this.loginForm.password.length !== 0) {
				this.showPasswordOrText = 'text';
				this.showPasswordIcon = 'eye-fill';
			} else {
				this.showPasswordOrText = 'password';
				this.showPasswordIcon = 'eye-off';
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.login-page {
	min-height: 100vh;
	background-color: #fff;
	.circleStyle {
		position: absolute;
		width: 145rpx;
		height: 300rpx;
		left: -31rpx;
		top: 10rpx;
		border-radius: 0 100rpx 100rpx 0/0 150rpx 150rpx 0;
		background-color: #f0f2f5;
		opacity: 0.5;
	}
}

.f__login {
	padding: 8rpx 32rpx;
	border-radius: 18rpx 18rpx 0 0;
	z-index: 99;
	position: relative;
}

.loginPhone {
	.form-row {
		position: relative;

		.input {
			font-size: 34rpx;
			line-height: 102rpx;
			height: 114rpx;
			width: 100%;
			box-sizing: border-box;
			font-size: 30rpx;
			padding: 0;
			font-weight: bold;
		}
	}

	.submit {
		margin-top: 60rpx;
		background: linear-gradient(90deg, #5dc2fc 0%, #377dff 100%);
		width: 100%;
		border-radius: 46px;
	}
	.circleStyleBottom {
		position: absolute;
		width: 145rpx;
		height: 300rpx;
		right: -31rpx;
		top: 404rpx;
		//#ifndef MP
		top: 504rpx;
		//#endif
		border-radius: 0 100rpx 100rpx 0/0 150rpx 150rpx 0;
		background: linear-gradient(241deg, #00c9a7 0%, rgba(0, 223, 252, 0.5) 100%);
		opacity: 0.1;
		transform: rotate(180deg);
	}
}
</style>