<script setup>
import { useRoute, useRouter } from "vue-router";
import { getDepartmentList } from "@/apis/asset";
import { onMounted, ref, watch, inject } from "vue";
import useActiveBtn from "@/hooks/useActiveBtn";
import useBuildingStore from "@/stores/useBuildingStore";
const { deptData } = inject("system_selectedDevice");
const storeBuild = useBuildingStore();
// 選部門
const {
  items: sysDeptItems,
  changeActiveBtn: changeDeptActiveBtn,
  setItems: setDeptItems,
  selectedBtn: selectedDeptItems,
} = useActiveBtn("multiple");

watch(
  () => storeBuild.deptList,
  (newValue) => {
    if (newValue) {
      const deptList = newValue.map((d) => ({
        ...d,
        active: true,
      }));
      setDeptItems(deptList);
      deptData.value = deptList.map((d) => d.key);
    }
  },
  {
    deep: true,
    immediate: true,
  }
);

watch(selectedDeptItems, (newVal) => {
  deptData.value = newVal.map((d) => d.key);
});
</script>

<template>
  <div class="flex items-center gap-3">
    <span class="text-md font-extrabold"
      >{{ $t("assetManagement.department") }} :</span
    >
    <ButtonGroup
      :items="sysDeptItems"
      className="btn-xs rounded-md"
      :withLine="true"
      :onclick="
        (e, item) => {
          changeDeptActiveBtn(item);
        }
      "
    />
  </div>
</template>

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