<script setup>
import {colors} from "@/lib/theme.js"
import {inject} from "vue";

const Tea = inject("$Tea")
const utils = inject("$utils")

const currentTheme =  window.X_VIEW_DATA ? window.X_VIEW_DATA.teaTheme : null

const changeTheme = (color, e) => {
	let target = e.target
	if (target.className.indexOf("inner-span") >= 0) {
		target = target.parentNode
	}
	target.style.border = '2px var(--p-' + color + '-500) solid'

	Tea.action("/ui/theme")
		.post()
		.params({theme: color})
		.success(function (resp) {
			utils.successToast("界面风格已切换", null, () => {
				utils.reload()
			})
		})
}
</script>

<template>
	<div class="grid grid-cols-4 gap-2">
		<span class="color-span cursor-pointer" v-for="color in colors" :title="color" @click="changeTheme(color, $event)" :style="{border: (currentTheme == color) ? '2px var(--p-' + color + '-500) solid' : '2px white solid'}">
			<span class="inner-span inline-block" :style="'background-color: var(--p-' + color + '-500)'"></span>
		</span>
	</div>
</template>

<style scoped lang="postcss">
.color-span {
	border-radius: 50%;
	width: 2em;
	height: 2em;
	padding-top: 0.145em;
	padding-left: 0.145em;
}

.inner-span {
	width: 1.4em;
	height: 1.4em;
	border-radius: 50%;
}
</style>