<template>
	<div class="shape-setting h">
		<div>
			<div class="title">{{ $t('DepthCanvas.appearance') }}</div>
			<div class="content">
				<div>
					<span class="label">{{ $t('DepthCanvas.opacity') }}</span>
					<depth-input
						type="number"
						after="%"
						min="0"
						max="100"
						step="1"
						v-model="data.opacity"
						@input="onInpot"
						@change="onChange"
					/>
				</div>
				<div v-if="object.type === 'rect'">
					<span class="label">{{ $t('DepthCanvas.cornerRadius') }}</span>
					<depth-input
						type="number"
						v-model="data.radius"
						min="0"
						step="1"
						@input="onInpot"
						@change="onChange"
					/>
				</div>
				<div v-else-if="object.type === 'path'">
					<span class="label">{{ $t('DepthCanvas.strokeWidth') }}</span>
					<depth-input
						type="number"
						v-model="data.strokeWidth"
						min="0"
						step="1"
						@input="onInpot"
						@change="onChange"
					/>
				</div>
				<div v-else></div>
			</div>
			<div class="content">
				<div>
					<span class="label">{{ $t('DepthCanvas.color') }}</span>
					<depth-input
						v-if="object.type === 'path'"
						type="color"
						v-model="data.stroke"
						after="%"
						@input="onInpot"
						@change="onChange"
					/>
					<depth-input
						v-else
						type="color"
						v-model="data.fill"
						after="%"
						@input="onInpot"
						@change="onChange"
					/>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { ref, inject, computed, nextTick, onBeforeUnmount, reactive, watch } from 'vue'
	import DepthInput from '../tools/depth-input.vue'
	const objectManager = inject('objectManager') as any
	const stateManager = inject('stateManager') as any
	const props = defineProps({
		object: {
			type: Object,
			default: () => ({})
		}
	})
	const id = computed(() => props.object.info.id)

	const data = reactive({
		opacity: 100,
		radius: 0,

		fill: '',
		stroke: '',
		strokeWidth: 0
	})
	const updateData = async () => {
		await nextTick()
		data.opacity = Math.round(props.object.opacity * 100)
		data.radius = Math.round(props.object.rx)
		data.fill = props.object.fill
		data.stroke = props.object.stroke
		data.strokeWidth = props.object.strokeWidth
	}
	updateData()
	watch(() => props.object, updateData)

	const onInpot = () => setPriority(false)
	const onChange = () => setPriority(true)
	const setPriority = (isRecord: boolean) => {
		const options = {
			...data,
			opacity: data.opacity / 100
		}
		if (props.object.type === 'rect') {
			options['rx'] = data.radius
			options['ry'] = data.radius
		}
		if (props.object.type !== 'path') {
			delete options.stroke
			delete options.strokeWidth
		}
		delete options.radius
		objectManager.updateProperty(id.value, options, isRecord)
	}

	stateManager.event.add('canvas:undo', updateData)
	stateManager.event.add('canvas:redo', updateData)
	onBeforeUnmount(() => {
		stateManager.event.remove('canvas:undo', updateData)
		stateManager.event.remove('canvas:redo', updateData)
	})
</script>

<style lang="less" scoped>
	.shape-setting {
		--details-item-margin-bottom: 1.6rem;
		> div {
			> .content {
				display: flex;
				align-items: center;
				justify-content: center;
				> div {
					flex: 1;
					margin-right: 3rem;
					display: flex;
					flex-direction: column;
					--depth-input-height: 2.4rem;
					// --depth-input-bg-color: rgba(249, 249, 250, 1);
					// --depth-input-border-color: rgba(230, 230, 231, 1);
					// --depth-input-decorate-color: rgba(69, 71, 84, 0.1);
					&:last-child {
						margin-right: 0;
					}
					> .label {
						font-size: 1.2rem;
						margin-bottom: 0.5rem;
					}
				}
			}
		}
	}
</style>
