<template>
  <!--  overflow-hidden -->
  <v-card
    class="elevation-5"
    :class="{'elevation-0': noElevation, 'px-5': px5}"
    :min-height="minHeight"
    style="overflow: hidden;"
    :outlined="outlined"
  >
    <template v-if="noTitle">
      <v-card-title style="color: #1976D2; font-weight: 600;" v-if="$scopedSlots.autoTitle">
        <slot name="autoTitle"></slot>
      </v-card-title>

    </template>
    <template v-else>
      <v-card-title style="color: #1976D2; font-weight: 600;">
        <div class="d-flex justify-space-between" style="width: 100%;">
          <div class="over">{{ title }}</div>
          <slot name="title"></slot>
        </div>
      </v-card-title>
      <v-card-subtitle>
        <slot name="subtitle"></slot>
      </v-card-subtitle>
      <v-divider/>
    </template>
    <slot name="header"></slot>
    <div :style="`${relativeBody ? 'position: relative;' : ''}overflow: hidden !important;font-size: 16px;${bodyStyle}`">
      <slot></slot>
    </div>
    <slot name="footer"></slot>

  </v-card>
</template>

<script>
export default {
  name: 'm-card',
  props: {
    relativeBody: {
      type: Boolean,
      default: false
    },
    minHeight: {
      type: [Number, String],
      default: 300
    },
    title: {
      type: String,
      default: '标题'
    },
    bodyStyle: {
      type: String,
      default: ''
    },
    noElevation: {
      type: Boolean,
      default: false
    },
    px5: {
      type: Boolean,
      default: true
    },
    noTitle: {
      type: Boolean,
      default: false
    },
    outlined: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style lang="scss" scoped>
.over {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
