<template>
  <div class="card-container">
    <!-- 列表区域-->
    <div class="card-list">
      <el-card
        v-loading="loading"
        class="card"
        v-for="(item, index) in data"
        :key="index"
        :body-style="{ padding: '0px' }"
      >
        <slot :data="item"></slot>
      </el-card>
    </div>
    <!-- 分页区域 -->
    <card-page ref="cardPage"></card-page>
  </div>
</template>

<script>
import CardPage from './card-page';

export default {
  name: 'comCard',
  provide() {
    return {
      comCard: this,
    };
  },
  components: {
    CardPage, //分页
  },
  props: {
    data: {
      type: Array,
      default: () => [],
      require: true,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    page: {
      type: Object,
      default() {
        return {};
      },
    },
  },
};
</script>

<style></style>
