<template>
	<div class="layer-item">
		<div class="item" @click="onClickLayer">
			<div class="drag"><svg-icon name="dc-drag" size="18" /></div>
			<div class="thumb mosaic-bg">
				<img v-if="layer.thumbnail" :src="layer.thumbnail" />
			</div>
			<div class="name">
				<div @dblclick="onClickEditName" v-if="!editName" :title="layer.info.name">
					{{ layer.info.name || '未命名图层' }}
				</div>
				<input
					v-else
					type="text"
					ref="nameInputRef"
					:value="layer.info.name"
					@blur="onChangeName"
					@keyup.enter="onChangeName"
					@keydown.stop
				/>
			</div>
			<div class="icons">
				<span @click.stop="onClickLock">
					<svg-icon v-show="!layer.info.lock" name="dc-lock_0" size="15" />
					<svg-icon v-show="layer.info.lock" name="dc-lock_1" size="15" color="#1890ff" />
				</span>
				<span @click.stop="onClickShowHide"
					><svg-icon :name="layer.visible ? 'dc-show' : 'dc-hide'" size="15"
				/></span>
				<span @click.stop="onClickDelete"><svg-icon name="dc-delete" size="13" /></span>
				<span
					v-if="isGroup"
					@click.stop="onShowGroup"
					class="show-group"
					:class="{ active: layer.info.showChildren }"
				>
					<svg-icon name="dc-down_arrow" size="11" />
				</span>
			</div>
		</div>
		<slot></slot>
	</div>
</template>

<script setup lang="ts">
	import { ref, inject, nextTick } from 'vue'
	import { OperationType } from '../../tools/layerHelper'

	const layerManager = inject('layerManager') as any
	const toolManager = inject('toolManager') as any
	const editName = ref(false)
	const props = defineProps({
		layer: {
			type: Object,
			default: () => ({})
		},
		isGroup: {
			type: Boolean,
			default: false
		}
	})
	const nameInputRef = ref(null)
	const onClickEditName = () => {
		editName.value = true
		nextTick(() => {
			nameInputRef.value.focus()
		})
	}
	const onChangeName = (e) => {
		const value = e.target.value
		editName.value = false
		const name = props.layer.info.name
		if (name !== value) {
			layerManager.setLayerNameById(props.layer.info.id, value)
		}
	}
	const onClickShowHide = () => {
		layerManager.setLayerVisibleById(props.layer.info.id, !props.layer.visible)
	}
	const onClickDelete = () => {
		layerManager.deleteLayerById(props.layer.info.id)
	}
	const onClickLayer = () => {
		layerManager.setActiveID(props.layer.info.id)
	}
	const onClickLock = () => {
		const info = props.layer.info
		layerManager.setLayerLockById(info.id, !info.lock)
	}
	const onShowGroup = () => {
		props.layer.info.showChildren = !props.layer.info.showChildren
		// layerManager.setLayerGroupVisibleById(props.layer.info.id, !props.layer.visible)
	}
</script>

<style lang="less" scoped>
	.layer-item {
		&:last-child > .item {
			border-bottom: none;
		}
		&:not([draging='true']) > .item:hover {
			background-color: #f5f5f5;
		}
		&.active > .item {
			background-color: #ededed !important;
		}
		&.drag {
			opacity: 0;
		}
		&.ghost > .item,
		&.chosen > .item {
			box-shadow: inset 0 0 5px #aaa;
			background-color: #ededed !important;
		}
		> .item {
			width: 100%;
			height: 9.5rem;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 0 1.4rem;
			background-color: #fafafa;
			gap: 1rem;
			border-bottom: 0.2rem solid #ededed;

			> .drag {
				padding: 0.3rem;
				cursor: move;
			}
			> .thumb {
				width: 5.6rem;
				height: 5.6rem;
				border-radius: 0.5rem;
				overflow: hidden;
				border: 0.2rem solid #ebebeb;
				background-color: #fff;
				> img {
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}
			> .name {
				flex: 1;
				font-size: 1.4rem;
				overflow: hidden;
				> div {
					cursor: pointer;
					height: 3rem;
					line-height: 3rem;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				> input {
					width: 100%;
					height: 3rem;
				}
			}
			> .icons {
				display: flex;
				align-items: center;
				justify-content: center;
				gap: 0.8rem;
				> span {
					cursor: pointer;
					width: 1.6rem;
					height: 1.6rem;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				> .show-group {
					> .c-svg {
						transition: transform 0.2s;
						transform: rotate(-90deg);
					}
					&.active > .c-svg {
						transform: rotate(0deg);
					}
				}
			}
		}
	}
</style>
