import { computed, Ref, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useAppStore } from "../../store/app";

export function useTab() {

  const route = useRoute();
  const router = useRouter();
  const routes = router.getRoutes()
  const currentPath = computed(() => route.path);
  const appStore = useAppStore();

  const tabs: Ref<any> = ref([]);
  const tabsCache: string[] = []
  console.log(route)
  if (routes) {
    routes.forEach(route => {
      if (route.meta && route.meta.affix) {
        tabs.value.push({
          ...route.meta,
          id: route.path,
          name: route?.name
        })
        tabsCache.push(route.path)
      }
    })
  }

  if (route.path && !tabsCache.includes(route.path)) {
    const path = routes.find(item => item.path === route.path)
    path && tabs.value.push({
      ...path.meta,
      id: route.path,
      name: route?.name,
    })
  }

  const to = (id: string) => {
    router.push(id);
  };

  const close = (id: string) => {
    tabs.value = tabs.value.filter((ele: any) => ele.id != id);
  };

  const closeAll = () => {
    tabs.value = tabs.value.filter((ele: any) => ele.closable == false);
    to(tabs.value[0].id);
  };

  const closeCurrent = () => {
    tabs.value = tabs.value.filter((ele: any) => ele.id != currentPath.value);
    to(tabs.value[0].id);
  }

  const closeOther = () => {
    tabs.value = tabs.value.filter(
      (ele: any) => ele.closable == false || ele.id == currentPath.value
    );
  };

  watch(route, () => {
    let bool = false;
    tabs.value.forEach((tab: any) => {
      if (tab.id === route.path) {
        bool = true;
      }
    });
    console.log(tabs.value);
    if (!bool) {
      tabs.value.push({ id: route.path, title: route.meta.title, name: route?.name });
    }
    appStore.$patch((state) => {
      state.keepAliveList = tabs.value.map((item: any) => item?.name).filter((item: any) => item)
    })
  });

  return {
    to,
    close,
    closeAll,
    closeOther,
    closeCurrent,
    tabs,
    currentPath,
  };
}
