empower_front/src/components/navbar/Navbar.vue

<script setup>
import { onMounted, ref, watch, computed } from "vue";
import { AUTHPAGES } from "@/constant";
import NavbarItem from "./NavbarItem.vue";
import NavbarBuilding from "./NavbarBuilding.vue";
import AlarmDrawer from "@/components/alarm/AlarmDrawer.vue";
import NavbarLang from "./NavbarLang.vue";
import NavbarUser from "./NavbarUser.vue";
import { getAuth, getAllSysSidebar } from "@/apis/building"; // 引入 API
import { getSideBar } from "@/apis/energy";
import useBuildingStore from "@/stores/useBuildingStore";
import useUserInfoStore from "@/stores/useUserInfoStore";
import { useI18n } from "vue-i18n";
import { useRoute } from "vue-router";
import { twMerge } from "tailwind-merge";

const { locale } = useI18n();
const store = useUserInfoStore();
const buildingStore = useBuildingStore();
const route = useRoute();

const authPages = ref([]); // 儲存從 API 獲取的 authPages
const menu_array = ref([]);
const isDrawerOpen = ref(false);

const iniFroList = async () => {
  try {
    const res = await getAuth(locale.value);
    store.updateAuthPage(
      res.data.map((d) =>
        AUTHPAGES.find(({ authCode }) => authCode === d.authCode)
          ? {
              ...d,
              ...AUTHPAGES.find(({ authCode }) => authCode === d.authCode),
            }
          : d
      )
    );
    authPages.value = store.auth_page.filter(({ showView }) => showView); //過濾後資料給authPages
  } catch (error) {
    console.error("Error fetching auth data:", error);
  }
};

const getSubMonitorPage = async (building_guid) => {
  const res = await getAllSysSidebar(building_guid);
  buildingStore.mainSubSys = res.data.history_Main_Systems;
  menu_array.value = res.data.history_Main_Systems;
};

const getSubPage = async (system_type) => {
  const res = await getSideBar(system_type);
  menu_array.value = res.data;
};

// 關閉抽屜的方法
const closeDrawer = () => {
  isDrawerOpen.value = false;
};

onMounted(() => {
  iniFroList(); // 在組件掛載時呼叫 API
});

watch(locale, () => {
  iniFroList();
});
</script>

<template>
  <header class="navbar w-full relative z-50 p-0">
    <input
      id="nav-drawer"
      type="checkbox"
      class="drawer-toggle"
      v-model="isDrawerOpen"
    />
    <!-- Navbar -->
    <div class="navbar bg-base-300 w-full justify-between">
      <div class="flex-none lg:hidden">
        <label
          for="nav-drawer"
          aria-label="open sidebar"
          class="btn-sm btn-ghost p-0"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            class="inline-block h-6 w-6 stroke-current"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M4 6h16M4 12h16M4 18h16"
            ></path>
          </svg>
        </label>
      </div>
      <div class="mx-2 flex-none px-2">
        <router-link
          to="/dashboard"
          class="lg:pl-2 lg:text-2xl font-bold text-white flex items-center"
        >
          <img src="/logo.svg" alt="logo" class="w-6 lg:w-8 me-1" />
          新創賦能
        </router-link>
        <NavbarBuilding class="hidden lg:block ms-8" />
      </div>
      <div class="hidden flex-1 lg:block">
        <NavbarItem
          :authPages="authPages"
          :menu_array="menu_array"
          @show-drawer="getSubMonitorPage"
          @getSubPage="getSubPage"
          @close-drawer="closeDrawer"
        />
      </div>
      <ul class="left-menu flex-none">
        <li>
          <NavbarLang />
        </li>
        <!-- <li>
          <AlarmDrawer />
        </li> -->
        <li>
          <NavbarUser />
        </li>
      </ul>
    </div>

    <div class="drawer-side">
      <label
        for="nav-drawer"
        aria-label="close sidebar"
        class="drawer-overlay"
      ></label>

      <div class="menu bg-base-200 min-h-full w-80 p-4">
        <NavbarBuilding />
        <hr class="my-5 opacity-50" />
        <NavbarItem
          :authPages="authPages"
          :menu_array="menu_array"
          @show-drawer="getSubMonitorPage"
          @getSubPage="getSubPage"
          @close-drawer="closeDrawer"
        />
      </div>
    </div>
  </header>
</template>

<style lang="css">
.sub-drawer {
  @apply bg-dark bg-opacity-90 shadow-xl !important;
}

.left-menu > li {
  @apply relative lg:pl-8 pl-4;
}

.left-menu > li:not(:last-child)::after {
  @apply hidden lg:block absolute top-4 -right-7 w-6 h-0.5 bg-[#93c0dc] z-0;
  content: "";
}
</style>