<template>
  <section class="ai-card" :class="{panel,headerPanel}">
    <ai-bar v-if="!hideHeader" :title="title" v-bind="$attrs">
      <template #title>
        <slot name="title"></slot>
      </template>
      <template #right>
        <slot name="right"></slot>
      </template>
    </ai-bar>
    <div class="ai-card__body" :style="{paddingTop: hideHeader ? '20px' : 0}">
      <slot v-if="$scopedSlots.content" name="content"/>
      <slot v-else/>
    </div>
  </section>
</template>

<script>
  export default {
    name: 'AiCard',
    props: {
      title: {
        type: String
      },
      hideTitle: Boolean,
      panel: Boolean,
      headerPanel: Boolean
    },
    computed: {
      hideHeader: v => v.hideTitle || (v.panel && !v.title)
    }
  }
</script>

<style scoped lang="scss">
.ai-card {
  margin-bottom: 20px;
  padding-bottom: 20px;
  background: #FFFFFF;
  overflow: hidden;
  box-shadow: 0 4px 6px -2px rgba(15, 15, 21, 0.15);
  border-radius: 2px;

  .ai-card__body {
    height: calc(100% - 72px);
    padding: 0 20px 0;
    overflow-y: auto;
  }

  &.panel, &.headerPanel {
    margin-bottom: 0;

    .ai-card__body {
      padding: 12px 16px;
    }

    .aibar {
      margin-bottom: 0 !important;
    }
  }


}
</style>
