import { computed, defineComponent, unref, Transition, KeepAlive, toRaw } from 'vue';

import { appStore } from '/@/store/modules/app';

import { useTransition } from './useTransition';

import { RouterView, RouteLocation } from 'vue-router';
import { tabStore } from '/@/store/modules/tab';

// import { useRouter } from 'vue-router';
export default defineComponent({
  name: 'PageLayout',
  setup() {
    // const { currentRoute } = useRouter();
    const getProjectConfigRef = computed(() => {
      return appStore.getProjectConfig;
    });
    const { openPageLoading } = unref(getProjectConfigRef);

    let on = {};
    if (openPageLoading) {
      const { on: transitionOn } = useTransition();
      on = transitionOn;
    }
    return () => {
      const {
        routerTransition,
        openRouterTransition,
        openKeepAlive,
        multiTabsSetting: { show, max },
      } = unref(getProjectConfigRef);

      const openCache = openKeepAlive && show;
      const cacheTabs = toRaw(tabStore.getKeepAliveTabsState) as string[];
      return [
        <RouterView>
          {{
            default: ({ Component, route }: { Component: any; route: RouteLocation }) => {
              const Content = openCache ? (
                <KeepAlive max={max} include={cacheTabs}>
                  <Component {...route.params} />
                </KeepAlive>
              ) : (
                <Component {...route.params} />
              );
              return openRouterTransition ? (
                <Transition
                  {...on}
                  name={route.meta.transitionName || routerTransition}
                  mode="out-in"
                >
                  {() => Content}
                </Transition>
              ) : (
                Content
              );
            },
          }}
        </RouterView>,
      ];
    };
  },
});