<script setup>
import { getBuildings } from "@/apis/building";
import { onMounted, ref } from "vue";
import useBuildingStore from "@/stores/useBuildingStore";

const store = useBuildingStore();

const getBui = async () => {
  console.log(store.buildings);
  const res = await getBuildings();
  store.buildings = res.data;
  store.selectedBuilding = res?.data[0];
};

const selectBuilding = (bui) => {
  store.selectedBuilding = bui;
};

onMounted(() => {
  getBui();
});
</script>

<template>
  <div class="dropdown dropdown-bottom ">
    <div
      tabindex="0"
      role="button"
      class="text-white ml-8 text-lg font-semiLight"
    >
      {{ store.selectedBuilding?.full_name }}
      <font-awesome-icon :icon="['fas', 'angle-down']" class="ml-1" />
    </div>
    <ul
      tabindex="0"
      class="dropdown-content left-8 translate-y-2 z-[1] menu py-3 shadow rounded bg-[#4c625e] border text-center"
    >
      <li
        class="text-white my-1 text-base"
        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>
