import { computed, ref } from "vue";
import { useRoute } from "vue-router";

interface Config {
  baseName?: string;
  collapseLen?: number;
}

export function useDetail(config: Config = {}) {
  const { query } = useRoute();
  const { collapseLen, baseName } = config;

  const collapses = ref<string[]>([]);
  const id = computed(() => query.id as string | undefined);

  const title = computed(() =>
    isDetail.value ? `${baseName}详情` : `创建${baseName}`
  );

  const isDetail = computed(() => {
    return !!id.value;
  });

  if (collapseLen) collapses.value = createCollapses(collapseLen);

  function createCollapses(len: number) {
    return Array(len)
      .fill(0)
      .map((_, index) => String(index + 1));
  }

  return {
    id,
    title,
    isDetail,
    collapses
  };
}
