<template>
	<el-form-item :label="field.title" :required="field.required">
		<component :is="getComponent(field.name)" v-model="field.value" v-bind="field.props"
				   :style="{width: field.width}">
			<template v-if="field.name === 'select'" #default>
				<el-option v-for="(op, idx) in field.options" :key="idx" :label="op.label" :value="op.value"/>
			</template>
			<template v-else-if="field.name === 'radio'" #default>
				<el-radio-button v-if="field.style === 'button'" v-for="(op, idx) in field.options" :key="idx"
								 :label="op.label" :value="op.value"/>
				<el-radio v-else v-for="(op, id) in field.options" :key="id" :label="op.label" :value="op.value"/>
			</template>
			<template v-else-if="field.name === 'checkbox'" #default>
				<el-checkbox-button v-if="field.style === 'button'" v-for="(op, idx) in field.options" :key="idx"
									:label="op.label" :value="op.value"/>
				<el-checkbox v-else v-for="(op, id) in field.options" :key="id" :label="op.label" :value="op.value"/>
			</template>
			<template
				v-if="field.name === 'upload' && (field.props.listType === 'text' || field.props.listType === 'picture')"
				#trigger>
				<el-button type="primary" icon="pi-icon-upload-file">
					{{ field.btnText }}
				</el-button>
			</template>
			<template
				v-if="field.name === 'upload' && field.props.listType === 'picture-card'" #trigger>
				<el-icon>
					<component :is="'el-icon-plus'"/>
				</el-icon>
			</template>
			<template v-if="field.name === 'upload' && field.tip" #tip>
				<div class="el-upload__tip">
					{{ field.tip }}
				</div>
			</template>
			<template v-if="field.name === 'button' && field.btnText"
					  #default>
				{{ field.btnText }}
			</template>
		</component>
	</el-form-item>
</template>

<script setup>
import {getComponent} from "./config"

const props = defineProps({
	field: {type: Object, default: {}}
})
</script>

<style scoped>

</style>
