<template>
  <div class="el-card-main" :style="'height:' + height + 'px'">
    <el-row :gutter="10" class="el-card-content">
      <div v-if="result.rows.length === 0">
        <el-empty description="暂时无数据"></el-empty>
      </div>
      <el-col :span="span" v-for="(o, index) in result.rows" :key="index" style="margin-bottom: 10px">
        <el-card :body-style="{ padding: '0px' }" shadow="hover">
          <div @click="rowClick(o)">
            <slot :row="o"></slot>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <div class="el-card-page">
      <el-pagination
        :page-size="20"
        :total="pageConfig.total"
        :current-page="pageConfig.page"
        :background="true"
        :page-count="pageCount"
        @current-change="currentChange"
        @prev-click="currentChange"
        @next-click="currentChange"
        layout="prev, pager, next, total"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "CmsCardPage",
  data() {
    return {
      currentDate: new Date(),
      pageConfig: {
        total: 0,
        page: 1,
        rows: 18,
      },
      result: {
        rows: [],
        extraMap: {}
      }
    };
  },
  created() {
    this.loadPageData();
  },
  methods: {
    currentChange(page) {
      this.pageConfig.page = page;
      this.loadPageData();
    },
    rowClick(o) {
      this.$emit('row-click', o);
    },
    loadPageData() {
      if (typeof this.requestCall === 'function') {
        this.requestCall({ ...this.pageConfig, ...this.extraData }).then(result => {
          if (result && result.code === 200) {
            this.result = Object.assign({}, this.result, result || {});
            this.pageConfig.total = result.total;
          } else this.$messageTips.error(result.msg);
        })
      }
      if (Array.isArray(this.requestCall)) {
        this.result.rows = this.requestCall;
      }
    }
  },
  computed: {
    pageCount() {
      return parseInt((this.pageConfig.total + this.pageConfig.page - 1) / this.pageConfig.pageSize)
    }
  },
  props: {
    value: [ String, Number, Boolean ],
    extraData: {
      type: Object,
      default: () => {
        return {}
      }
    },
    requestCall: {
      type: [ Array, Function, Number, String ],
      default: []
    },
    span: {
      type: Number,
      default: 4,
    },
    height: {
      type: Number,
      default: 300
    }
  }
}
</script>

<style lang="scss">
.image {
  width: 100%;
  display: block;
}

.el-card-main {
  padding: 10px 0 10px 10px;
  display: flex;
  flex-direction: column;

  .el-card-content {
    flex: 1;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .el-card-page {
    background-color: #ebeff4;
    padding: 5px 0;
    text-align: right;
  }

  .el-card:hover {
    cursor: pointer;
    border: 1px solid #6610f2;
  }

  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }

  .clearfix:after {
    clear: both
  }
}
</style>