<template>
    <el-form :model="formData" ref="form" label-position="right" label-width="100px" :size="size" :rules="rules">
        <el-form-item v-for="item in formDef" :prop="item.id" :label="item.name" :key="item.id" v-if="item.readable">
            <el-input v-if="item.type === 'string'" v-model="formData[item.id]" :disabled="!item.writable" class="form-item"></el-input>
            <el-select ref="select" v-else-if="item.type === 'enum'" :value="formData[item.id]" @input="valueChange($event, item.id)" :disabled="!item.writable" class="form-item">
                <el-option v-for="(option,index) in item.enumValues" :label="option.name" :value="option.id" :key="index">
                </el-option>
            </el-select>
            <el-date-picker v-else-if="item.type === 'date'" type="datetime" :value="formData[item.id]" @input="valueChange($event, item.id)" :format="item.datePattern" :value-format="item.datePattern" :disabled="!item.writable" class="form-item">
            </el-date-picker>
            <el-switch v-else-if="item.type === 'boolean'" :value="formData[item.id]" @input="valueChange($event, item.id)" :disabled="!item.writable" class="form-item">
            </el-switch>
        </el-form-item>
        <slot></slot>
    </el-form>
</template>
<script>
export default {
    props: {
        formProps: {
            type: Array,
            required: true
        },
        value: {
            type: Object
        },
        size: {
            type: String,
            default: 'small'
        }
    },
    created() {
        console.log('created', this.formProps)
        this.updateForm(this.formProps)
    },
    data() {
        return {
            formData: {},
            formDef: []
        }
    },
    computed: {
        rules() {
            let rules = {};
            this.formDef.forEach(item => {
                rules[item.id] = [{ required: true, message: `请填写${item.name}`, trigger: 'blur' }]
            });
            return rules;
        }
    },
    methods: {
        validate(fn) {
            this.$refs.form.validate(valid => {
                if (fn instanceof Function) {
                    fn(valid)
                }
            })
        },
        clearValidate() {
            this.$refs.form.clearValidate()
        },
        getData(all) {
            let data = [];
            this.formDef.forEach(i => {
                if (i.writable || all) {
                    if (this.formData[i.id]) {
                        data.push({
                            id: i.id,
                            value: this.formData[i.id]
                        })
                    }
                }
            })
            return data;
        },
        updateForm(props) {
            try {
                this.$refs.form.clearValidate();
            } catch (error) {

            }
            props.forEach(i => {
                this.formData[i.id] = i.value || null
            });
            this.formDef = this.formProps;
        },
        valueChange(val, id) {
            let formData = {
                ...this.formData
            }
            formData[id] = val
            this.formData = formData
        }
    },
    watch: {
        formProps(val) {
            this.updateForm(val);
        },
        value(val) {
            if (val instanceof Object) {
                //this.formData = val
                for (let key in val) {
                    this.formData[key] = val[key]
                }
            }
        },
        formData(val) {
            this.$emit('input', val)
        }
    }
}
</script>
<style lang="less" scoped>
.form-item {
    width: 100%;
}
</style>


