<template>
    <div class="layout-box">
        <div v-if="showTitle" class="box-hd">
            <slot>{{ title }}</slot>
            <slot name="action" />
        </div>
        <div class="box-bd">
            <slot name="content" />
        </div>
        <slot name="slot" />
    </div>
</template>

<script>
export default {
    name: 'LayoutBox',
    props: {
        title: String,
        showTitle: {
            type: Boolean,
            default: true
        }
    }
}
</script>

<style lang="stylus" scoped>
borderColor = #DCDFE6
.layout-box
    position relative
    border 1px solid borderColor
    flex 1
    display flex
    flex-direction column
    box-shadow 0 2px 12px 0 rgba(0, 0, 0, 0.1)
    justify-content space-between
    overflow hidden
    .box-hd
        flex-shrink 0
        padding 0 15px
        height 38px
        border-bottom 1px solid borderColor
        display flex
        justify-content space-between
        align-items center
        color #333
    .box-bd
        flex 1
        overflow-y hidden
        padding-bottom 12px
</style>
