<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 color="#9a9a9a" 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, mapActions } 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;
								//设置全局变量openId
								getApp().globalData.openId = res.data.openid;
							}
						},
						complete: e => {
							if (e.data.errcode != null) {
								return;
								// return uni.$u.toast('获取用户唯一id失败');
							}
						}
					});
				} else {
				}
			}
		});
		//#endif
	},
	methods: {
		...mapMutations(['setUserInfo']),
		...mapActions(['updateBadgeTotal']),
		//微信授权登录
		//#ifdef MP-WEIXIN
		onAuthorization() {
			/**
			 * 注意：通过wx.getUserProfile并不能获取用户的openid，openid是唯一识别用户的标识，
			 * 所以最好在用户授权登录时就获取。调用wx.login()获取
			 */
			wx.getUserProfile({
				desc: '获取用户授权信息',
				success: res => {
					if (res) {
						//微信官方自带解密（node.js实现）
						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) {
									//需要绑定，跳转我的页面进行绑定,显示绑定按钮
									uni.reLaunch({
										url: '../../pages/personal/personal'
									});
									let userInfo = {
										isThirdLogin: true //token用于判断是否登录
									};
									this.setUserInfo(userInfo);
								} 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();
									this.getAlarmTotalData();
									uni.reLaunch({
										url: '../../pages/personal/personal'
									});
								}
							})
							.catch(e => {
								uni.$u.toast(e.data?.message);
							});
						/**
						 * 有些时候uni.navigatorBack({})没有返回到上级页面
						 * 才使用uni.reLaunch()进行跳转
						 */
						// #ifdef MP
						setTimeout(() => {
							uni.reLaunch({
								url: '../../pages/personal/personal?obj=' + encodeURIComponent(JSON.stringify(obj))
							});
						}, 500);
						// #endif
					}
				}
			});
		},
		//#endif
		saveUserInfo() {
			//储存个人信息
			uni.$u.http.get('/yt/user/me/info').then(res => {
				if (res) {
					this.setUserInfo(res);
				}
			});
		},
		getAlarmTotalData() {
			uni.$u.http.get('/yt/homepage/app').then(res => {
				if (res) {
					//异步实时更新告警徽标数
					this.updateBadgeTotal(res.totalAlarm.activedAlarm);
				}
			});
		},
		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用于判断是否登录
							isThirdLogin: false
						};
						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();
						this.getAlarmTotalData();
					}
				})
				.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>