<script setup>
import ButtonGroup from "@/components/customUI/ButtonGroup.vue";
import CheckWeigherTable from "./components/CheckWeigherSettingTable.vue";
import InventorySetting from "./components/InventorySettingTable.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: "CheckWeigherTable",
      active: true,
      component: CheckWeigherTable,
    },
    {
      title: "原醋庫存設定",
      key: "InventorySetting",
      active: false,
      component: InventorySetting,
    }
  ]);
});

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>
