<template>
	<view class="login-page">
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="u-flex login-main">
			<view class="content">
				<view class="hello login-text-muted">您好,</view>
				<view class="hello-welcome login-text-muted">欢迎来到ThingsKit!</view>
				<view class="circleStyle"></view>
			</view>
		</view>
		<view class="f__login">
			<view class="loginPhone">
				<view class="form-row u-flex">
					<view class="v-input"><input type="text" v-model="loginForm.username" maxlength="32" placeholder="请输入登录账号" /></view>
					<u-icon></u-icon>
				</view>
				<view class="form-row u-flex">
					<view class="v-input"><input type="text" v-model="loginForm.password" maxlength="32" placeholder="请输入登录密码" :password="!showPassword" /></view>
					<view class="v-password" @click="showPasswordMode"><u-icon size="25" :name="showPassword ? 'eye-fill' : 'eye-off'"></u-icon></view>
					<u-icon></u-icon>
				</view>
				<button class="submit" size="default" @click="onSubmitFunc"><text class="text">登录</text></button>
				<view class="u-flex row-item">
					<view class="row-phone login-text-gray" @click="openCodeFunc">手机验证码登录</view>
					<view class="row-reset login-text-gray" @click="findPassrordFunc">忘记密码</view>
				</view>
				<view class="u-flex link-login">
					<view class="link-text login-text-gray">第三方账号登录</view>
					<view style="height:20rpx"></view>
					<view @click="onAuthorization" class="link-image"><image class="image" src="../../static/weixin.png" mode="aspectFill"></image></view>
					<view class="circleStyleBottom"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapMutations } from 'vuex';
import { loginApp } from '@/config/login';
import baseUrl from '@/config/baseUrl.js';
import WXBizDataCrypt from '@/config/WXBizDataCrypt.js';
import { appId, appSecrect } from '@/config/constant.js';

export default {
	data() {
		return {
			loginForm: {
				username: '',
				password: ''
			},
			showPassword: false,
			code: '',
			openid: '',
			session_key: ''
		};
	},
	onLoad() {
		//#ifdef MP-WEIXIN
		wx.login({
			success: res => {
				if (res.code) {
					this.code = res.code;
					wx.request({
						url: `https://api.weixin.qq.com/sns/jscode2session?appid=${appId}&secret=${appSecrect}&js_code=${this.code}&grant_type=authorization_code`,
						method: 'GET',
						success: res => {
							if (res.statusCode == 200) {
								this.openid = res.data.openid;
								this.session_key = res.data.session_key;
							}
						}
					});
				} else {
				}
			}
		});
		//#endif
	},
	methods: {
		...mapMutations(['setUserInfo']),
		//微信授权登录
		onAuthorization(e) {
			wx.getUserProfile({
				desc: '获取用户信息',
				success: res => {
					if (res) {
						let pc = new WXBizDataCrypt(appId, this.session_key);
						let data = pc.decryptData(res.encryptedData, res.iv);
						let obj = {
							avatarUrl: data.avatarUrl,
							nickName: data.nickName,
							thirdUserId: this.openid
						};
						//判断是否需要绑定
						uni.$u.http
							.get(`/yt/third/login/${this.openid}`)
							.then(res => {
								if (res.token == '' || res.token == null) {
								} else {
									// 储存登录信息
									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();
									// return uni.showToast({
									// 	title: '不需要绑定'
									// });
								}
							})
							.catch(e => {
								uni.$u.toast(e.data?.message);
							});
						// #ifdef APP-PLUS||MP
						setTimeout(() => {
							uni.reLaunch({
								url: '/pages/personal/personal?obj=' + JSON.stringify(obj)
							});
						}, 500);
						// #endif
					}
				}
			});
		},
		saveUserInfo() {
			//储存个人信息
			uni.$u.http.get('/yt/user/me/info').then(res => {
				if (res) {
					this.setUserInfo(res);
				}
			});
		},
		onSubmitFunc() {
			if (this.loginForm.username == '') {
				return uni.$u.toast('请输入登录账号~');
			}
			const passReg = /^(?=.*?[A-Z])(?=(.*[a-z]){1,})(?=(.*[\d]){1,})(?=(.*[\W]){1,})(?!.*\s).{8,}$/;
			if (this.loginForm.password == '') {
				uni.showToast({
					title: '请输入登录密码~',
					icon: 'none'
				});
				return;
			} else if (!passReg.test(this.loginForm.password)) {
				uni.showToast({
					title: '密码格式不正确（至少一个大写英文字母、至少一个小写英文字母、至少一位数字、至少一个特殊字符、最少八个字符）~',
					icon: 'none',
					duration: 3000
				});
				return;
			}
			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'
						}).then(res => {
							/**
							 * 有些时候不起作用
							 */
							// uni.navigateBack({
							// 	delta: 1
							// });
							// #ifdef APP-PLUS||MP
							uni.reLaunch({
								url: '/pages/personal/personal'
							});
							// #endif
						});
						this.saveUserInfo();
					}
				})
				.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: '../other/code'
			});
		},
		findPassrordFunc() {
			uni.navigateTo({
				url: '../other/findPassword'
			});
		},
		showPasswordMode() {
			this.showPassword = !this.showPassword;
		}
	}
};
</script>

<style lang="scss" scoped>
@import './static/login.scss';
</style>