<template>
	<transition name="fade">
		<div v-if="show" class="brush-control-panel">
			<div class="input-box">
				<div class="label">Size</div>
				<depth-slider
					:is-input="false"
					v-model="brushSize"
					:tip-formatter="(v) => v + 'px'"
					:min="1"
					:max="100"
					@input="onInputSize"
				/>
			</div>
			<div class="input-box" v-if="currentTool === OperationType.DRAW">
				<div class="label">Opacity</div>
				<depth-slider
					:is-input="false"
					v-model="brushOpacity"
					:tip-formatter="(v) => (v * 100).toFixed(0) + '%'"
					:min="0"
					:max="1"
					:step="0.01"
					@input="onInputOpacity"
				/>
			</div>
			<div class="color-box" v-if="currentTool === OperationType.DRAW">
				<input type="color" v-model="brushColor" @input="onInputColor" />
			</div>
		</div>
	</transition>
</template>

<script setup lang="ts">
	import { ref, inject, computed, watch, nextTick } from 'vue'
	import depthSlider from './tools/depth-slider.vue'
	import { OperationType } from '../tools/layerHelper'
	const props = defineProps({
		currentTool: { required: true, type: [String, null] }
	})
	const stateManager = inject('stateManager') as any
	const brushState = computed(() => stateManager.brushManager.brushStore.state)
	const showTools = [
		OperationType.DRAW,
		OperationType.ERASER,
		OperationType.AISELECT_DRAW,
		OperationType.AISELECT_ERASER
	]
	const show = computed(() => showTools.includes(props.currentTool))
	const brushSize = ref(40)
	const brushOpacity = ref(100)
	const brushColor = ref('#000000')
	const updateBrushState = async () => {
		await nextTick()
		brushSize.value = stateManager.brushManager.brushStore.state.size
		brushOpacity.value = stateManager.brushManager.brushStore.state.opacity
		brushColor.value = stateManager.brushManager.brushStore.state.color
	}
	updateBrushState()
	watch(() => brushState.value.size, updateBrushState)
	watch(() => brushState.value.opacity, updateBrushState)
	watch(() => brushState.value.color, updateBrushState)
	watch(() => props.currentTool, updateBrushState)

	const onInputSize = (value: number) => {
		stateManager.brushManager.setBrushSize(value)
	}
	const onInputOpacity = (value: number) => {
		stateManager.brushManager.setBrushOpacity(value)
	}
	const onInputColor = () => {
		stateManager.brushManager.setBrushColor(brushColor.value)
	}
</script>
<style lang="less" scoped>
	// 淡入淡出动画
	.fade-enter-active,
	.fade-leave-active {
		transition: opacity 0.3s;
	}
	.fade-enter-from,
	.fade-leave-to {
		opacity: 0;
	}

	.brush-control-panel {
		position: absolute;
		top: 8.8rem;
		left: 50%;
		transform: translateX(-50%);
		height: 4.1rem;
		padding: 0 2rem;
		border: 0.2rem solid #ebebeb;
		background: #ffffff;
		border-radius: 1.1rem;
		box-shadow: 0 1.66rem 2.33rem 0 rgba(0, 0, 0, 0.05);

		display: flex;
		align-items: center;
		justify-content: center;
		user-select: none;
		gap: 1.5rem;
		> .input-box {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 1rem;
			> .label {
				font-size: 1.4rem;
				color: #000;
			}
			> .depth-slider {
				width: 8.4rem;
			}
		}
		> .color-box {
			> input {
				width: 4.7rem;
				height: 2.5rem;
				border-radius: 0.4rem;
				padding: 0 0.4rem;
			}
		}
	}
</style>
