<style scoped>
.logo-size {
  width: 14rem;
}
.collapse-icon {
  position: absolute;
  bottom: 0;
  margin-bottom: 1.5em;
  transition: 0.2s linear;
}
.text-black {
  font-family: Poppins;
  color: #000;
  font-weight: bold;
}
.div-auth > a {
  font-family: Poppins;
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
}
.div-auth > a:hover {
  color: #aeaeae;
}
.user-img {
  width: 40px;
  height: 40px;
}
.user-img-icon {
  font-size: 30px;
  color: #000;
}
.icon-size {
  width: 25px;
  height: 25px;
}
.subicon-size {
  width: 12px;
  height: 12px;
}
.bottomright-position {
  z-index: 9999;
  position: fixed;
  bottom: 0;
  right: 0;
  display: flex;
  flex-direction: column;
}
.button-circle {
  width: 4rem;
  height: 4rem;
  background-color: rgba(46, 92, 110, 0.5);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  margin-top: 1rem;
  transition: 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.button-circle-active,
.button-circle:hover {
  background-color: rgba(46, 92, 110, 1);
}
.circle-icon {
  width: 2.5rem;
}
.flex-v-center {
  display: flex;
  align-items: center;
}
.contact-div {
  position: fixed;
  z-index: 9999;
  bottom: 1rem;
  right: 6.2rem;
  background-color: #12a5bc;
  width: 28rem;
  text-align: center;
}
.contact-title {
  color: #fff;
  font-weight: bold;
  font-size: 1.5rem;
}
.contact-context {
  background-color: #fff;
  color: #000;
  font-size: 1rem;
}
@media (max-width: 768px) {
  .modal-dialog {
    margin-top: 80px;
  }
  .logo-size {
    width: 16rem;
  }
}
.wsmenu-list .dropdown-menu {
  background-color: transparent;
  border: 0;
  padding: 0;
}
.wsmenu-list .dropdown-item {
  font-family: Poppins;
  color: #fff;
  padding: 0.5rem 0.5rem 0.5rem 1.6rem;
}
.wsmenu-list .dropdown-item:hover {
  color: #aeaeae;
  background-color: transparent;
}
</style>
<template>
  <header id="header" class="header white-menu navbar-dark" style="/*height: 80px*/"  :class="{'height80px': isAuthenticated}">
    <div class="header-wrapper">
      <div class="wsmobileheader">
        <div class="row w-100 mx-0">
          <div class="col-2">
            <a
              id="wsnavtoggle"
              @click="wsnavtoggleClick"
              class="wsanimated-arrow"
              v-if="!isAuthenticated"
              ><span></span
            ></a>
          </div>
          <div class="col-8 d-flex justify-content-center align-items-center">
            <button class="logo-size" @click="logout" title="回首頁">
              <img src="@images/ida_logo_long.png" alt="回首頁" />
            </button>
            <!-- <a href="/">
              <img src="@images/ida_logo_long.png" class="logo-size" title="回首頁" alt="回首頁" />
            </a> -->
          </div>
          <div class="col-2 ps-0 text-end">
            <div class="text-black mt-2" v-if="!isAuthenticated">
              <a href="/login" class="d-inline-block me-4">
                登入
              </a>
              <a href="/register" class="d-inline-block">
                註冊
              </a>
            </div>

            <!-- User menu -->
            <div class="dropdown flex items-center justify-end space-x-6" v-else>
              <a
                href="#"
                class="d-flex align-items-center text-white text-decoration-none dropdown-toggle"
                id="dropdownUser"
                data-bs-toggle="dropdown"
                aria-expanded="false"
              >
                <i class="bi bi-person-circle user-img-icon"></i>
              </a>
              <ul
                class="dropdown-menu dropdown-menu-dark text-small shadow"
                aria-labelledby="dropdownUser"
              >
                <li><a class="dropdown-item" href="/member/Profile">會員資料</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" @click="logout">登出</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>

      <div class="wsmainfull menu" :class="{'login': isAuthenticated, 'height80px': isAuthenticated}">
        <div class="desktoplogo">
            <button class="d-flex" @click="logout" title="回首頁">
              <img src="@images/ida_logo_long.png" class="logo-size" alt="回首頁" />
            </button>
          <!-- <a href="/" class="d-flex">
            <img src="@images/ida_logo_long.png" class="logo-size" title="回首頁" alt="回首頁" />
          </a> -->
        </div>
        <template v-if="isAuthenticated">
          <ul class="flex items-center flex-shrink-0 space-x-6">
            <!-- User menu -->
            <div class="dropdown" v-if="isAuthenticated">
              <a
                href="#"
                class="d-flex align-items-center text-white text-decoration-none dropdown-toggle"
                id="dropdownUser"
                data-bs-toggle="dropdown"
                aria-expanded="false"
              >
                <i class="bi bi-person-circle user-img-icon"></i>

                <span class="text-black ml-3">{{ name }}</span>
              </a>
              <ul
                class="dropdown-menu dropdown-menu-dark text-small shadow"
                aria-labelledby="dropdownUser"
              >
                <li><a class="dropdown-item" href="/member/Profile">會員資料</a></li>
                <li><hr class="dropdown-divider"></li>
                <li><a class="dropdown-item" @click="logout">登出</a></li>
              </ul>
            </div>
          </ul>
        </template>
      </div>
    </div>
  </header>
</template>
<script>
import { api } from "@/global/axios";
import { isAuthenticated, isAdmin, isParent, isSub, isUser } from "@/global/request";
import { useNavbarState } from "./navState";
export default {
  data() {
    const navbar = useNavbarState();
    return {
      ...navbar,
      isAuthenticated: isAuthenticated(),
      isAdmin: isAdmin(),
      isParent: isParent(),
      isSub: isSub(),
      isUser: isUser(),
      id: this.$store.state.auth.user.id,
      name: this.$store.state.auth.user.name,
    };
  },
  methods: {
    overlapClick() {
      $("body").removeClass("wsactive");
    },
    async logout() {
      await api
        .post(`/auth/logout`)
        .then(() => {
          localStorage.removeItem("user");
          localStorage.removeItem("access_token");
          localStorage.removeItem("APP_USER_TOKEN");
          this.$store.commit("auth/SET_USER", {});
          this.$store.commit("auth/SET_AUTHENTICATED", false);

          const authUri = import.meta.env.VITE_SSO_BASE_URL;
          window.location.href = authUri;
        });
    },
    wsnavtoggleClick() {
      $("body").toggleClass("wsactive");
    },
  },
};
</script>
