<template>
  <div class="chart-list-cont">
    <span>共{{ total }}张图表</span>
    <div
      class="chartList-wrapper"
      ref="listRef"
      @scroll="$emit('loadMoreHandle')"
    >
      <el-col
        :span="6"
        style="margin-bottom: 20px; padding-right: 20px"
        v-for="chart in list"
        :key="chart.ChartInfoId"
      >
        <el-card class="sheet-item">
          <div class="chartEn-mark" v-show="chart.IsEnChart" style="top: 0;left: 0;">En</div>
          <div slot="header" class="item-top">
            <span class="text_oneLine">{{ chart.ChartName }}</span>
          </div>
          <img
            :src="chart.ChartImage"
            alt=""
            class="chart-img"
            @click="$emit('detailShowHandle',chart)"
          />
          <div class="item-bottom">
            <span>创建时间: {{ chart.CreateTime.slice(0,10) }}</span>
            <div>
              <span
                class="join_txt"
                @click="$emit('addMychartHandle',chart)"
              >
                <img
                  :src="$icons.chart_join_ico"
                  alt=""
                  style="width: 13px; height: 12px; vertical-align: middle"
                />
                加入我的图库
              </span>
            </div>
          </div>
        </el-card>
      </el-col>
    </div>
    <div v-if="!total" class="nodata">
      <img
        src="~@/assets/img/data_m/table_no.png"
        alt=""
        style="
          display: block;
          width: 140px;
          height: 148px;
          margin: 10% auto 0;
        "
      />
      暂无图表
    </div>
  </div>
</template>
<script>
export default {
  props: ['total','list'],
  data() {
    return {

    }
  },
  mounted(){

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

  .chartList-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 {
      position: relative;
      .item-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 16px;
        font-weight: 600;
      }
      .chart-img {
        width: 100%;
        height: 230px;
        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>
