<template>
  <div class="dv-border-box" :class="classes" :style="commonContainerStyles">
    <div class="dv-border-box-header" v-if="computedTitle !== null || $slots.headerRight || subTitle!== null">
      <h3 class="dv-border-box-title" :class="[computedTitleAlignment]">
        {{computedTitle}}
        <slot name="subTitle"><span v-if="subTitle" class="dv-border-box-sub-title" v-html="subTitle"></span></slot>
      </h3>
      <slot class="dv-border-box-header-right" name="headerRight"></slot>
    </div>
    <div class="dv-border-box-body">
      <slot></slot>
    </div>
    <div class="dv-border-box-footer"></div>
  </div>
</template>

<script>
import ThemeComponent from "../../../mixins/ThemeComponent";
import CommonContainer from "../../../mixins/CommonContainer";

export default {
  name: 'DvBorderBox',
  mixins: [ThemeComponent, CommonContainer],
  props: {
    title: null,
    subTitle: null,
    backgroundColor: null,
    backgroundImage: null,
    cardStyle: {
      type: [String, Number]
    },
    body: {
      type: Object,
      default () {
        return {
          padding: false,
          scroll: false,
          flex: false
        };
      }
    }
  },
  computed: {
    classes () {
      return [this.theme, this.cardStyle ? `style-${this.cardStyle}` : ''];
    },
    computedTitle () {
      if (this.title === null || this.title === undefined) {
        return null;
      }
      if (typeof this.title === 'string') {
        return this.title;
      }
      return this.title.value;
    },
    computedTitleAlignment () {
      if (!this.title) {
        return null;
      }
      if (typeof this.title === 'object') {
        return 'dv-border-box-title-' + this.title.align;
      }
    }
  }
};
</script>
