<template>
	<div class="layer-list">
		<div class="header">
			<div class="left">
				<span class="icon"><svg-icon name="dc-layer" size="16" /></span>
				<span class="title">{{ $t('DepthCanvas.layer') }}</span>
			</div>
			<div class="right">
				<span class="icon" @click="addLayer"><svg-icon name="add" size="14" /></span>
			</div>
		</div>
		<div class="content mini-scrollbar">
			<VueDraggable
				:model-value="list"
				@start="(e) => handleDragStart(e)"
				@end="(e) => handleDragEnd(e)"
				@add="(e) => handleAdd(e)"
				class="sortable-layers"
				v-bind="config"
				:group="{
					name: 'group',
					pull: true,
					put: true
				}"
			>
				<layer-item
					v-for="layer in list"
					:key="layer.info.id"
					:layer="layer"
					:draging="draging"
					:class="{ active: layer.info.id === layerManager.activeID.value }"
					:is-group="layer.type === 'group'"
				>
					<VueDraggable
						v-if="layer.type === 'group'"
						v-show="layer.info.showChildren"
						:model-value="layer.children"
						@start="(e) => handleDragStart(e, layer)"
						@end="(e) => handleDragEnd(e, layer)"
						@add="(e) => handleAdd(e, layer)"
						class="sortable-layers-child"
						v-bind="config"
						:group="{
							name: 'child_' + layer.info.id,
							pull: true,
							put: true
						}"
					>
						<layer-item
							v-for="child in layer.children"
							:key="child.info.id"
							:layer="child"
							:draging="draging"
							:class="{
								active: child.info.id === layerManager.activeID.value
							}"
						/>
					</VueDraggable>
				</layer-item>
			</VueDraggable>
		</div>
	</div>
</template>

<script setup lang="ts">
	import { VueDraggable } from 'vue-draggable-plus'
	import { ref, inject, computed } from 'vue'
	import layerItem from './layer-item.vue'
	const draging = ref(false)
	const layerManager = inject('layerManager') as any
	const canvasManager = inject('canvasManager') as any
	const stateManager = inject('stateManager') as any
	const list = computed(() => layerManager.layers.value)
	const config = ref({
		'data-container-type': 'root',
		'data-parent-id': 'null',
		animation: 250,
		disabled: false,
		handle: '.drag',
		'ghost-class': 'ghost',
		'chosen-class': 'chosen',
		'drag-class': 'drag',
		'swap-threshold': 0.5,
		'empty-insert-threshold': 5,
		'force-fallback': false,
		'fallback-tolerance': 3,
		'scroll-sensitivity': 100,
		'scroll-speed': 10
	})
	const startParent = ref(null)
	const clearData = () => {
		startParent.value = null
	}
	const handleDragStart = (event, parent?) => {
		draging.value = true
		startParent.value = parent
	}
	const moveElementInPlace = (arr, oldIndex, newIndex) => {
		if (oldIndex === newIndex) return arr
		const movedItem = arr[oldIndex]
		// 移除元素
		arr.splice(oldIndex, 1)
		// 插入到新位置
		arr.splice(newIndex, 0, movedItem)
		return arr
	}
	const handleDragEnd = (event, parent?) => {
		draging.value = false
		const { from, to, oldIndex, newIndex, data } = event
		if (from !== to) return
		const arr = parent ? parent.children : layerManager.layers.value
		moveElementInPlace(arr, oldIndex, newIndex)
		clearData()
		layerManager.sortLayers(true)
	}
	const handleAdd = async (event, parent?) => {
		const { from, to, oldIndex, newIndex, data } = event
		if (data.type === 'group') return
		console.log('跨级拖动', startParent.value, oldIndex, parent, newIndex)
		const oldArr = startParent.value ? startParent.value.children : layerManager.layers.value
		const arr = parent ? parent.children : layerManager.layers.value
		const layer = oldArr.splice(oldIndex, 1)[0]
		if (parent) {
			layer.info.parentId = parent.info.id
		} else {
			delete layer.info.parentId
		}
		arr.splice(newIndex, 0, layer)
		clearData()
		layerManager.sortLayers(false)
		await layerManager.updateLayerThumbnailsById(layer.info.id)
		stateManager.recordState()
	}
	const addLayer = () => {
		layerManager.createEmptyLayer(true, true)
	}
</script>

<style lang="less" scoped>
	.layer-list {
		flex: 1;
		width: 36.7rem;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		> .header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 5.4rem;
			padding: 0 2rem;
			flex-shrink: 0;
			border-bottom: 0.1rem solid #c9c9c9;
			> div {
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 0.8rem;
			}
			> .left {
				> .title {
					font-family: Semibold;
					font-size: 1.6rem;
					color: #000;
				}
			}
			> .right {
				> .icon {
					cursor: pointer;
					width: 2rem;
					height: 2rem;
				}
			}
		}
		> .content {
			flex: 1;
			overflow-y: auto;
			min-height: 20rem;
		}
	}
	.sortable-layers-child {
		border-left: 2.5rem solid #e8e8e8;
		border-bottom: 0.2rem solid #ededed;
		// min-height: 5rem;
		&:last-child {
			border-bottom: none;
		}
	}
</style>
