<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;
};
const showDrawer = () => {
  getSubMonitorPage();
  open.value = true;
};
const onClose = () => {
  open.value = false;
};

const navigateToSub = (sub) => {
  // console.log("navigateToSub", sub);
  // let pageAct = JSON.parse(sessionStorage.getItem("pageAct"));
  // pageAct = {
  //   ...pageAct,
  //   sysMainTag: sub.main_system_tag,
  //   sysSubTag: sub.sub_system_tag,
  //   sysSubName: sub.full_name,
  // };
  // sessionStorage.setItem("lastPage", "systemMonitor");
  // sessionStorage.setItem("pageAct", JSON.stringify(pageAct));
  // window.location.href = "/file/index.html";
};

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

onMounted(() => {
  iniFroList();
});
</script>
<template>
  <ul class="px-1 menu-box my-2">
    <li class="flex flex-col items-center justify-center">
      <router-link
        :to="{ name: 'dashboard' }"
        class="flex flex-col justify-center items-center btn-group text-white"
      >
        <font-awesome-icon
          :icon="['fas', 'home']"
          size="2x"
          class="menu-icon"
        />
        首頁
      </router-link>
    </li>
    <li
      v-for="page in authPages"
      class="flex flex-col items-center justify-center"
    >
      <a
        v-if="page.authCode === 'PF1'"
        @click="showDrawer"
        class="flex flex-col justify-center items-center btn-group text-white cursor-pointer"
      >
        <font-awesome-icon
          :icon="['fas', page.icon]"
          size="2x"
          class="menu-icon"
        />
        {{ page.subName }}
      </a>
      <router-link
        v-else
        :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>
    </li>
  </ul>
  <a-drawer
    :width="200"
    placement="left"
    :open="open"
    :closable="false"
    @close="onClose"
    class="sub-drawer"
    :maskStyle="{ opacity: 0.5 }"
    :bodyStyle="{ paddingLeft: 0, paddingRight: 0 }"
  >
    <ul>
      <li
        v-for="sub in buildingStore.subSys"
        :key="sub.sub_system_tag"
        @click.prevent="() => navigateToSub(sub)"
        class="text-xl text-center py-3 hover:bg-black hover:text-info"
      >
        {{ sub.full_name }}
      </li>
    </ul>
  </a-drawer>
</template>
<style lang="css" scoped>
.router-link-active.router-link-exact-active {
  color: #93c0dc;
}
</style>
