<script setup name="FormDesign">
defineProps({
	label: {
		type: String
	},
	name: {
		type: String
	}
})
import draggable from 'vuedraggable'
</script>

<template>
	<el-tab-pane class="form-design-wrap" :label="label" :name="name">
<!--		<el-container>
			<el-aside width="400px">
				<div effect="dark" style="background-color: white; margin-top: 0px; padding-top: 20px">
					<h4 style="text-align: center">组件库</h4>
					<template v-for="(item, index) in oriFormList">
						<h5 style="padding-left: 60px">{{ item.name }}</h5>
						<draggable
							v-model="item.formList"
							ghost-class="ghost"
							:force-fallback="true"
							item-key="index"
							:sort="false"
							class="leftItem"
							:animation="300"
							:group="{ name: 'dragFormList', pull: 'clone', put: false }"
							:clone="cloneFunc"
							@end="dragEnd"
							@start="drag = true"
						>
							<template #item="{ element }">
								<div class="zj">
									<el-button size="large" style="width: 100%" :icon="$icon[element.icon]">{{ element.name }} </el-button>
								</div>
							</template>
						</draggable>
					</template>
				</div>
			</el-aside>
			<el-main>
				<div style="display: flex; flex-direction: row">
					<div class="f11">
						<div class="drag-content">
							<div style="text-align: center; font-size: 15px; font-weight: bold; margin-bottom: 20px">{{ flowName }}</div>
							<div class="drag-content-inner">
								<el-form label-position="top">
									<draggable
										v-model="targetList"
										style="min-height: 600px; background-color: var(&#45;&#45;el-bg-color-page)"
										item-key="index"
										:sort="true"
										effect="dark"
										:group="{ name: 'dragFormList', pull: true, put: true }"
									>
										<template #item="{ element, index }">
											<div
												class="okcomponent border line"
												effect="dark"
												:class="{ 'active-component': isCurrentForm(element.id) }"
												@click.stop="showCurrentPageConfigPanel(element.id)"
											>
												<el-icon v-if="element.type != 'Empty'" class="deleteIcon" @click.stop="deleteForm(element.id)">
													<Delete />
												</el-icon>
												<el-form-item :label="step2Object[element.id]?.name" :required="step2Object[element.id]?.required">
													<component
														:is="getFormWidget(element.type)"
														:id="element.id"
														v-model:form="step2Object[element.id]"
														style="width: 100%"
														:index="index"
														@showPanel="showPanel"
													></component>
												</el-form-item>
											</div>
										</template>
									</draggable>
								</el-form>
							</div>
						</div>
					</div>
					<div v-if="currentForm" class="f22">
						<el-card class="box-card">
							<template #header>
								<div class="card-header">
									{{ currentForm?.typeName }}
								</div>
							</template>
							<el-form label-width="120px" label-position="top">
								<el-form-item required label="标题">
									<el-input v-model="currentForm.name" maxlength="10" />
								</el-form-item>

								<el-form-item label="提示" :required="currentForm.type === 'Description'">
									<el-input v-model="currentForm.placeholder" maxlength="50" />
								</el-form-item>

								<component :is="getFormConfigWidget(currentForm.type)" :id="currentForm.id" ref="currentFormConfigRef"></component>
								<el-form-item label="其他">
									<el-checkbox v-model="currentForm.required" label="必填" />
								</el-form-item>
							</el-form>
						</el-card>
					</div>
				</div>
			</el-main>
		</el-container>-->
	</el-tab-pane>
</template>

<style scoped lang="scss">
.form-design-wrap {
}
.leftItem {
	padding-left: 50px;
}

.zj {
	display: inline-block;
	width: 140px;
	margin: 5px;
}

$f22_width: 400px;

$center_width: 360px;
.drag-content {
	min-height: 640px;
	//border: 1px solid;
	width: $center_width;
	border-radius: 20px;
	padding: 30px 10px;
	background-color: white;
	margin-left: calc(50% - ($center_width) / 2);
	box-shadow: 0 0 10px grey;
}

.drag-content-inner {
	background-color: var(--el-bg-color-page);
	border-radius: 5px;
	padding: 5px;
}

.f11 {
	width: calc(100% - $f22_width);
}

.f22 {
	width: $f22_width;
}

.okcomponent {
	padding: 5px;
	border-radius: 0px;
	margin-bottom: 10px;
	background-color: white;
	border: 1px solid white;
}

.active-component {
	border: 1px solid var(--el-color-primary);
}

.deleteIcon {
	position: absolute;
	margin-left: calc($center_width - 60px);
	z-index: 20;
}

.deleteIcon:hover {
	cursor: pointer;
	color: palevioletred;
}
</style>
