<script setup>
import ButtonGroup from "@/components/customUI/ButtonGroup.vue";
import AlertQuery from "./components/AlertQuery/AlertQuery.vue";
import AlertSetting from "./components/AlertSetting/AlertSetting.vue";
import { computed, onMounted, ref, provide, onBeforeMount } from "vue";
import useActiveBtn from "@/hooks/useActiveBtn";

const changeComponent = (e, item) => {
  changeActiveBtn(item);
};

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

onBeforeMount(() => {
  setItems([
    {
      title: "告警記錄查詢",
      key: "Query",
      active: true,
      component: AlertQuery,
    },
    {
      title: "告警設定",
      key: "Setting",
      active: false,
      component: AlertSetting,
    },
  ]);
});

const activeTab = computed(() => {
  return items.value.find(({ active }) => active);
});
</script>

<template>
  <h1 class="text-2xl font-extrabold mb-2">即時告警</h1>
  <ButtonGroup
    :items="items"
    :withLine="true"
    class="mb-6"
    :onclick="changeComponent"
  />
  <component :is="activeTab.component"></component>
</template>

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