/**
 * 1. 优化样式
 * 2. 新增fappend prepend 在明细模式下 fappend fprepend 不会忽略
 * @author xiufu.wang
*/

import ElFormItem from 'mars-pro/packages/form-item';
import { ProConfigProvideMixin } from 'mars-pro/packages/pro-config-provide';
import omit from 'mars-pro/src/pro/omit';
import ProLayoutContaner from 'mars-pro/packages/pro-layout-contaner';

export default {
    name: 'ProLayoutFormitem',
    componentName: 'ProLayoutFormitem',
    inheritAttrs: false,
    components: {
        ElFormItem,
        ProLayoutContaner
    },
    inject: {
        elForm: {
            default: ""
        }
    },
    mixins: [ProConfigProvideMixin],
    computed: {
        enableDetail() { 
            return this.elForm && this.elForm.enableDetail === true
        }
    },
    methods: {
        renderSlots() {
            const slots = omit(this.$slots || {}, ['default'])
            return Object.keys(slots).map(item => (
                <template slot={item}>{slots[item]}</template>
            ))
        },
        renderContent() {
            if (this.$slots.fappend || this.$slots.fprepend) { 
                return (
                    <ProLayoutContaner align={ this.enableDetail === true ? undefined : "middle"} class="pro-layout-formitem--content">
                        {this.$slots.fprepend && <div class="pro-formitem--fprepend" flex="none">{ this.$slots.fprepend}</div>}
                        <div class="pro-formitem-controller pro-formitem-controller--group" flex="auto">
                            {this.$slots.default}
                        </div>
                        {this.$slots.fappend && <div class="pro-formitem--fappend" flex="none">{ this.$slots.fappend }</div>}
                    </ProLayoutContaner>
                )
            }
            return this.$slots.default
        }
    },
    render() {
        const _datas = {
            props: {
                ...this.$attrs
            },
            attrs: this.$attrs,
            on: this.$listeners,
            'class': {
                'pro-layout-formitem': true,
                'pro-layout-formitem--hasfprepend': !!!this.$slots.fprepend,
                'pro-layout-formitem--hasfappend': !!this.$slots.fappend,
                'pro-layout-formitem-groups': !!(this.$slots.fappend || this.$slots.fprepend)
            }
        }
        return (
            <ElFormItem {..._datas}>
                {this.renderContent()}
                {this.renderSlots()}
            </ElFormItem>
        )
    }
}