<template>
    <section class="el-container ap-container" :class="{ 'is-vertical': isVertical }"
             :style="{margin: marginValue }">
        <slot></slot>
    </section>
</template>

<script>
    import ApLayoutBase from './ApLayoutBase'

    export default {
        name: 'ApContainer',
        componentName: 'ApContainer',
        extends: ApLayoutBase,
        props: {
            direction: String
        },
        computed: {
            isVertical() {
                if (this.direction === 'vertical') {
                    return true;
                } else if (this.direction === 'horizontal') {
                    return false;
                }
                return this.$slots && this.$slots.default
                    ? this.$slots.default.some(vnode => {
                        const tag = vnode.componentOptions && vnode.componentOptions.tag;
                        return tag === 'ap-header' || tag === 'ap-footer';
                    })
                    : false;
            }
        }
    };
</script>
<style scoped>
    .ap-container {
        height: 100%;
    }
</style>