63 lines
1.6 KiB
Vue
63 lines
1.6 KiB
Vue
<script setup>
|
||
import { onMounted,watch } from "vue";
|
||
import useBuildingStore from "@/stores/useBuildingStore";
|
||
import { useRouter } from "vue-router";
|
||
|
||
const store = useBuildingStore();
|
||
const router = useRouter();
|
||
const selectBuilding = (bui) => {
|
||
store.selectedBuilding = bui; // 改變 selectedBuilding，watch 會自動更新資料
|
||
};
|
||
|
||
onMounted(() => {
|
||
store.initialize(); // 初始化資料
|
||
});
|
||
|
||
watch(
|
||
() => store.selectedBuilding,
|
||
(newValue) => {
|
||
console.log('Selected building changed:', newValue);
|
||
|
||
if (newValue.is_headquarter == true) {
|
||
router.replace({ path: "/headquarters" });
|
||
} else {
|
||
router.replace({ path: "/dashboard" });
|
||
}
|
||
}
|
||
);
|
||
</script>
|
||
|
||
<template>
|
||
<template v-if="store.buildings.length > 1">
|
||
<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 w-48 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 cursor-pointer"
|
||
v-for="bui in store.buildings"
|
||
:key="bui.building_tag"
|
||
@click="selectBuilding(bui)"
|
||
>
|
||
{{ bui.full_name }}
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</template>
|
||
<template v-else>
|
||
<div class="text-white ml-8 text-lg font-semiLight">
|
||
{{ store.selectedBuilding?.full_name }}
|
||
</div>
|
||
</template>
|
||
</template>
|
||
<style lang="scss" scoped></style>
|