<script setup>
import { getAssetMainList } from "@/apis/asset";
import { ref, onMounted, watch, inject } from "vue";
import useSearchParam from "@/hooks/useSearchParam";
import useActiveBtn from "@/hooks/useActiveBtn";

const { searchParams, changeParams } = useSearchParam();
const { items, changeActiveBtn, setItems, selectedBtn } = useActiveBtn();
const { openToast, cancelToastOpen } = inject("app_toast");
const getMainSystems = async () => {
  const res = await getAssetMainList();
  const cate = res.data.map((d, index) => ({
    ...d,
    title: d.system_key,
    key: d.id,
    active: searchParams.value?.mainSys_id
      ? parseInt(searchParams.value?.mainSys_id) === d.id
      : index === 0,
  }));
  setItems(cate);
};

onMounted(() => {
  getMainSystems();
});

watch(selectedBtn, (newValue) => {
  changeParams({
    ...searchParams.value,
    mainSys_id: newValue.key,
    subSys_id: null,
  });
});
</script>

<template>
  <div class="flex items-center gap-4 mb-4">
    <h2 class="text-lg font-bold ps-2 whitespace-nowrap">
      {{ $t("history.system_category") }} :
    </h2>
    <ButtonConnectedGroup
      :items="items"
      :onclick="
        (e, item) => {
          changeActiveBtn(item);
        }
      "
      :className="`flex w-full mt-2`"
      size="sm"
      color="info"
    >
      <template #buttonContent="{ item }">
        <span class="text-base">{{ item.title }}</span>
      </template>
    </ButtonConnectedGroup>
  </div>
</template>

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