<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="passwordText"
						placeholder="请输入密码"
						v-model="loginForm.password"
					>
						<template slot="suffix">
							<u-icon @click="showPasswordMode" :name="showPassword ? showTextIcon : 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>
				<!-- <button class="button marginT" @click="onAuthorization" :style="{background:PrimaryColor}">微信授权登录</button> -->
				<view @click="onAuthorization" 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 { mapMutations } from 'vuex';
import { getUserInfo } from '@/components/module/f-login/f-login.js';

export default {
	data() {
		return {
			showPasswordIcon: 'eye-off',
			showTextIcon: 'eye-fill',
			loginForm: {
				username: '',
				password: ''
			},
			showPassword: false,
			passwordText: 'password'
		};
	},
	methods: {
		...mapMutations(['setUserInfo']),
		onAuthorization(e) {
			getUserInfo(
				info => {
					console.log(info, '授权信息');
					let httpData = {
						code: this.code,
						nickName: info.nickName || '', //昵称
						avatarUrl: info.avatarUrl || '', //头像
						gender: info.gender || '' //性别 0:未知 1:男 2:女
					};
					// uni.$u.http.post('您的接口', httpData).then(res => {
					let userInfo = {
						// ...res,
						token: true //token用于判断是否登录
					};
					// this.setUserInfo(userInfo)
					// setTimeout(()=>{
					//     uni.showToast({
					//     	title: '登录成功',
					//     	icon: 'none'
					//     });
					//     this.closeLogin();
					// },100)
					// })
				},
				err => {
					// this.closeLogin();
				}
			);
		},
		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用于判断是否登录
						};
						if (userInfo.token) {
							this.setUserInfo(userInfo);
						}
						uni.showToast({
							title: '登录成功~',
							icon: 'none'
						});
						this.saveUserInfo();
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 500);
						//#ifndef MP
						setTimeout(() => {
							uni.navigateTo({
								url: 'personal'
							});
						}, 500);
						//#endif
					}
				})
				.catch(e => {
					uni.$u.toast(e.data.message);
				});
		},
		saveUserInfo() {
			//储存个人信息
			uni.$u.http.get('/yt/user/me/info').then(res => {
				if (res) {
					this.setUserInfo(res);
				}
			});
		},
		openCodeFunc() {
			uni.navigateTo({
				url: './code'
			});
		},
		findPassrordFunc() {
			uni.navigateTo({
				url: './findPassword'
			});
		},
		showPasswordMode() {
			this.showPassword = !this.showPassword;
			if (!this.showPassword) {
				this.passwordText = 'password';
			} else {
				this.passwordText = 'text';
			}
		}
	}
};
</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>