<template>
	<div class="basic-info h">
		<div>
			<div class="title">{{ $t('DepthCanvas.position') }}</div>
			<div class="content">
				<div>
					<depth-input
						before="X"
						type="number"
						v-model="data.left"
						@input="onInpot"
						@change="onChange"
					/>
				</div>
				<div>
					<depth-input
						before="Y"
						type="number"
						v-model="data.top"
						@input="onInpot"
						@change="onChange"
					/>
				</div>
			</div>
			<div class="content">
				<div>
					<depth-input
						before="W"
						type="number"
						v-model="data.width"
						:disabled="whDisabled"
						@input="onInpot"
						@change="onChange"
					/>
				</div>
				<div>
					<depth-input
						before="H"
						type="number"
						v-model="data.height"
						:disabled="whDisabled"
						@input="onInpot"
						@change="onChange"
					/>
				</div>
			</div>
		</div>
		<div>
			<div class="title">{{ $t('DepthCanvas.scale') }}</div>
			<div class="content">
				<div>
					<depth-input
						type="number"
						before="X"
						after="%"
						v-model="data.scaleX"
						@input="onInpot"
						@change="onChange"
					/>
				</div>
				<div>
					<depth-input
						type="number"
						before="Y"
						after="%"
						v-model="data.scaleY"
						@input="onInpot"
						@change="onChange"
					/>
				</div>
			</div>
		</div>
		<div class="select">
			<div class="title">{{ $t('DepthCanvas.blendMode') }}</div>
			<div class="content">
				<depth-select
					v-model="data.globalCompositeOperation"
					:list="layerCompositeOptions"
					@change="onChange"
				/>
			</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'
	import DepthSelect from '../tools/depth-select.vue'
	import { BlendMode } from '../../tools/layerHelper'
	import { useI18n } from 'vue-i18n'
	const { t } = useI18n()
	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 whDisabled = computed(() => ['path', 'line'].includes(props.object.type))

	const data = reactive({
		top: 0,
		left: 0,
		width: 0,
		height: 0,
		scaleX: 1,
		scaleY: 1,
		globalCompositeOperation: BlendMode.NORMAL
	})
	const updateData = async () => {
		await nextTick()
		data.top = Math.round(props.object.top)
		data.left = Math.round(props.object.left)
		data.width = Math.round(props.object.width)
		data.height = Math.round(props.object.height)
		data.scaleX = Math.round(props.object.scaleX * 100)
		data.scaleY = Math.round(props.object.scaleY * 100)
		data.globalCompositeOperation = props.object.globalCompositeOperation
	}
	updateData()
	watch(() => props.object, updateData)

	const onInpot = () => setPriority(false)
	const onChange = () => setPriority(true)
	const setPriority = (isRecord: boolean) => {
		const options = {
			...data,
			scaleX: data.scaleX / 100,
			scaleY: data.scaleY / 100
		}
		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)
	})

	const layerCompositeOptions = ref([
		{
			value: BlendMode.NORMAL,
			label: t('DepthCanvas.compositeNormal'),
			tip: t('DepthCanvas.compositeNormalTip')
		}, // 正常
		{
			value: BlendMode.DARKEN,
			label: t('DepthCanvas.compositeDarken'),
			tip: t('DepthCanvas.compositeDarkenTip')
		}, // 变暗
		{
			value: BlendMode.MULTIPLY,
			label: t('DepthCanvas.compositeMultiply'),
			tip: t('DepthCanvas.compositeMultiplyTip')
		}, // 正片叠底
		{
			value: BlendMode.COLOR_BURN,
			label: t('DepthCanvas.compositeColorBurn'),
			tip: t('DepthCanvas.compositeColorBurnTip')
		}, // 颜色加深

		{
			value: BlendMode.LIGHTEN,
			label: t('DepthCanvas.compositeLighten'),
			tip: t('DepthCanvas.compositeLightenTip')
		}, // 变亮
		{
			value: BlendMode.SCREEN,
			label: t('DepthCanvas.compositeScreen'),
			tip: t('DepthCanvas.compositeScreenTip')
		}, // 滤色
		{
			value: BlendMode.COLOR_DODGE,
			label: t('DepthCanvas.compositeColorDodge'),
			tip: t('DepthCanvas.compositeColorDodgeTip')
		}, // 颜色减淡
		{
			value: BlendMode.LIGHTER,
			label: t('DepthCanvas.compositeLighter'),
			tip: t('DepthCanvas.compositeLighterTip')
		}, // 颜色减淡(添加)

		{
			value: BlendMode.OVERLAY,
			label: t('DepthCanvas.compositeOverlay'),
			tip: t('DepthCanvas.compositeOverlayTip')
		}, // 叠加
		{
			value: BlendMode.SOFT_LIGHT,
			label: t('DepthCanvas.compositeSoftLight'),
			tip: t('DepthCanvas.compositeSoftLightTip')
		}, // 柔光
		{
			value: BlendMode.HARD_LIGHT,
			label: t('DepthCanvas.compositeHardLight'),
			tip: t('DepthCanvas.compositeHardLightTip')
		}, // 强光

		{
			value: BlendMode.DIFFERENCE,
			label: t('DepthCanvas.compositeDifference'),
			tip: t('DepthCanvas.compositeDifferenceTip')
		}, // 差值
		{
			value: BlendMode.EXCLUSION,
			label: t('DepthCanvas.compositeExclusion'),
			tip: t('DepthCanvas.compositeExclusionTip')
		}, // 排除

		{
			value: BlendMode.HUE,
			label: t('DepthCanvas.compositeHue'),
			tip: t('DepthCanvas.compositeHueTip')
		}, // 色相
		{
			value: BlendMode.SATURATION,
			label: t('DepthCanvas.compositeSaturation'),
			tip: t('DepthCanvas.compositeSaturationTip')
		}, // 饱和度
		{
			value: BlendMode.COLOR,
			label: t('DepthCanvas.compositeColor'),
			tip: t('DepthCanvas.compositeColorTip')
		}, // 颜色
		{
			value: BlendMode.LUMINOSITY,
			label: t('DepthCanvas.compositeLuminosity'),
			tip: t('DepthCanvas.compositeLuminosityTip')
		} // 亮度
	])
</script>

<style lang="less" scoped>
	.basic-info {
		--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>
