<template>
	<div class="cool">
		<component v-for="item in list" :key="item.name" :is="item.component" />
	</div>
</template>

<script setup lang="ts">
import { isFunction, orderBy } from 'lodash-es';
import { markRaw, onMounted, shallowRef } from 'vue';
import { module } from '/@/cool';

const list = shallowRef<any[]>([]);

async function refresh() {
	const arr = orderBy(
		module.list.filter(e => e.enable !== false && !!e.index).map(e => e.index),
		'order'
	);

	list.value = await Promise.all(
		arr
			.filter(e => e?.component)
			.map(async e => {
				if (e) {
					const c = await (isFunction(e.component) ? e.component() : e.component);

					return {
						...e,
						component: markRaw(c.default || c)
					};
				}
			})
	);
}

onMounted(() => {
	refresh();
});
</script>
