<script setup>
import { getAssetMainList, getAssetSubList } from "@/apis/asset";
import { computed, onMounted, ref, watch,inject } from "vue";
import useSearchParam from "@/hooks/useSearchParam";
import useActiveBtn from "@/hooks/useActiveBtn";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const { searchParams, changeParams } = useSearchParam();
const { search } = inject("operation_table");
// 選大類
const {
  items: sysMainTagItems,
  changeActiveBtn: changeMainSysActiveBtn,
  setItems: setMainSysItems,
  selectedBtn: selectedMainSysItems,
} = useActiveBtn();
// 選小類
const {
  items: sysTagItems,
  changeActiveBtn: changeSysActiveBtn,
  setItems: setSysItems,
  selectedBtn: selectedSysItems,
} = useActiveBtn("multiple");

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,
  }));
  setMainSysItems(cate);
};

const getSubSystems = async (id) => {
  const res = await getAssetSubList(id);
  const sub = res.data.map((d, index) => ({
    ...d,
    title: d.system_key,
    key: d.system_value,
    active: searchParams.value?.sub_system_tag
      ? parseInt(searchParams.value?.sub_system_tag) === d.system_value
      : index === 0,
  }));
  setSysItems(sub);
};

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

watch(selectedMainSysItems, (newValue) => {
  changeParams({
    ...searchParams.value,
    mainSys_id: newValue.key,
    sub_system_tag: null,
  });
  getSubSystems(newValue.key);
});

watch(selectedSysItems, (newValue) => {
  changeParams({
    ...searchParams.value,
    sub_system_tag: newValue.map((d) => d.key),
  });
});

watch(
  searchParams,
  (newValue, oldValue) => {
    if (
      newValue.work_type &&
      oldValue.work_type &&
      newValue.work_type !== oldValue.work_type
    ) {
      changeParams({
        ...searchParams.value,
        sub_system_tag: sysTagItems.value.map((item) => item.key)[0],
      });
      search();
    }
  },
  {
    deep: true,
  }
);
</script>

<template>
  <div>
    <div class="flex items-center gap-4 my-4">
      <h2 class="text-lg font-bold ps-2 whitespace-nowrap">
        {{ $t("history.system_category") }} :
      </h2>
      <ButtonGroup
        :items="sysMainTagItems"
        :withLine="true"
        :onclick="
          (e, item) => {
            changeMainSysActiveBtn(item);
          }
        "
      />
    </div>
    <div class="flex items-center gap-4 my-4">
      <h2 class="text-lg font-bold ps-2 whitespace-nowrap">
        {{ $t("history.device_category") }} :
      </h2>
      <ButtonGroup
        :items="sysTagItems"
        :withLine="true"
        :onclick="
          (e, item) => {
            changeSysActiveBtn(item);
          }
        "
      />
    </div>
  </div>
</template>

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