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

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

watch(() => buildingStore, (newValue) => {
  newValue.selectedSystem?.points?.length > 0 && setItems(newValue.selectedSystem.points.map(d => ({
    title: d.full_name,
    key: d.points,
    active: route.query.gas ? route.query.gas === d.points : d.points === "Temp",
  })))
}, {
  deep: true,
  immediate: true
})


const { changeParams } = useSearchParam();
const onClick = (item) => {
  changeParams({ gas: item.key })
  changeActiveBtn(item)
  updateDataByGas(item.key)
}

</script>

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

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