import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
import { useRouter, useRoute } from "vue-router";
import { onBeforeMount } from "vue";

export function useDetail({ path, title }) {
  const route = useRoute();
  const router = useRouter();
  const id = route.query?.id ?? -1;

  function toDetail(id: number | string | string[] | number[]) {
    useMultiTagsStoreHook().handleTags("push", {
      path,
      parentPath: route.matched[0].path,
      name: "TabDetail",
      query: { id: String(id) },
      meta: {
        title,
        showLink: false,
        dynamicLevel: 3
      }
    });

    router.push({ path, query: { id: String(id) } });
  }

  function initToDetail() {
    onBeforeMount(() => {
      if (id) toDetail(id);
    });
  }

  return { toDetail, initToDetail, id, router };
}
