<script setup>
import { onMounted, ref, inject } from "vue";
import NavbarItem from "./NavbarItem.vue";
import NavbarBuilding from "./NavbarBuilding.vue";
import useUserInfoStore from "@/stores/useUserInfoStore";
import AlarmDrawer from "@/components/alarm/AlarmDrawer.vue";

const user = ref("");
const { forgeLock, toggleForgeLock } = inject("app_toggle");
const store = useUserInfoStore();
onMounted(() => {
  const name = store.user.user_name;
  if (name) {
    user.value = name;
  }
});

</script>

<template>
  <header class="navbar bg-dark text-success py-2 w-full relative z-50">
    <div class="navbar-start">
      <div class="dropdown">
        <div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="h-5 w-5"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M4 6h16M4 12h8m-8 6h16"
            />
          </svg>
        </div>
        <ul
          class="menu menu-sm dropdown-content mt-3 z-[1] p-2 shadow bg-base-100 rounded-box w-52"
        >
          <NavbarItem />
        </ul>
      </div>
      <div class="rounded-lg pl-14 text-2xl flex items-center text-stone-100">
        <img src="/logo.png" alt="logo" class="w-12 me-2" />百家珍
      </div>
      <NavbarBuilding class="hidden" />
    </div>

    <div class="navbar-center hidden lg:flex">
      <NavbarItem />
    </div>
    <div class="navbar-end mr-4">
      <ul class="menu-box">
        <li>
          <button
            class="drawer-button flex flex-col justify-center items-center btn-group"
            @click="toggleForgeLock"
          >
            <font-awesome-icon
              v-if="forgeLock"
              :icon="['fas', 'lock']"
              size="2x"
              class="text-white menu-icon"
            />
            <font-awesome-icon
              v-else
              :icon="['fas', 'lock-open']"
              size="2x"
              class="text-white menu-icon"
            />
            <span class="text-white">
              模型{{ forgeLock ? "鎖定" : "解鎖" }}</span
            >
          </button>
        </li>
        <li>
          <AlarmDrawer />
        </li>
        <li>
          <div class="dropdown dropdown-bottom dropdown-end">
            <button
              tabindex="0"
              type="link"
              class="flex flex-col justify-center items-center btn-group"
            >
              <font-awesome-icon
                :icon="['fas', 'user-circle']"
                size="2x"
                class="text-white menu-icon"
              />
              <span class="text-white"> {{ user || "webUser" }}</span>
            </button>
            <ul
              tabindex="0"
                            class="dropdown-content translate-y-2 z-[100] menu py-3 shadow rounded w-32 bg-[#4c625e] border text-center"
            >
              <li class="text-white">
                <a
                  href="/logout"
                  class="flex flex-col justify-center items-center"
                  >登出</a>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </header>
</template>

<style lang="css">
.sub-drawer {
  @apply bg-dark bg-opacity-80 shadow-xl !important;
}
/**menu**/
.menu-box {
  @apply flex justify-center;
  position: relative;
  z-index: 0;
}

.menu-box::after {
  content: "";
  position: absolute;
  top: -12px;
  bottom: 0;
  left: 25px;
  right: 25px;
  margin: auto;
  display: block;
  width: calc(100% - 50px);
  height: 2px;
  background-color: #7cedc1;
  z-index: -10;
}

.menu-box .btn-group {
  background: #111;
  padding: 0 5px;
  margin: 0 15px;
}

.menu-icon {
  width: 40px;
  margin: auto;
}

.menu-box .btn-group span {
  color: #fff;
  display: block;
  margin-top: 0px;
}
</style>
