<script setup>
import { onMounted } from "vue";
import useBuildingStore from "@/stores/useBuildingStore";

const store = useBuildingStore();

const selectBuilding = (bui) => {
  store.selectedBuilding = bui; // 改變 selectedBuilding，watch 會自動更新資料
  localStorage.setItem("EmpowerBuilding", JSON.stringify(bui));
};

onMounted(() => {
  store.initialize(); // 初始化資料
});
</script>

<template>
  <div class="dropdown dropdown-bottom ">
    <div
      tabindex="0"
      role="button"
      class="text-white text-lg font-semiLight btn w-full"
    >
      {{ store.selectedBuilding?.full_name }}
      <font-awesome-icon :icon="['fas', 'angle-down']" class="ml-1" />
    </div>
    <ul
      tabindex="0"
      class="dropdown-content min-w-48 w-full  z-[1] menu py-3 shadow rounded bg-[#4c625e] border text-center"
    >
      <li
        class="text-white my-1 text-base cursor-pointer"
        v-for="bui in store.buildings"
        :key="bui.building_tag"
        @click="selectBuilding(bui)"
      >
        {{ bui.full_name }}
      </li>
    </ul>
  </div>
</template>

<style lang="scss" scoped></style>