<script setup>
import ButtonGroup from "@/components/customUI/ButtonGroup.vue";
import Account from "./components/Account.vue";
import Role from "./components/Role.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: "account",
      active: true,
      component: Account,
    },
    {
      title: "角色管理",
      key: "role",
      active: false,
      component: Role,
    },
  ]);
});

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>
