<template>
  <el-container :direction="verticalDirection">
    <slot />
  </el-container>
</template>

<script>
import { Container } from 'xl-element-ui'
export default {
  components: {
    elContainer: Container
  },
  props: {
    direction: {
      type: String,
      default: ''
    }
  },
  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 === 'xl-header' || tag === 'xl-footer'
        })
        : false
    },
    verticalDirection() {
      return this.isVertical ? 'vertical' : 'horizontal'
    }
  }
}
</script>
