<template>
    <div class="dynamic-form">
        <el-form class="form-wrapper" :model="modelValue" ref="formRef">
            <el-form-item v-for="(config, index) in formConfig" :key="index" :prop="config['prop']"
                :label="config['label']" :rules="config['rules']" label-position="right">

                <template v-if="config.type == 'input'">
                    <el-input :modelValue="modelValue[config.name]"
                        @update:modelValue="(event) => changeValue(config, event)"
                        :placeholder="config.componentProps?.placeholder" :clearable="true" />
                </template>


                <template v-if="config.type == 'inputNumber'">
                    <el-input-number :modelValue="modelValue[config.name]"
                        @update:modelValue="(event) => changeValue(config, event)"
                        :placeholder="config.componentProps?.placeholder" :clearable="true" />
                </template>


                <template v-if="config.type == 'radio'">
                    <el-radio-group :modelValue="modelValue[config.name]"
                        @update:modelValue="(event) => changeValue(config, event)"
                        :placeholder="config.componentProps?.placeholder">
                        <el-radio v-for="(option, i) in config.options" :value="option.value">{{ option.label
                            }}</el-radio>
                    </el-radio-group>
                </template>


                <template v-if="config.type == 'select'">
                    <el-select :modelValue="modelValue[config.name]"
                        @update:modelValue="(event) => changeValue(config, event)"
                        :placeholder="config.componentProps?.placeholder">
                        <el-option v-for="(option, i) in config.options" :key="i" :label="option.label"
                            :value="option.value"></el-option>
                    </el-select>
                </template>

                <template v-if="config.type == 'date'">
                    <el-date-picker :modelValue="modelValue[config.name]" type="date"
                        @update:modelValue="(event) => changeValue(config, event)"
                        :placeholder="config.componentProps?.placeholder" />
                </template>
            </el-form-item>
        </el-form>
    </div>
</template>
<script setup>
import { onMounted, watch, ref } from 'vue';
const props = defineProps({
    formConfig: {
        type: Array,
        default: () => []
    },
    modelValue: {
        type: Object,
        default: () => { }
    }
})
const emit = defineEmits(['update:modelValue'])
const formRef = ref(null)
const changeValue = (config, value) => {
    const form = { ...props.modelValue }
    form[config.name] = value
    emit('update:modelValue', form)
}

// 获得默认表单值
const getDefaultFormValue = () => {
    const form = {}
    props.formConfig.forEach(config => {
        form[config.name] = config.default !== undefined ? config.default : ''
    })
    return form
}


defineExpose({
    getDefaultFormValue,
    formComponent: formRef.value,
})

</script>
<style scoped lang="scss">
.form-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
</style>