<template>
  <div :class="cardClasses">
    <div class="bml-article-header">
      <image class="bml-article-header-icon" :src="icon" v-if="icon"/>
      <text v-if="header" class="bml-article-header-text">{{header}}</text>
    </div>
    <slot></slot>
    <bml-cell link :title="footer" v-if="footer" />
    <div v-else><slot name="footer"></slot></div>
  </div>
</template>

<script>
const prefixCls = 'bml-article-card';
import bmlCell from './bml-cell.vue';

export default {
  name: 'bml-article-card',
  components:{bmlCell},
  props: {
    first: {
      type: Boolean,
      default: false,
    },
    last: {
      type: Boolean,
      default: false,
    },
    icon: {
      type: String,
      default: ''
    },
    header: {
      type: String,
      default: null
    },
    footer: {
      type: String,
      default: null
    },
    extClass: {
      type: String,
      default: 'bml-article-card'
    }
  },
  computed: {
    cardClasses(){
      return [
        `${prefixCls}`, this.first ? `${prefixCls}-first`: '', this.last ? `${prefixCls}-last`: ''
      ]
    }
  }
}
</script>
<style lang="scss" src="../css/articles.scss"/>
