<script setup>
import { onMounted, ref, watch, computed } from "vue";
import { AUTHPAGES } from "@/constant";
import { getAuth, getAllSysSidebar } from "@/apis/building";
import useBuildingStore from "@/stores/useBuildingStore";
import useUserInfoStore from "@/stores/useUserInfoStore";

const store = useUserInfoStore();

const buildingStore = useBuildingStore();

const iniFroList = async () => {
  const res = await getAuth();

  store.updateAuthPage(
    res.data.map((d) =>
      AUTHPAGES.find(({ authCode }) => authCode === d.authCode)
        ? {
            ...d,
            ...AUTHPAGES.find(({ authCode }) => authCode === d.authCode),
          }
        : d
    )
  );
};

const authPages = computed(() =>
  store.auth_page.filter(({ showView }) => showView)
);

const open = ref(false);
const getSubMonitorPage = async (building) => {
  const res = await getAllSysSidebar();
  buildingStore.mainSubSys = res.data.history_Main_Systems;
};

watch(
  () => buildingStore.selectedBuilding,
  (newVal) => {
    if (newVal !== null) {
      getSubMonitorPage(newVal.building_tag);
    }
  }
);

onMounted(() => {
  iniFroList();
});
</script>
<template>
  <ul class="px-1 menu-box my-2">
    <li
      v-for="page in authPages"
      class="flex flex-col items-center justify-center"
    >
      <router-link
        v-if="$route.path !== page.navigate"
        :to="page.navigate"
        type="link"
        class="flex flex-col justify-center items-center btn-group text-white"
      >
        <font-awesome-icon
          :icon="['fas', page.icon]"
          size="2x"
          class="menu-icon"
        />
        {{ page.subName }}
      </router-link>
      <div
        v-else
        class="flex flex-col justify-center items-center btn-group text-white router-link-active cursor-pointer"
      >
        <font-awesome-icon
          :icon="['fas', page.icon]"
          size="2x"
          class="menu-icon"
        />
        {{ page.subName }}
      </div>
    </li>
  </ul>
</template>
<style lang="css" scoped>
.router-link-active {
  color: #7cedc1;
}
</style>
