<template>
	<el-aside class="panel">
		<el-scrollbar>
			<div class="title">
				<el-text>
					<el-icon>
						<component :is="'pi-icon-zu-jian'"/>
					</el-icon>
					输入组件
				</el-text>
			</div>
			<draggable v-model="inputComps" animation="200" item-key="name" class="draggroup" :group="group"
					   :sort="false"
					   :clone="cloneField">
				<template #item="{ element }">
					<div class="item" @click="handleClick(element)">
						<div class="tips">松开鼠标组件将添加到此处</div>
						<div class="comp">
							<el-icon size="20">
								<component :is="element.icon"/>
							</el-icon>
							{{ element.title }}
						</div>
					</div>
				</template>
			</draggable>
			<div class="title">
				<el-text>
					<el-icon>
						<component :is="'pi-icon-zu-jian'"/>
					</el-icon>
					选择组件
				</el-text>
			</div>
			<draggable v-model="choiceComps" animation="200" item-key="name" class="draggroup" :group="group"
					   :sort="false"
					   :clone="cloneField">
				<template #item="{ element }">
					<div class="item" @click="handleClick(element)">
						<div class="tips">松开鼠标组件将添加到此处</div>
						<div class="comp">
							<el-icon size="20">
								<component :is="element.icon"/>
							</el-icon>
							{{ element.title }}
						</div>
					</div>
				</template>
			</draggable>
			<div class="title">
				<el-text>
					<el-icon>
						<component :is="'pi-icon-zu-jian'"/>
					</el-icon>
					布局组件
				</el-text>
			</div>
			<draggable v-model="layoutComps" animation="200" item-key="name" class="draggroup" :group="group"
					   :sort="false"
					   :clone="cloneField">
				<template #item="{ element }">
					<div class="item" @click="handleClick(element)">
						<div class="tips">松开鼠标组件将添加到此处</div>
						<div class="comp">
							<el-icon size="20">
								<component :is="element.icon"/>
							</el-icon>
							{{ element.title }}
						</div>
					</div>
				</template>
			</draggable>
		</el-scrollbar>
	</el-aside>
</template>

<script setup>
import draggable from 'vuedraggable'
import FormBuild from "./formBuild"
import {inputComps, choiceComps, layoutComps} from "./config"

const props = defineProps({
	data: {type: FormBuild, default: {}},
	field: {type: Object, default: {}}
})
const group = {name: 'base', pull: 'clone', put: false}

function cloneField(e) {
	const field = JSON.parse(JSON.stringify(e));
	field.field_name = field.name + "_" + props.data.config.counter;
	field.id = field.name + props.data.config.counter
	props.data.config.counter++
	return field
}

function handleClick(e) {
	let field = cloneField(e)
	props.data.fields.push(field)
	props.field.element = field
}
</script>

<style lang="scss" scoped>
.panel {
	width: 260px;
	padding: 10px;
	user-select: none;

	.title {
		margin-bottom: 10px;

		i {
			margin-right: 5px;
		}
	}
}

:deep(.el-scrollbar__bar) {
	display: none !important;
}

:deep(.el-scrollbar__wrap) {
	scrollbar-width: none;
}

:deep(.el-scrollbar__wrap::-webkit-scrollbar) {
	display: none !important;
}

.draggroup {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin-bottom: 10px;

	.item {
		width: 115px;
		font-size: 12px;
		cursor: move;
		background: #f6f7ff;
		border: 1px dashed #f6f7ff;
		border-radius: 3px;
		margin-bottom: 10px;

		.comp {
			display: flex;
			align-items: center;
			height: 32px;
			padding: 0 10px;

			i {
				margin-right: 5px;
			}
		}

		.tips {
			display: none;
		}
	}

	.item:hover {
		border: 1px dashed #787be8;
		color: #787be8;
	}
}
</style>
