<template>
  <div class="x-page-container">
    <div class="x-page-container-header" v-if="showHeader">
      <slot name="header"></slot>
    </div>
    <div class="x-page-container-sub" v-if="showSub">
      <slot name="sub"></slot>
    </div>
    <div class="x-page-container-main" v-if="showMain">
      <slot name="main"></slot>
    </div>
    <div class="x-page-container-footer" v-if="showFooter">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'XPageContainer',
  inheritAttrs: false,
  computed: {
    showHeader () {
      const arr = this.$scopedSlots.header ? this.$scopedSlots.header() : [];
      return Array.isArray(arr) && arr.length > 0;
    },
    showSub () {
      const arr = this.$scopedSlots.sub ? this.$scopedSlots.sub() : [];
      return Array.isArray(arr) && arr.length > 0;
    },
    showMain () {
      const arr = this.$scopedSlots.main ? this.$scopedSlots.main() : [];
      return Array.isArray(arr) && arr.length > 0;
    },
    showFooter () {
      const arr = this.$scopedSlots.footer ? this.$scopedSlots.footer() : [];
      return Array.isArray(arr) && arr.length > 0;
    }
  }
};
</script>
