<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>
		</view>

		<view class="f__login">
			<view class="loginPhone">
				<view class="form-row u-flex"><u-input v-model="loginForm.username" type="text" placeholder="请输入登录账号" border="bottom" /></view>

				<view class="form-row u-flex">
					<u-input v-model="loginForm.password" :password="showPassword" placeholder="请输入登录密码" border="bottom">
						<template slot="suffix" @click="showPasswordMode">
							<view style="padding:20rpx"><u-icon :name="showPassword ? '/static/eye-hide.png' : '/static/eye.png'"></u-icon></view>
						</template>
					</u-input>
				</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>

					<button class="link-image" @tap="onWenxinAuthorization"><image class="image" src="../../static/weixin.png" mode="aspectFill"></image></button>
				</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: true,

			code: '',

			openid: ''
		};
	},

	onLoad() {
		wx.login({
			success: res => {
				if (res.code) {
					this.code = res.code;

					//这里获取openid
				} else {
					return;
				}
			}
		});
	},

	methods: {
		...mapMutations(['setUserInfo']),

		...mapActions(['updateBadgeTotal']),

		//微信授权登录

		//#ifdef MP-WEIXIN

		onWenxinAuthorization() {
			wx.getUserProfile({
				desc: '微信第三方授权',

				success: reswenxin => {
					console.log('res=======>', reswenxin);

					if (reswenxin.errMsg === 'getUserProfile:ok' && reswenxin.encryptedData) {
						console.log('获取code', this.code);

						//获取用户信息

						let obj = {
							avatarUrl: reswenxin.userInfo.avatarUrl,

							thirdUserId: this.openid
						};

						//判断是否需要绑定

						uni.$u.http

							.get(`/yt/third/login/${this.code}`)

							.then(res => {
								console.log('Res', res);

								//设置全局变量openId

								// getApp().globalData.openId = res.data.openid;

								if (res.token == '' || (res.token == null && res.refreshToken)) {
									//需要绑定

									let userInfo = {
										isThirdLogin: true, //用于判断是否是第三方登录并且需要绑定账号

										avatar: obj.avatarUrl
									};

									this.setUserInfo(userInfo);

									//设置全局变量openId

									getApp().globalData.openId = res.refreshToken;

									uni.reLaunch({
										url: '../../pages/personal/personal'
									});
								} else {
									// 不需要绑定,直接第三方登录使用

									let resObj = {
										refreshToken: res.refreshToken,

										isToken: res.token
									};

									let userInfo = {
										...resObj,

										token: true, //token用于判断是否登录

										isThirdLoginAndNoDind: true //用于判断是否是第三方登录并且不需要绑定账号
									};

									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);
							});
					}
				},

				fail: res => {
					//拒绝授权

					return;
				}
			});
		},

		//#endif

		saveUserInfo() {
			//储存个人信息

			uni.$u.http.get('/yt/user/me/info').then(res => {
				if (res) {
					this.setUserInfo(res);
				}
			});
		},

		async getAlarmTotalData() {
			const res = await uni.$u.http.get('/yt/homepage/app');
			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,
							isThirdLoginAndNoDind:false
						};

						if (userInfo.token) {
							this.setUserInfo(userInfo);
						}

						uni
							.showToast({
								title: '登录成功~',

								icon: 'none'
							})
							.then(async res => {
								this.saveUserInfo();
								await this.getAlarmTotalData();
								uni.reLaunch({
									url: '/pages/personal/personal'
								});
							});
					}
				})

				.catch(e => {
					uni.$u.toast(e.data?.message);
				});
		},

		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';

/deep/ button {
	background: rgba(0, 0, 0, 0);
}
</style>