<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";
import { useI18n } from "vue-i18n";
const { locale } = useI18n();
const store = useUserInfoStore();

const buildingStore = useBuildingStore();

const iniFroList = async () => {
  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
    )
  );
};

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) => {
  // buildingStore.selectedSystem = sub;
  onClose()
  // 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);
    }
  }
);

watch(locale, () => {
  iniFroList();
});

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=" w-10 m-auto"
        />
        {{ $t("home") }}
      </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="w-10 m-auto"
        />
        {{ 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=" w-10 m-auto"
        />
        {{ 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"
        class="group text-xl text-center py-3 hover:bg-black" @click="() => navigateToSub(sub)">


        <router-link
          :to="{ name: 'sub_system', params: { main_system_id: sub.main_system_tag, sub_system_id: sub.sub_system_tag }, }"
          type="link" class="group-hover:text-info">

          {{ sub.full_name }}
        </router-link>

      </li>
    </ul>
  </a-drawer>
</template>
<style lang="css" scoped>
.router-link-active.router-link-exact-active {
  color: #93c0dc;
}
</style>
