<template>
	<view class="login-page" style="background-size: 100% 100%; min-height: 100vh" :style="{
      backgroundImage:
        'url(' +
        (mpOwnConfig.bg !== undefined ? mpOwnConfig.bg : `${defaultLogo}`) +
        ')',
    }">
		<!-- 公共组件-每个页面必须引入 -->
		<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">欢迎来到{{
            mpOwnConfig.name !== undefined ? mpOwnConfig.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: "",
				mpOwnConfig: {},
				defaultLogo: "/static/login.png",
			};
		},
		onLoad() {
			//#ifdef MP-WEIXIN
			wx.login({
				success: (res) => {
					if (res.code) {
						this.code = res.code;
						//这里获取openid
					} else {
						return;
					}
				},
			});
			//#endif
		},
		computed: {
			...mapState(["plateInfo"]),
		},
		mounted() {
			this.getPlateForm();
		},
		onShow() {
			this.getPlateForm();
		},
		methods: {
			//获取平台定制信息
			getPlateForm() {
				uni.$u.http.get("/yt/app_design/get").then((res) => {
					if (res) {
						this.mpOwnConfig = {
							bg: res.background,
							logo: res.logo,
							name: res.name,
						};
					}
				});
			},
			...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?login=true");
				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，字数过长，会造成手机上显示不完全，官方bug，采用uni.showModal
					uni.showModal({
						title: "提示",
						content: "密码格式不正确（至少一个大写英文字母、至少一个小写英文字母、至少一位数字、至少一个特殊字符、最少八个字符）~",
						showCancel: false,
					});
					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();
									uni.reLaunch({
										url: "/pages/personal/personal",
									});
									await this.getAlarmTotalData();
								});
						}
					})

					.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>