<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">
          <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"
              width="18"
              height="15"
              :name="showPassword ? '/static/eye.png' : '/static/eye-hide.png'"
            ></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>

          <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: false,

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

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

    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>