<template>
	<private-view title="Meili Sync">
		<template #title-outer:prepend>
			<v-icon name="feature_search" />
		</template>

		<template #navigation>
			<v-list nav :model-value="selected" dense>
				<v-list-item to="/meilisearch" exact>
					索引配置
				</v-list-item>
				<v-list-item to="/meilisearch/config">
					MeiliSearch 配置
				</v-list-item>
			</v-list>
		</template>

		<section>
			<v-notice type="info">请选择希望被 MeiliSearch 索引的集合。</v-notice>
			<v-table :headers="headers" :items="collections" :items-per-page="10" class="mt-4">
				<template #item.enabled="{ item }">
					<v-checkbox v-model="item.enabled" :label="item.enabled ? '已启用' : '未启用'" />
				</template>"
			</v-table>
		</section>

	</private-view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useApi } from '@directus/extensions-sdk';

const api = useApi();
const collections = ref([]);
const headers = [
	{ text: '集合名称', value: 'collection' },
	{ text: '说明', value: 'note' },
	{ text: '启用索引', value: 'enabled' },
];

// const fetchConfigs = async () => {
// 	const resp = await api.get('/items/meili_index_configs', { params: { limit: -1 } });
// 	configs.value = resp.data.data;
// }

const fetchCollections = async () => {
	const resp = await api.get('/meilisearch/collections');
	collections.value = resp.data.map((col: any) => ({
		...col,
		enabled: false,
	}));
};

const selected = ref(null);

onMounted(() => {
	fetchCollections();
	// fetchConfigs();
})

</script>

<style scoped>
section {
	padding: 0 var(--content-padding);
}
</style>