import { KeepAlive, Transition } from 'vue'
import { RouterView } from 'vue-router'
import { useKeepAlive } from '@/store/keepAlive'

export default function (name: string) {
  return defineComponent({
    name,
    setup() {
      const { cachedViews } = useKeepAlive()
      return () => (
        <div key={name} style="width: 100%; height: 100%">
          <RouterView>
            {({ Component }) => (
              <Transition name="fade-transform" mode="out-in">
                <KeepAlive include={cachedViews}>
                  <Component />
                </KeepAlive>
              </Transition>
            )}
          </RouterView>
        </div>
      )
    },
  })
}
