<template>
  <el-card :body-style="bodyStyle" class="ms-card" :shadow="shadow">
    <template v-if="$slots.header || header" slot="header">
      <slot name="header">{{ header }}</slot>
    </template>
    <el-skeleton
      v-if="skeleton"
      :animated="true"
      :loading="skeletonShow"
      :rows="skeletonRows"
    >
      <template #default>
        <slot class="ms-card-transition"></slot>
      </template>
    </el-skeleton>
    <slot v-else class="ms-card-transition"></slot>
  </el-card>
</template>

<script>
  export default {
    beforeRouteLeave(to, from, next) {
      clearInterval(this.timer)
      next()
    },
    props: {
      header: {
        type: String,
        default: '',
      },
      bodyStyle: {
        type: Object,
        default: () => ({}),
      },
      shadow: {
        type: String,
        default: '',
      },
      skeleton: {
        type: Boolean,
        default: false,
      },
      skeletonRows: {
        type: Number,
        default: 4, //显示的数量会比传入的数量多 1
      },
    },
    data() {
      return {
        skeletonShow: true,
        timer: null,
      }
    },
    mounted() {
      this.timer = setTimeout(() => {
        this.skeletonShow = false
      }, 500)
    },
  }
</script>

<style lang="scss" scoped>
  .ms-card {
    &-transition {
      transition: $base-transition;
    }
  }
</style>
