<template>
	<el-aside class="panel">
		<el-scrollbar>
			<el-tabs v-model="activeName" stretch>
				<el-tab-pane label="组件属性" name="field">
					<el-form :model="form" label-width="90px">
						<el-form-item v-if="form.name !== 'button' && form.name !== 'layout'" label="字段名"
									  prop="field_name">
							<el-input v-model="form.field_name"></el-input>
						</el-form-item>
						<el-form-item v-if="form.name !== 'layout'" label="标题" prop="title">
							<el-input v-model="form.title"></el-input>
						</el-form-item>
						<el-form-item v-if="form.name !== 'button' && form.name !== 'layout'" label="默认值"
									  prop="value">
							<el-input v-model="form.value"></el-input>
						</el-form-item>
						<el-form-item v-if="form.span !== undefined" label="栅格列数" prop="span">
							<el-slider v-model="form.span" :min="1" :max="24"/>
						</el-form-item>
						<template v-for="item in fieldEditors[form.name] || []" :key="item.key">
							<el-form-item :label="item.label">
								<el-input
									v-if="item.type === 'input'"
									:model-value="getByPath(form, item.key)"
									@input="val => setByPath(form, item.key, val)"
									clearable
								/>
								<el-input
									v-else-if="item.type === 'number'"
									type="number"
									:model-value="getByPath(form, item.key)"
									@input="val => setByPath(form, item.key, Number(val))"
								/>
								<el-switch
									v-else-if="item.type === 'switch'"
									:model-value="getByPath(form, item.key)"
									@change="val => setByPath(form, item.key, val)"
								/>
								<el-color-picker v-else-if="item.type === 'color'" show-alpha
												 :model-value="getByPath(form, item.key)"
												 @change="val => setByPath(form, item.key, val)"/>
								<el-radio-group v-else-if="item.type === 'radio'"
												:model-value="getByPath(form, item.key)"
												@change="val => setByPath(form, item.key, val)">
									<el-radio-button v-for="op in item.options" :key="op.value"
													 :value="op.value">{{ op.label }}
									</el-radio-button>
								</el-radio-group>
								<el-select v-else-if="item.type === 'select'" :model-value="getByPath(form, item.key)"
										   @change="val => setByPath(form, item.key, val)">
									<el-option v-for="op in item.options" :key="op.value" :value="op.value"
											   :label="op.label">
									</el-option>
								</el-select>
								<pi-icon-select
									v-else-if="item.type === 'icon'"
									:model-value="getByPath(form, item.key)"
									@update:modelValue="val => setByPath(form, item.key, val)"
								/>
							</el-form-item>
						</template>
						<el-form-item label="是否必填" v-if="form.required !== undefined">
							<el-switch v-model="form.required"/>
						</el-form-item>
						<template v-if="form.options !== undefined">
							<el-divider>选项</el-divider>
							<pi-draggable v-model="form.options" item-key="label" :template="{label:'', value:''}">
								<template #default="scope">
									<div style="display:flex;gap: 5px;">
										<el-input v-model="scope.element.label" placeholder="label"/>
										<el-input v-model="scope.element.value" placeholder="value"/>
									</div>
								</template>
							</pi-draggable>
						</template>
						<template v-if="form.name !== 'button' && form.name !== 'layout' && form.rules !== undefined">
							<el-divider>正则校验</el-divider>
							<pi-draggable v-model="form.rules" item-key="regex"
										  :template="{pattern:'',message:'', trigger: 'blur'}">
								<template #default="scope">
									<el-form-item label="表达式">
										<el-input v-model="scope.element.pattern"/>
									</el-form-item>
									<el-form-item label="错误提示">
										<el-input v-model="scope.element.message"/>
									</el-form-item>
								</template>
							</pi-draggable>
						</template>
					</el-form>
				</el-tab-pane>
				<el-tab-pane label="表单属性" name="form">
					<el-form :model="data.config" label-width="90px">
						<el-form-item label="表单名称" prop="ref">
							<el-input v-model="data.config.ref"></el-input>
						</el-form-item>
						<el-form-item label="表单模型" prop="model">
							<el-input v-model="data.config.model"></el-input>
						</el-form-item>
						<el-form-item label="校验模型" prop="rules">
							<el-input v-model="data.config.rules"></el-input>
						</el-form-item>
						<el-form-item label="表单尺寸" prop="size">
							<el-radio-group v-model="data.config.size">
								<el-radio-button value="large">较大</el-radio-button>
								<el-radio-button value="default">默认</el-radio-button>
								<el-radio-button value="small">较小</el-radio-button>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="标签对齐" prop="labelPosition">
							<el-radio-group v-model="data.config.labelPosition">
								<el-radio-button value="left">左对齐</el-radio-button>
								<el-radio-button value="right">右对齐</el-radio-button>
								<el-radio-button value="top">顶部对齐</el-radio-button>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="标签宽度" prop="labelWidth">
							<el-input-number v-model="data.config.labelWidth"/>
						</el-form-item>
						<el-form-item label="禁用表单" prop="disabled">
							<el-switch v-model="data.config.disabled"/>
						</el-form-item>
					</el-form>
				</el-tab-pane>
			</el-tabs>
		</el-scrollbar>
	</el-aside>
</template>

<script setup>
import {computed, ref} from "vue";
import piIconSelect from "@/components/piIconSelect"
import piDraggable from "@/components/piDraggable"
import {fieldEditors, getByPath, setByPath} from "./config"
import FormBuild from "./formBuild";

const emit = defineEmits(['update:field'])
const props = defineProps({
	data: {type: FormBuild, default: {}},
	field: {type: Object, default: {}}
})
let activeName = ref("field")
let form = computed(() => {
	return props.field.element
})
</script>

<style lang="scss" scoped>
.panel {
	width: 350px;
	padding: 10px;
	user-select: none;
	border-left: 1px solid var(--el-border-color-light);
}

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

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

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