<template>
    <div class="el-form-section" :class="{'is-grid': grid}" :style="{'background-color': backgroundColor ? backgroundColor : '' }">
        <div :class="['el-form-section__head',
                sizeClass ? 'el-form-section--' + sizeClass : '',
                {'is-border': border}
            ]"
            v-if="label || tips || $slots.right">
            <div class="el-form-section__title">
                <slot name="label">
                    <div class="el-form-section__label" 
                        :style="{
                            width: labelWidth ? labelWidth : ''
                        }">{{label}}
                    </div>
                </slot>
                <slot name="right"></slot>
            </div>
            <div class="el-form-section__tips" v-if="tips">
                {{tips}}
            </div>
        </div>
        <div class="el-form-section__body">
            <slot/>
        </div>
    </div>
</template>

<script>
export default {
    name:'BmlFormSection',
    componentName: 'BmlFormSection',

    provide() {
      return {
        bmlFormSection: this
      };
    },
    props: {
        label: String,
        tips: String,
        labelWidth: String,
        size: String,
        border: Boolean,
        grid: Boolean,
        backgroundColor: String,
        readonly: Boolean
    },
    computed: {
        sizeClass() {
            return this.size || (this.$ELEMENT || {}).size;
        }
    }
}
</script>