<template>
	<view class="">
		<uni-forms ref="form" :model="form">
			<uni-forms-item v-for="item in fields" :label="item.label" :name="item.name">
				<uni-easyinput v-if="item.tag == 'el-input'" v-model="form[item.name]" />
				<uni-datetime-picker v-else-if="item.tag == 'el-date-picker'" v-model="form[item.name]"></uni-datetime-picker>
				<uni-data-select 
					v-else-if="item.tag == 'el-select'"
					v-model="form[item.name]"
					:localdata="item.slot.localData"
				>
				</uni-data-select>
				<view v-else-if="item.tag == 'el-upload'">
					手机端暂不支持文件上传
				</view>
				<view v-else>未知表单</view>
			</uni-forms-item>
		</uni-forms>
		
		<view class="submitter">
			<button @click="submitForm">提交</button>
			<button @click="reset">重置</button>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			formConf: {
				required: true,
				type: Object,
			},
			submitter: {
				default: true,
				type: Boolean
			}
		},
		data() {
			return {
				fields: [],
				form: {}
			}
		},
		watch: {
			formConf: {
				immediate: true,
				deep: true,
				handler(newVal) {
					this.SchemaToJsonForm(newVal)
				}
			}
		},
		methods: {
			async SchemaToJsonForm(schema) {
				console.log(schema, 'watch 打印')
				const fields = []
				for (const row of schema.fields) {
					const o = {
						label: row.__config__.label,
						tag: row.__config__.tag,
						name: row.__vModel__,
						_row: row
					}
					if (row.__slot__ && row.__slot__.options) {
						o['slot'] = {
							localData: row.__slot__.options.map(item => {
								return {
									value: item.value,
									text: item.label
								}
							})
						}
					}
					this.$set(this.form, o.name, '')
					fields.push(o)
				}
				this.fields = fields;
			},
			submitForm() {
				this.$emit('finish', this.form)
			},
			reset() {
				
			}
		}
	}
</script>

<style>
</style>