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

<script>
export default {
  name: 'ElContainer',

  componentName: 'ElContainer',

  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 && vnode.tag;
          const componentTag = vnode.componentOptions && vnode.componentOptions.tag;
          if (componentTag) {
            return componentTag === 'el-header' || componentTag === 'el-footer';
          }
          if (tag) {
            return tag.includes('ElHeader') || tag.includes('ElFooter');
          }
          return false;
        })
        : false;
    }
  }
};
</script>
