<template>
	<view class="login-page" :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 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>
					<!-- #ifdef MP-WEIXIN -->
					<button class="link-image" @tap="handleWenxinAuthorization">
						<image class="image" src="../../static/weixin.png" mode="aspectFill"></image>
					</button>
					<!-- #endif -->
					<!-- #ifdef APP-PLUS -->
					<button class="link-image" @click="handleAppPlusAuthorization">
						<image class="image" src="../../static/weixin.png" mode="aspectFill"></image>
					</button>
					<!-- #endif -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapActions,
		mapState
	} from "vuex";
	import api from '@/api'

	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: {
			//获取平台定制信息
			async getPlateForm() {
				const res = await api.loginApi.getPlateCustomApi()
				if (res) {
					this.mpOwnConfig = {
						bg: res.background,
						logo: res.logo,
						name: res.name,
					};
				}
			},
			...mapMutations(["setUserInfo", "setPlateInfo"]),
			...mapActions(["updateBadgeTotal"]),
			//微信授权登录
			//#ifdef MP-WEIXIN
			handleWenxinAuthorization() {
				wx.getUserProfile({
					desc: "微信第三方授权",
					success: async (reswenxin) => {
						if (
							reswenxin.errMsg === "getUserProfile:ok" &&
							reswenxin.encryptedData
						) {
							//获取用户信息
							let obj = {
								avatarUrl: reswenxin.userInfo.avatarUrl,
								thirdUserId: this.openid,
							};
							const res = await api.loginApi.getThirdLoginApi(this.code)
							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",
										});
									});
							}
						}
					},
					fail: (res) => {
						//拒绝授权
						return;
					},
				});
			},
			//#endif
			//#ifdef APP-PLUS
			handleAppPlusAuthorization() {
				console.log('TODO');
			},
			//#endif
			async saveUserInfo() {
				const userInfoRes = await api.loginApi.setUserInfoApi()
				const plateInfoRes = await api.loginApi.setPlateInfoApi()
				if (userInfoRes) {
					this.setUserInfo(userInfoRes);
				}
				if (plateInfoRes) {
					this.setPlateInfo(plateInfoRes);
				}
			},
			async getAlarmTotalData() {
				const res = await api.loginApi.getAlarmTotalApi()
				if (res) {
					this.updateBadgeTotal(res.totalAlarm?.activedAlarm);
				}
			},
			async 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.showModal({
						title: "提示",
						content: "密码格式不正确（至少一个大写英文字母、至少一个小写英文字母、至少一位数字、至少一个特殊字符、最少八个字符）~",
						showCancel: false,
					});
					return;
				}
				const res = await api.loginApi.postLoginApi(this.loginForm)
				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) => {
							await this.saveUserInfo();
							await this.getAlarmTotalData();
							uni.reLaunch({
								url: "/pages/personal/personal",
							});
						});
				}
			},
			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>