<template>
  <div class="sheet-list-cont">
    <span>共{{ total }}张表格</span>
    <div class="sheetlist-wrapper" ref="listRef" @scroll="$emit('loadMoreHandle')">
      <el-col
        :span="6"
        style="margin-bottom: 20px; padding-right: 20px"
        v-for="cell in list"
        :key="cell.ExcelInfoId"
      >
        <el-card class="sheet-item">
          <div slot="header" class="item-top">
            <span class="text_oneLine">{{ cell.ExcelName }}</span>
          </div>
          <img
            :src="cell.ExcelImage"
            alt=""
            class="chart-img"
            :height="imgHeight"
            @click="$emit('detailShowHandle',cell)"
          />
          <div class="item-bottom">
            <span>创建时间: {{ cell.CreateTime.slice(0, 10) }}</span>
            <div>
              <span
                v-if="$parent.isSheetBtnShow('download')"
                class="editsty"
                style="margin-right: 10px"
                @click="$emit('downloadExcel',cell)"
                >下载</span
              >
              <span
                v-if="($parent.sheetDetailInfo.Button && $parent.sheetDetailInfo.Button.DeleteButton && $parent.isSheetBtnShow('del'))"
                class="deletesty"
                @click="$emit('delSheetHandle',{cell, type:'del-list'})"
                >删除</span
              >
            </div>
          </div>
        </el-card>
      </el-col>
    </div>
    <div v-if="!total" class="nodata">
      <tableNoData text="暂无表格"/>
    </div>
  </div>
</template>
<script>
export default {
  props: ['total','list'],
  data() {
    return {
    }
  },
  mounted(){

  },
}
</script>
<style scoped lang='scss'>
  .sheet-list-cont {
    color: #333;
    .el-card .el-card__header,
    .el-card__body {
      padding: 10px;
    }

    .sheetlist-wrapper {
      margin-top: 10px;
      display: flex;
      flex-wrap: wrap;
      max-height: calc(100vh - 143px);
      overflow: hidden;
      overflow-y: auto;
      .drag-cont {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
      }
      .dragShdow {
        box-shadow: 0 1px 8px rgba(64, 158, 255, 0.8);
        opacity: 0.5;
      }
      .sheet-item {
        .item-top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 16px;
          font-weight: 600;
        }
        .chart-img {
          width: 100%;
          height: 196px;
          object-fit: contain !important;
          cursor: pointer;
        }
        .item-bottom {
          margin-top: 10px;
          display: flex;
          justify-content: space-between;
          font-size: 12px;
          color: #666;
          .collected {
            color: #f00;
            cursor: pointer;
          }
          .join_txt {
            color: #409eff;
            cursor: pointer;
          }
        }
      }
    }
    .nodata {
      text-align: center;
    }
  }
</style>
