<script>
    import Content from './Content'
    export default {
        name: 'ElFormContent',
        props: {
            ele: String,
            type: String,
            look: Boolean,
        },
        inject: ['elForm', 'elFormItem'],
        components: {
            Content
        },
        data() {
            return {
                element: {
                    input: 'el-input',
                    cascader: 'el-cascader',
                    colorPicker: 'el-color-picker',
                    datePicker: 'el-date-picker',
                    inputNumber: 'el-input-number',
                    radio: 'el-radio',
                    radioButton: 'el-radio-button',
                    radioGroup: 'el-radio-group',
                    checkbox: 'el-checkbox',
                    checkboxGroup: 'el-checkbox-group',
                    rate: 'el-rate',
                    select: 'el-select',
                    switch: 'el-switch',
                    timePicker: 'el-time-picker',
                    timeSelect: 'el-time-select',
                    upload: 'el-upload',
                    dictSelect: 'el-dict-select'
                },
            }
        },
        computed: {

            isLook() {
                return this.look || this.elForm.look
            }
        },
        render(c) {
            let ele = this.element[this.ele]
            if (!this.isLook) {

                let slots = Object.keys(this.$slots).map(key => {
                    return c('div',{
                        attrs: this.$attrs,
                        on: this.$listeners,
                        props: {
                            type: this.type
                        },
                        slot: key
                    }, this.$slots[key])
                })
                return c(ele, {
                    attrs: this.$attrs,
                    on: this.$listeners,
                    props: {
                        type: this.type
                    },
                }, slots)
            } else {
                return c(Content, {
                    class: 'el-form-content',
                    attrs: this.$attrs,
                    on: this.$listeners,
                    props: {
                        ele: this.ele,
                        type: this.type
                    },
                })
            }
        }
    }
</script>

<style scoped>

</style>
