<template>
	<div>
		<a-tooltip>
			<template #title>
				{{ option.name }}
			</template>
			<a-tag
				class="setting-drawer-theme-color-color-block"
				:color="option.color"
				style="margin-right: 2px"
				@click="changeColor(option.color)"
			>
				<template #icon>
					<icon-font v-if="checked" type="icon-checked" />
					<icon-font v-else type="icon-blank"></icon-font>
				</template>
			</a-tag>
		</a-tooltip>
	</div>
</template>
<script lang="ts" setup>
	import { apply } from '@/hooks/useTheme'
	import { useAppStore } from '@/stores/app'
	const props = withDefaults(
		defineProps<{
			option: {
				key: string
				name: string
				color: string
				checked?: boolean
			}
		}>(),
		{},
	)
	const { option } = toRefs(props)

	const checked = computed(() => {
		return useAppStore().theme.primaryColor === option.value.color
	})

	const changeColor = (color: string) => {
		apply(color)
	}
</script>
<style scoped>
	.setting-drawer-theme-color-color-block {
		float: left;
		width: 23px;
		height: 23px;
		padding-right: 0;
		padding-left: 0;
		margin-right: 0;
		font-weight: 700;
		color: #fff;
		text-align: center;
		cursor: pointer;
		border-radius: 2px;
	}

	.anticon {
		font-size: 16px;
	}
</style>
