<template>
  <div
    class="el-card"
    :class="[
      shadow ? 'is-' + shadow + '-shadow' : 'is-always-shadow',
      {'is-inner': inner},
      inner?'':`is-${size}`,
      {'is-net': net},
      {'is-loading': loading},
      {'is-no-border': concise && url && !$slots.footer}
    ]"
  >
    <div class="el-card__loading" v-if="loading" v-loading="loading" :el-loading-text="!concise ? '加载中...' : ''"></div>
    <!-- <div > -->
      <div
        class="el-card__header"
        :style="{height: headerHeight, lineHeight: headerHeight}"
        :class="[inner ? '' :`is-${size}__header`, headerBorder ? 'borders' : '']"
        v-if="$slots.header || header"
      >
        <div class="header-icon" style="" v-if="icon">
          <i :class="icon" />
        </div>
        <slot name="header">{{header}}</slot>
      </div>
      <template v-if="concise">
        <div class="only-concise" v-if="!url && mainText && !subText">
          <slot>{{mainText}}</slot>
        </div>
        <div class="is-concise" v-else>
          <div class="is-concise--wrap">
            <img v-if="url" :src="url" width="32" height="32" class="is-concise--wrap-img" />
            <div class="is-concise--wrap-text">
              <div v-if="mainText">{{mainText}}</div>
              <div v-if="subText">{{subText}}</div>
            </div>
            <div class="el-card__btn" v-if="$slots.conciseBtn">
              <slot name="conciseBtn"></slot>
            </div>
          </div>
        </div>
      </template>
      <slot name="img"></slot>
      <div class="el-card__body" :class="[inner?'':`is-${size}__body`, concise ? 'is-concise__body' : '']" :style="bodyStyle" v-if="$slots.default">
        <slot></slot>
      </div>
      <div class="el-card__footer" v-if="$slots.footer">
        <slot name="footer"></slot>
      </div>
    <!-- </div> -->
  </div>
</template>

<script>
  export default {
    name: 'ElCard',
    props: {
      header: {},
      bodyStyle: {
        type: Object,
        default: () => {}
      },
      shadow: {
        type: String
      },
      url: {
        type: String
      },
      // 是否为简洁模式
      concise: {
        type: Boolean,
        default: false
      },
      mainText: {
        type: String
      },
      subText: {
        type: String
      },
      size: {
        type: String,
        default: 'second'
      },
      // 是否为内部卡片
      inner: {
        type: Boolean,
        default: false
      },
      // 顶部边线
      headerBorder: {
        type: Boolean,
        default: true
      },
      net: {
        type: Boolean,
        default: false
      },
      loading: {
        type: Boolean,
        default: false
      },
      icon: {
        type: String,
        default: ''
      },
      headerHeight: {
        type: String,
        default: '56px'
      }
    }
  };
</script>

