<template>
  <div class="login-wrapper" :style="loginStyle">
    <AppLogin :on-success="handleSuccess" />
  </div>
</template>

<script>
import { mapState } from "vuex";
import { triggerHookSync } from "@mega-apps/utils";
import Router from "vue-router";
import { staticRoutes } from "@/plugins/generateRouter";
import loginBg from "@/assets/images/login-bg.png";
import mixin from "@/components/AppLogin/mixin";
import { getToken } from "@/utils/auth";
import AppLogin from "@/components/AppLogin";

export default {
  name: "Login",
  components: {
    AppLogin,
  },
  mixins: [mixin],
  layout: "none",
  data() {
    return {};
  },
  computed: {
    ...mapState({
      systemConfig: (state) => state.app.systemConfig,
      user: (state) => state.auth.user?.user || {},
      languages: (state) => state.app.languages,
    }),
    loginStyle() {
      const { FILE_SERVER, LOGIN_BACKGROUND } = this.systemConfig || {};
      const backgroundImage =
        FILE_SERVER && LOGIN_BACKGROUND
          ? FILE_SERVER + LOGIN_BACKGROUND
          : loginBg;
      return {
        backgroundImage: `url(${backgroundImage})`,
      };
    },
  },
  created() {
    this.isLogin();
  },
  methods: {
    isLogin() {
      if (
        this.$auth.getToken("local") &&
        this.$auth.getToken("local") !== "false"
      ) {
        this.$auth.fetchUser().then(() => {
          if (this.$route.query.boundUrl) {
            window.location.href = `${
              this.$route.query.boundUrl
            }?token=${this.$auth.getToken("local")}`;
          } else {
            this.$router.push("/");
          }
        });
      } else {
        this.clear();
      }
    },
    handleSuccess() {
      this.handleLogin().then(() => {
        if (this.$route.query.boundUrl) {
          const [, queryStr] =
            this.$route.fullPath.match(/#?\/login\/?\?([\s\S]+)/) || [];
          const query = {};
          (queryStr.split("&") || []).forEach((item) => {
            const [key = "", value = ""] = item.split("=") || [];
            query[key] = decodeURIComponent(value);
          });
          window.location.href = `${query.boundUrl}?token=${getToken()}`;
        } else {
          triggerHookSync("login:success", [this.$router]);
        }
      });
    },
    // 清 store 中的数据
    clear() {
      // 清空store中的菜单数据
      this.$store.dispatch("account/getUserMenuInfo");
      // 清空store中的系统编码规则
      this.$store.commit("app/SET_SYSTEM_CODE_RULE", {});
      // 清空store中的国际化
      this.$store.commit("app/SET_I18N_READY", false);
      // 清空tabsView数据
      this.$store.dispatch("tagsView/delAllViews");
      // 清空路由
      this.$router.matcher = new Router({
        ...this.$router.options,
        routes: staticRoutes,
      }).matcher;
      this.$store.commit("account/SET_TENANT_ID", undefined);
    },
  },
};
</script>

<style lang="less" scoped>
@import (optional, once) "../theme/index.less";

.login-wrapper {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}
</style>
