<script setup>
import useActiveBtn from "@/hooks/useActiveBtn"
import { inject, watch } from "vue";
import useBuildingStore from "@/stores/useBuildingStore"

const { updateDataByGas } = inject("system_deviceList")
const buildingStore = useBuildingStore()
const { items, changeActiveBtn, setItems, selectedBtn } = useActiveBtn();

watch(() => buildingStore, (newValue) => {
  newValue.selectedSystem?.points?.length > 0 && setItems(newValue.selectedSystem.points.map(d => ({
    title: d.full_name,
    key: d.points,
    active: false,
  })))
}, {
  deep: true,
})

const onClick = (item) => {
  changeActiveBtn(item)
  updateDataByGas(item.key)
}

</script>

<template>
  <template v-if="items.length > 0">
    <ButtonGroup :items="items" :withLine="false" className="btn-xs rounded-md" :onclick="(e, item) => onClick(item)" />

  </template>
</template>

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