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

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

onMounted(() => {
  setItems([
    {
      title: "未確認",
      key: "unacked",
      active: true,
    },
    {
      title: "已確認",
      key: "acked",
      active: false,
    },
  ]);
});

watch(
  selectedBtn,
  (newValue) => {
    changeParams({ ...searchParams.value });
  },
);

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

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

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