<template>
  <div class="box-layout">
    <Card
      dis-hover
      class="box-layout__card"
    >
      <slot />
    </Card>

    <div
      v-if="isFooter"
      class="box-layout__footer"
    >
      <slot name="footer" />
    </div>

    <banner-nav />
  </div>
</template>

<script>
import BannerNav from '@/vue/components/Widget/BannerNav.vue';

export default {
  name: 'BoxLayout',
  components: {
    'banner-nav': BannerNav,
  },
  props: {
    isFooter: {
      type: Boolean,
      default: false,
    },
  },
};
</script>

<style lang="scss" scoped>
@import '@/vue/styles/tokens.scss';

.box-layout {
  width: 100%;

  &__card.ivu-card {
    border-radius: $radius-card;
    box-shadow: $shadow-card;
    overflow-y: auto;
    max-height: calc(100vh - 120px);
    @include scrollbar;
  }

  &__footer {
    margin-top: 8px;
  }
}

@media (max-width: 600px) {
  .box-layout__card.ivu-card {
    border-radius: 0;
    max-height: calc(100vh - 100px);
  }
}
</style>
