<script setup>
import { ref, watch, computed } from "vue";
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 emit = defineEmits(["show-drawer", "getSubPage", "close-drawer"]);
const openKeys = ref([]); // 追蹤當前打開的子菜單
const currentAuthCode = ref("");

// 使用 defineProps 接收 authPages
const props = defineProps({
  authPages: {
    type: Array,
    required: true, // 確保父組件傳遞 authPages
  },
  menu_array: {
    type: Array,
    required: true, // 确保父组件传递 menu_array
  },
});

const open = ref(false);
const showDrawer = async (authCode) => {
  if (authCode === "PF1") {
    emit("show-drawer", buildingStore.selectedBuilding.building_guid); // 使用 emit 呼叫父組件的函数
  } else if (authCode === "PF11") {
    emit("getSubPage", "Setting");
  }
  currentAuthCode.value = authCode;
  open.value = true;
};

const closeDrawer = () => {
  emit("close-drawer"); // 觸發 close-drawer 事件
};

const onClose = () => {
  open.value = false;
};

const handleOpenChange = (keys) => {
  if (keys.length > 0) {
    openKeys.value = [keys[keys.length - 1]]; // 只保留最後一個打開的子菜單
  } else {
    openKeys.value = [];
  }
};
</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 lg:flex-col justify-center items-center btn-group text-white"
        @click="closeDrawer"
      >
        <font-awesome-icon
          :icon="['fas', 'home']"
          class="text-lg lg:text-2xl"
        />
        <span class="text-xs lg:text-sm">{{ $t("home") }}</span>
      </router-link>
    </li>
    <li
      v-for="page in props.authPages"
      class="flex flex-col items-center justify-center"
      :key="page.authCode"
    >
      <a
        v-if="page.authCode === 'PF1' || page.authCode === 'PF11'"
        @click="showDrawer(page.authCode)"
        :class="
          twMerge(
            'flex lg:flex-col justify-center items-center btn-group text-white cursor-pointer',
            page.authCode === 'PF1' && route.fullPath.includes('/system')
              ? 'router-link-active router-link-exact-active'
              : '',
            page.authCode === 'PF11' && route.fullPath.includes('/setting')
              ? 'router-link-active router-link-exact-active'
              : ''
          )
        "
      >
        <font-awesome-icon
          :icon="['fas', page.icon]"
          class="text-lg lg:text-2xl"
        />
        <span class="text-xs lg:text-sm">{{ page.subName }}</span>
      </a>
      <router-link
        v-else
        :to="page.navigate"
        type="link"
        class="flex lg:flex-col justify-center items-center btn-group text-white"
        @click="closeDrawer"
      >
        <font-awesome-icon
          :icon="['fas', page.icon]"
          class="text-lg lg:text-2xl"
        />
        <span class="text-xs lg:text-sm">{{ page.subName }}</span>
      </router-link>
    </li>
  </ul>
  <a-drawer
    :width="320"
    placement="left"
    :open="open"
    :closable="false"
    @close="onClose"
    class="sub-drawer"
    :maskStyle="{ opacity: 0 }"
    :bodyStyle="{ paddingLeft: 0, paddingRight: 0 }"
  >
    <a-menu
      mode="inline"
      theme="dark"
      class="text-lg bg-transparent"
      :openKeys="openKeys"
      @openChange="handleOpenChange"
    >
      <a-sub-menu
        v-for="main in menu_array"
        :key="main.main_system_tag"
        :title="main.full_name"
        v-if="menu_array.length > 0 && open"
      >
        <a-menu-item
          v-for="sub in currentAuthCode === 'PF1'
            ? main.history_Sub_systems
            : main.sub"
          :key="sub.sub_system_tag + `_` + sub.type"
          @click="
            () => {
              onClose();
              closeDrawer();
            }
          "
        >
          <router-link
            :to="{
              name: currentAuthCode === 'PF11' ? 'setting' : 'sub_system',
              params: {
                main_system_id: main.main_system_tag,
                sub_system_id: sub.sub_system_tag,
                ...(currentAuthCode === 'PF11'
                  ? { type: sub.type }
                  : { floor_id: 'main' }),
              },
            }"
          >
            {{ sub.full_name }}
          </router-link>
        </a-menu-item>
      </a-sub-menu>
    </a-menu>
  </a-drawer>
</template>
<style lang="scss" scoped>
/**menu**/
.menu-box {
  @apply flex flex-wrap lg:flex-row flex-col items-start lg:justify-center relative z-0 h-full w-60 lg:w-auto;
}

.menu-box .btn-group {
  @apply bg-transparent lg:w-[95px] w-full;
}

.menu-box .btn-group span {
  @apply text-lg lg:text-sm ms-2 lg:ms-0;
}

.menu-box > li {
  @apply relative;
}

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

.router-link-active.router-link-exact-active {
  @apply text-[#93c0dc];
}

:deep(.ant-menu-submenu-selected) {
  .ant-menu-submenu-title {
    @apply text-info;
  }
}

:deep(.ant-menu-item-selected) {
  @apply bg-transparent relative;

  &::before {
    @apply absolute w-[15px] h-[15px] bottom-3.5 left-7 bg-no-repeat saturate-200 z-10;
    content: "";
    background: url(@ASSET/img/chart-data-background03.svg) center center;
  }

  &:active {
    background-color: transparent !important;
  }

  a {
    color: #35ecec !important;
    text-shadow: 0px 0px 1px #fff;
  }
}
</style>
