<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 style="width:587rpx" class="text-clip  hello-welcome login-text-muted">欢迎来到{{ plateInfo.name !== undefined ? plateInfo.name : '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">
							<view @click="showPasswordMode" style="padding: 10rpx">
								<u-icon width="18" height="14" :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, mapState } from 'vuex';
import { loginApp } from '@/config/login';
import baseUrl from '@/config/baseUrl.js';
import WXBizDataCrypt from '@/config/WXBizDataCrypt.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;
				}
			}
		});
	},
	computed: {
		...mapState(['plateInfo'])
	},
	methods: {
		...mapMutations(['setUserInfo', 'setPlateInfo']),
		...mapActions(['updateBadgeTotal']),
		//微信授权登录
		//#ifdef MP-WEIXIN
		onWenxinAuthorization() {
			wx.getUserProfile({
				desc: '微信第三方授权',
				success: reswenxin => {
					if (reswenxin.errMsg === 'getUserProfile:ok' && reswenxin.encryptedData) {
						//获取用户信息
						let obj = {
							avatarUrl: reswenxin.userInfo.avatarUrl,
							thirdUserId: this.openid
						};
						//判断是否需要绑定
						uni.$u.http
							.get(`/yt/third/login/${this.code}`)
							.then(res => {
								if (res.token == '' || (res.token == null && res.thirdUserId)) {
									//需要绑定
									let userInfo = {
										isThirdLogin: true, //用于判断是否是第三方登录并且需要绑定账号
										avatar: obj.avatarUrl,
										thirdUserId: res.thirdUserId
									};
									this.setUserInfo(userInfo);
									//设置全局变量openId
									getApp().globalData.openId = res.thirdUserId;
									uni.reLaunch({
										url: '../../pages/personal/personal'
									});
								} else {
									// 不需要绑定,直接第三方登录使用
									let resObj = {
										refreshToken: res.refreshToken,
										isToken: res.token
									};
									let userInfo = {
										...resObj,
										token: true, //token用于判断是否登录
										isThirdLoginAndNoDind: true, //用于判断是否是第三方登录并且不需要绑定账号
										thirdUserId: res.thirdUserId
									};
									//设置全局变量openId
									getApp().globalData.openId = res.thirdUserId;
									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 => {
								if (e?.data?.data === null) {
									uni.$u.toast(e.data?.msg);
								}
							});
					}
				},

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

					return;
				}
			});
		},

		//#endif

		saveUserInfo() {
			//储存个人信息
			uni.$u.http.get('/yt/user/me/info').then(res => {
				if (res) {
					this.setUserInfo(res);
				}
			});
			//储存平台信息
			uni.$u.http.get('/yt/platform/get').then(res => {
				if (res) {
					this.setPlateInfo(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>