<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([
    {
      title: "All",
      key: "all",
      active: route.query.gas === "all" || !route.query.gas,
    },
    ...newValue.selectedSystem.points.map(d => ({
      title: d.full_name,
      key: d.points,
      active: route.query.gas === d.points,
    }))
  ])
}, {
  deep: true,
  immediate: true
})


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

watch(selectedBtn, (newValue) => {
  console.log(newValue)
  newValue && changeParams({ ...searchParams.value, gas: newValue.key })
}, {
  deep: true,
  immediate: true,

})

</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>