<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">Layer</span>
			</div>
			<div class="right">
				<span class="icon" @click="addLayer"><svg-icon name="add" size="14" /></span>
			</div>
		</div>
		<div class="content">
			<VueDraggable
				:model-value="list"
				@start="handleDragStart"
				@end="handleDragEnd"
				class="sortable-layers"
				:data-container-type="'root'"
				:data-parent-id="null"
				:animation="250"
				:disabled="false"
				handle=".drag"
				ghost-class="ghost"
				chosen-class="chosen"
				drag-class="drag"
				:group="{
					name: 'groupName',
					pull: true,
					put: true
				}"
				:swap-threshold="0.5"
				:empty-insert-threshold="5"
				:force-fallback="false"
				:fallback-tolerance="3"
				:scroll-sensitivity="100"
				:scroll-speed="10"
			>
				<layer-item
					v-for="layer in list"
					:key="layer.info.id"
					:layer="layer"
					:draging="draging"
					:class="{ active: layer.info.id === layerManager.activeID.value }"
				/>
			</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 list = computed(() => layerManager.layers.value)
	const handleDragStart = () => {
		draging.value = true
	}
	const handleDragEnd = (event) => {
		draging.value = false
		const { from, to, oldIndex, newIndex, data } = event
		layerManager.dragSort(data.info.id, newIndex)
	}
	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;
			&::-webkit-scrollbar {
				width: 4px;
			}
			&::-webkit-scrollbar-thumb {
				border-radius: 4px;
				background: rgba(0, 0, 0, 0.2);
			}
		}
	}
</style>
