<template>
	<div class="details-panel">
		<div class="header" @click="show = !show">
			<span class="icon"><svg-icon name="dc-details_edit" size="17" /></span>
			<span class="title">{{ $t('DepthCanvas.editDetails') }}</span>
			<span class="arrow" :class="{ show }">
				<svg-icon name="dc-down_arrow2" size="10" />
			</span>
		</div>
		<div class="content mini-scrollbar" v-if="isShow" v-show="show">
			<basic-info :object="activeObject" />
			<fill-repeat :object="activeObject" v-if="isRepeat" />
			<shape-setting :object="activeObject" v-if="isShape && !isRepeat" />
		</div>
	</div>
</template>

<script setup lang="ts">
	import { ref, inject, computed, watch, onMounted } from 'vue'
	import BasicInfo from './basic-info.vue'
	import FillRepeat from './fill-repeat.vue'
	import ShapeSetting from './shape-setting.vue'
	const props = defineProps({})
	const layerManager = inject('layerManager') as any
	const canvasManager = inject('canvasManager') as any
	const show = ref(true)
	const activeID = computed(() => layerManager.activeID.value)
	const layers = computed(() => layerManager.layers.value)
	const activeObject = ref(null)

	const shapes = ['rect', 'path', 'triangle', 'polygon', 'ellipse']
	const isImage = computed(() => activeObject.value?.type === 'image')
	const isShape = computed(() => shapes.includes(activeObject.value?.type))
	const isRepeat = computed(() => activeObject.value?.fill?.repeat === 'repeat')
	const isShow = computed(() => isImage.value || isRepeat.value || isShape.value)

	const updateActiveObject = () => {
		const layer = layerManager.getActiveLayer()
		activeObject.value = layer ? JSON.parse(JSON.stringify(layer)) : null
	}
	watch(layers, () => updateActiveObject())
	watch(activeID, () => updateActiveObject())
	onMounted(() => {
		updateActiveObject()
	})
</script>

<style lang="less" scoped>
	.details-panel {
		position: absolute;
		top: 2.2rem;
		right: 3rem;
		width: 28.8rem;
		max-height: 90%;
		display: flex;
		flex-direction: column;
		gap: 1.6rem;
		> div {
			border: 0.2rem solid #ebebeb;
			background: #ffffff;
			border-radius: 0.9rem;
			box-shadow: 0 1.66rem 2.33rem 0 rgba(0, 0, 0, 0.05);
		}
		> .header {
			flex-shrink: 0;
			cursor: pointer;
			width: 100%;
			height: 5rem;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 0.8rem;
			padding: 0 1.6rem;
			> .title {
				flex: 1;
				font-family: Semibold;
				font-size: 1.6rem;
				color: #000;
			}
			> .arrow {
				transition: transform 0.2s;
				transform: rotate(-90deg);
				&.show {
					transform: rotate(0);
				}
			}
		}
		> .content {
			padding: 1.6rem;
			overflow: hidden;
			overflow-y: auto;
			> * {
				margin-bottom: 1.6rem;
				&:last-child {
					margin-bottom: 0;
				}
			}
			&:deep(> div) {
				> div {
					margin-bottom: var(--details-item-margin-bottom, 1.6rem);
					&:last-child {
						margin-bottom: 0;
					}
				}
				&.h > div {
					> .title {
						font-size: 1.4rem;
						color: #000;
						margin-bottom: 1.6rem;
					}
					> .content {
						width: 100%;
						height: auto;
						padding: 0 1.4rem;
						margin-bottom: 1.6rem;
						&:last-child {
							margin-bottom: 0;
						}
					}
				}
				&.v > div {
					display: flex;
					align-items: center;
					justify-content: center;
					> .label {
						min-width: 6rem;
						margin-right: 0.8rem;
						font-size: 1.2rem;
						text-align: right;
					}
					> .value {
						flex: 1;
					}
				}
			}
		}
	}
</style>
