<template>
	<div class="shape-setting v">
		<!-- <div>
			<div class="label">填充颜色</div>
			<div class="value">
				<el-color-picker
					v-model="data.fill"
					show-alpha
					:predefine="['transparent', '#000', '#f00', '#0f0', '#00f']"
					@change="onChange"
				/>
			</div>
		</div> -->
	</div>
</template>

<script setup lang="ts">
	import { ref, inject, computed, nextTick, onBeforeUnmount, reactive } from 'vue'
	import { ElColorPicker } from 'element-plus'
	import { getTransformScaleAngle } from '../../manager/ObjectManager'
	import DepthOffsetTool from '../tools/depth-offset-tool.vue'
	import DepthSlider from '../tools/depth-slider.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({
		fill: '',
		stroke: '',
		strokeWidth: 0
	})
	const updateData = async () => {
		await nextTick()
		data.fill = props.object.fill
		data.stroke = props.object.stroke
		data.strokeWidth = props.object.strokeWidth
	}
	updateData()

	const onInpot = () => setPriority(false)
	const onChange = () => setPriority(true)
	const setPriority = (isRecord: boolean) => {
		const options = { ...data }
		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: 1rem;
		> div {
		}
	}
</style>
