<template>
  <div class="card">
    <div v-if="hasHeader" class="card-header with-border">
      <slot name="header">
        <span class="card-title">
          <i v-if="icon" :class="icon" />
          {{ title }}
        </span>
        <div class="card-tools pull-right">
          <slot name="header-tools" />
        </div>
      </slot>
    </div>
    <!-- /.box-header -->
    <div class="card-body">
      <slot name="body" />
      <slot />
    </div>
    <!-- /.box-body -->
    <div v-if="hasFooter" class="card-footer clearfix">
      <slot name="footer" />
    </div>
    <!-- /.box-footer -->
    <div v-show="loading" class="overlay">
      <i class="el-icon-loading" />
    </div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    loading: {
      type: Boolean,
      default: false
    },
    hasFooter: {
      type: Boolean,
      default: false
    },
    hasHeader: {
      type: Boolean,
      default: true
    },
    icon: {
      type: String,
      default: ''
    }
  }
}
</script>

<style scoped>
.box .box-header {
  line-height: 32px;
  vertical-align: middle;
  padding: 5px 10px;
}
.box .box-header .box-title {
  font-size: 16px;
}
.box-title i {
  margin-right: 5px;
  color: #606266;
}
</style>
