<template>
	<section class="panel">
		<el-scrollbar>
			<el-tabs v-model="activeName" stretch>
				<el-tab-pane label="组件属性" name="field">
					<el-form v-model="fForm" label-width="90px">
						<el-form-item v-if="fForm.name !== 'button' && fForm.name !== 'layout'" label="字段名" prop="field_name">
							<el-input v-model="fForm.field_name"></el-input>
						</el-form-item>
						<el-form-item v-if="fForm.name !== 'layout'" label="标题" prop="title">
							<el-input v-model="fForm.title"></el-input>
						</el-form-item>
						<el-form-item v-if="fForm.name !== 'button' && fForm.name !== 'layout'" label="默认值" prop="value">
							<el-input v-model="fForm.value"></el-input>
						</el-form-item>
						<el-form-item v-if="fForm.span !== undefined" label="栅格列数" prop="span">
							<el-slider v-model="fForm.span" :min="1" :max="24"/>
						</el-form-item>
						<template v-for="item in fieldEditors[fForm.name] || []" :key="item.key">
							<el-form-item :label="item.label">
								<el-input
									v-if="item.type === 'input'"
									:model-value="getByPath(fForm, item.key)"
									@input="val => setByPath(fForm, item.key, val)"
									clearable
								/>
								<el-input
									v-else-if="item.type === 'number'"
									type="number"
									:model-value="getByPath(fForm, item.key)"
									@input="val => setByPath(fForm, item.key, Number(val))"
								/>
								<el-switch
									v-else-if="item.type === 'switch'"
									:model-value="getByPath(fForm, item.key)"
									@change="val => setByPath(fForm, item.key, val)"
								/>
								<el-color-picker v-else-if="item.type === 'color'" show-alpha
												 :model-value="getByPath(fForm, item.key)"
												 @change="val => setByPath(fForm, item.key, val)"/>
								<el-radio-group v-else-if="item.type === 'radio'"
												:model-value="getByPath(fForm, item.key)"
												@change="val => setByPath(fForm, 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(fForm, item.key)"
										   @change="val => setByPath(fForm, 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
									v-else-if="item.type === 'icon'"
									:model-value="getByPath(fForm, item.key)"
									@update:modelValue="val => setByPath(fForm, item.key, val)"
								/>
							</el-form-item>
						</template>
						<el-form-item label="是否必填" v-if="fForm.required !== undefined">
							<el-switch v-model="fForm.required"/>
						</el-form-item>
						<template v-if="fForm.options !== undefined">
							<el-divider>选项</el-divider>
							<pi-draggable v-model="fForm.options" item-key="label" :template="{label:'', value:''}">
								<template #default="scope">
									<div style="display:flex;">
										<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="fForm.name !== 'button' && fForm.name !== 'layout'">
							<el-divider>正则校验</el-divider>
							<pi-draggable v-model="fForm.rules" item-key="regex" :template="{regex:'',message:''}">
								<template #default="scope">
									<el-form-item label="表达式">
										<el-input v-model="scope.element.regex"/>
									</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 v-model="cForm" label-width="90px">
						<el-form-item label="表单名称" prop="ref">
							<el-input v-model="cForm.ref"></el-input>
						</el-form-item>
						<el-form-item label="表单模型" prop="model">
							<el-input v-model="cForm.model"></el-input>
						</el-form-item>
						<el-form-item label="校验模型" prop="rules">
							<el-input v-model="cForm.rules"></el-input>
						</el-form-item>
						<el-form-item label="表单尺寸" prop="size">
							<el-radio-group v-model="cForm.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="cForm.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="cForm.labelWidth"/>
						</el-form-item>
						<el-form-item label="禁用表单" prop="disabled">
							<el-switch v-model="cForm.disabled"/>
						</el-form-item>
						<el-form-item prop="act">
							<el-button type="primary" @click="emit('save')">暂存</el-button>
						</el-form-item>
					</el-form>
				</el-tab-pane>
			</el-tabs>
		</el-scrollbar>
	</section>
</template>

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

const props = defineProps({
	curField: {type: Object, default: {}},
	config: {type: Object, default: {}}
})
const emit = defineEmits(['update:modelValue', 'save'])
let activeName = ref("field")
let cForm = computed({
	get() {
		return props.config
	},
	set(value) {
		this.$emit('update:modelValue', value)
	}
})
let fForm = computed({
	get() {
		return props.curField
	},
	set(value) {
		this.$emit('update:modelValue', value)
	}
})
</script>

<style lang="scss" scoped>
.panel {
	width: 350px
}

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

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

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