<script setup>
import useActiveBtn from "@/hooks/useActiveBtn";
import { onMounted, watch } from "vue";
import useSearchParam from "@/hooks/useSearchParam";

const { searchParams, changeParams } = useSearchParam();

const { items, changeActiveBtn, setItems, selectedBtn } = useActiveBtn();

onMounted(() => {
  setItems([
    {
      title: "未復歸",
      key: 1,
      active: true,
    },
    {
      title: "已賦歸",
      key: 2,
      active: false,
    },
  ]);

});

// 監聽按鈕變化
watch(
  selectedBtn,
  (newValue) => {
    changeParams({ ...searchParams.value, isRecovery: newValue.key });
  }
);

// 監聽搜尋變化
watch(
  searchParams,
  (newSearchParams) => {
    if (!newSearchParams.isRecovery) {
      changeParams({ ...newSearchParams, isRecovery: 1 });
    }
  },
  { immediate: true } // 確保在初始化立即觸發
);
</script>

<template>
  <ButtonGroup
    :items="items"
    :withLine="true"
    class="mr-5"
    :onclick="(e, item) => changeActiveBtn(item)"
  />
</template>

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