<template>
  <div class="login-page page">
    <div class="flex-column justify-center align-center content">
      <div class="login-wrap pd30">
        <div
          :class="{
            'login-title text-ct mb40': true,
            'user-login': !isAdminPage,
          }"
        >
          LOGIN
        </div>
        <div class="input-group mb20">
          <label for="id" class="login-label">아이디</label>
          <input
            type="text"
            name=""
            id="id"
            class="full-input login-input"
            placeholder="아이디를 입력하세요"
            v-model="member['lgnId']"
          />
        </div>
        <div class="input-group mb20">
          <label for="pw" class="login-label">비밀번호</label>
          <input
            type="password"
            name=""
            id="pw"
            class="full-input login-input"
            placeholder="비밀번호를 입력하세요"
            v-model="member['pswd']"
            @keyup.enter="fnLogin"
          />
        </div>
        <div
          class="find-zone flex justify-end align-center mb40"
          v-if="!isAdminPage"
        >
          <p class="pl10 pr10 cursor" @click="moveSearchId">아이디찾기</p>
          <p class="pl10 pr0 cursor" @click="moveResetPswd">비밀번호 초기화</p>
        </div>
        <button
          class="large-btn green-btn point-font fw-bold"
          v-if="!isAdminPage"
          @click="fnLogin"
        >
          로그인
        </button>
        <button
          class="large-btn darkg-btn point-font2 fw-bold"
          v-else
          @click="fnLogin"
        >
          로그인
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { useStore } from "vuex";
import store from "../AppStore";
import { loginProc } from "../../../resources/api/login";
import queryParams from "../../../resources/js/queryParams";

export default {
  mixins: [queryParams],
  data: () => {
    return {
      member: {
        lgnId: null,
        pswd: null,
      },
      store: useStore(),
      isAdminPage: false,
    };
  },
  methods: {
    checkAdminPage() {
      if (
        this.restoreRedirect("redirect") &&
        this.restoreRedirect("redirect").includes("/adm/")
      ) {
        this.isAdminPage = true;
      } else {
        this.isAdminPage = false;
      }
    },
    async fnLogin() {
      try {
        const res = await loginProc(this.member);
        if (res.status == 200) {
          store.commit("setAuthorization", res.headers.authorization);
          // store.commit("setRefresh", res.headers.refresh);
          /** jwt토큰 복호화 **/
          const base64String = store.state.authorization.split(".")[1];
          const base64 = base64String.replace(/-/g, "+").replace(/_/g, "/");
          const jsonPayload = decodeURIComponent(
            atob(base64)
              .split("")
              .map((c) => {
                return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
              })
              .join("")
          );
          const mbr = JSON.parse(jsonPayload);
          //const mbr = JSON.parse(decodeURIComponent(escape(window.atob(base64String)))); // jwt claim 추출
          store.commit("setMbrId", mbr.mbrId);
          store.commit("setMbrNm", mbr.mbrNm);
          store.commit("setRoles", mbr.roles);
          /** jwt토큰 복호화 **/
          const url = this.restoreRedirect("redirect");
          if (url != null && url != "") {
            if (
              url == "/searchId.page" ||
              url == "/resetPswd.page"
            ) {
              this.$router.push({ path: "/government/main.page" });
            } else {
              this.$router.push({ path: url });
            }
          } else {
            this.$router.push({ path: "/" });
          }
        }
      } catch (error) {
        alert(error.response.data.message);
      }
    },
    moveSearchId() {
      this.$router.push({
        path: "/resetPswd.page",
        query: {
          tab: "id",
        },
      });
    },
    moveResetPswd() {
      this.$router.push({
        path: "/resetPswd.page",
        query: {
          tab: "pw",
        },
      });
    },
  },
  watch: {},
  computed: {},
  components: {},
  created() {
    this.checkAdminPage();
  },
  mounted() {},
};
</script>
