<template>
	<transition name="fade">
		<div v-if="show" class="ai-selectbox-panel">
			<div>
				<span class="icon"><svg-icon name="dc-add" size="16" /></span>
				<span class="label">Add</span>
			</div>
			<div>
				<span class="icon"><svg-icon name="dc-remove" size="16" /></span>
				<span class="label">Remove</span>
			</div>
			<button>创建</button>
		</div>
	</transition>
</template>

<script setup lang="ts">
	import { ref, inject, computed, watch } from 'vue'
	import depthSlider from './tools/depth-slider.vue'
	import { OperationType } from '../tools/layerHelper'
	const props = defineProps({
		currentTool: { required: true, type: [String, null] }
	})
	const stateManager = inject('stateManager') as any
	const toolManager = inject('toolManager') as any
	const showTools = [OperationType.SELECTBOX]
	const show = computed(() => showTools.includes(props.currentTool))
</script>
<style lang="less" scoped>
	// 淡入淡出动画
	.fade-enter-active,
	.fade-leave-active {
		transition: opacity 0.3s;
	}
	.fade-enter-from,
	.fade-leave-to {
		opacity: 0;
	}

	.ai-selectbox-panel {
		position: absolute;
		top: 8.8rem;
		left: 50%;
		transform: translateX(-50%);
		height: 4.1rem;
		padding: 0 1.7rem;
		border: 0.2rem solid #ebebeb;
		background: #ffffff;
		border-radius: 1.1rem;
		box-shadow: 0 1.66rem 2.33rem 0 rgba(0, 0, 0, 0.05);

		display: flex;
		align-items: center;
		justify-content: center;
		user-select: none;
		gap: 1rem;
		> div {
			display: flex;
			cursor: pointer;
			align-items: center;
			justify-content: center;
			height: 2.6rem;
			padding: 0 0.7rem;
			border-radius: 0.3rem;
			gap: 1rem;
			> .label {
				font-size: 1.4rem;
				color: #000;
			}
			&.active,
			&:hover {
				background: rgba(235, 235, 235, 0.9);
			}
		}
	}
</style>
