<template>
	<a-drawer v-model:open="open" title="主题切换" placement="right">
		<a-space v-if="!loading" direction="vertical">
			<theme-item
				v-for="theme in themes"
				:key="theme.id"
				:theme="theme"
				:selected="currentTheme?.key === theme.key"
			></theme-item>
		</a-space>
		<a-spin v-else size="large" />
	</a-drawer>
</template>
<script lang="ts" setup>
	import ThemeItem from './theme-item.vue'

	const open = ref<boolean>(false)

	const showDrawer = () => {
		open.value = true
	}
	defineExpose({ showDrawer })
	const currentTheme = ref<{ id: number; key: string; name: string; image: string }>()
	const themes = ref<{ id: number; key: string; name: string; image: string }[]>([])
	const loading = ref(true)
</script>
