<template>
	<!-- 颜色调色板 -->
	<div class="color-palette">
		<p class="label">{{ $t('FlowCanvas.mode') }}</p>
		<my-select v-model="data.mode" :list="modeList" />
		<p class="label">{{ $t('FlowCanvas.chooseColor') }}</p>
		<div class="color-list">
			<div
				class="color-item"
				v-for="(v, i) in data.colors"
				:key="i"
				:style="{ background: v }"
			>
				<span class="del" @click="delColor(i)">
					<svg-icon name="close-white" size="7" size-unit="px" />
				</span>
			</div>
			<div class="add" @click="addColor" v-if="data.colors.length < maxColor">
				<svg-icon name="add" size="12" size-unit="px" color="#fff" />
				<input type="color" ref="colorInput" @change="changeColor" />
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { reactive, onMounted, ref } from 'vue'
	import { useI18n } from 'vue-i18n'
	const { t } = useI18n()
	const data = reactive({
		colors: [],
		mode: 'Advanced',
	})
	const emit = defineEmits(['update-data'])
	const maxColor = 5
	const delColor = (i: number) => {
		data.colors.splice(i, 1)
	}
	const colorInput = ref<HTMLInputElement>()
	// 添加颜色
	const addColor = () => {
		if (data.colors.length >= maxColor) return
		colorInput.value?.click()
	}
	const changeColor = (e: Event) => {
		const target = e.target as HTMLInputElement
		data.colors.push(target.value)
	}
	const modeList = ref([
		{ value: 'Advanced', label: t('FlowCanvas.advancedMode') },
		{ value: 'Normal', label: t('FlowCanvas.normalMode') }
	])
	const getApiData = ()=>{
		return {
			variantCount: '4',
			colors: data.colors,
			mode: data.mode,
		}
	}

	onMounted(()=>{
	})

	defineExpose({ data, getApiData })
</script>

<style lang="less" scoped>
	.color-palette {
		min-height: 140px;
		> .color-list {
			display: flex;
			flex-wrap: wrap;
			gap: 5px;
			> div {
				width: 35px;
				height: 35px;
				position: relative;
				&:hover {
					> .del {
						display: flex;
					}
				}
				> .del {
					display: none;
					position: absolute;
					width: 15px;
					height: 15px;
					top: -5px;
					right: -5px;
					background-color: #000;
					border-radius: 50%;
					align-items: center;
					justify-content: center;
					cursor: pointer;
				}
			}
			> .add {
				border: 1px solid rgba(0, 0, 0, 0.1);
				background-color: rgba(0, 0, 0, 0.1);
				position: relative;
				> input {
					position: absolute;
					width: 0;
					height: 0;
					border: none;
					padding: 0;
					top: 0;
					left: 0;
				}
			}
		}
	}
</style>
