<template>
    <div :class="`${prefix}-form-section`"
         :style="formSectionStyle">
        <div v-if="title"
             :class="`${prefix}-form-section__title`">
            <span>{{title}}</span>
            <span v-if="$slots['sub-title'] || subTitle"
                  :class="`${prefix}-form-section__sub-title`">
                <slot name="sub-title">{{subTitle}}</slot>
            </span>
            <div :class="`${prefix}-form-section__action`">
                <slot name="action"></slot>
            </div>
        </div>
        <div :class="`${prefix}-form-section__content`"
             :style="contentStyle">
            <slot></slot>
        </div>
    </div>
</template>

<script>
import { prefix, prefixMixins } from 'jdd-design/utils';
export default {
    name: `${prefix}-form-section`,
    mixins: [prefixMixins],
    data() {
        return {};
    },
    inject: {
        jddForm: {
            default: null
        }
    },
    props: {
        title: String,
        subTitle: String,
        spaceBetween: {
            type: Number,
            default: 30
        }
    },
    computed: {
        formSectionStyle() {
            let style = {};
            if (this.spaceBetween) {
                style.marginBottom = `${this.spaceBetween}px`;
            }
            return style;
        },
        contentStyle() {
            return this.jddForm.contentStyle;
        }
    },
    methods: {},
    mounted() {}
};
</script>
