<template>
  <div class="like">
    <el-tabs :tab-position="'top'">
      <el-tab-pane label="文物">
        <div class="display-group">
          <div v-for="(item, index) in relateRelics" :key="index">
            <CulturalRelicCard
              :title="item.title"
              :content="item.content"
              :time="item.time"
            />
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="展览">
        <el-row :gutter="16">
          <el-col
            :span="6"
            v-for="(item, index) in exhibitions"
            :key="index"
            @click.native="handleClick"
          >
            <DisplayCard :title="item.title" :content="item.content" />
          </el-col> </el-row
      ></el-tab-pane>
    </el-tabs>
    <div class="pagination">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="current"
        :page-sizes="[12, 28, 40]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import DisplayCard from "@/components/DisplayCard";
import CulturalRelicCard from "@/components/CulturalRelicCard";
export default {
  name: "Collection",
  components: {
    DisplayCard,
    CulturalRelicCard,
  },
  props: {
    relateRelics: {
      type: Array,
      default: () => [],
    },
    exhibitions: {
      type: Array,
      default: () => [],
    },
    size: {
      type: Number,
      default: 10,
    },
    current: {
      type: Number,
      default: 1,
    },
    total: {
      type: Number,
      default: 100,
    },
  },
  methods:{
     handleSizeChange(value) {
      console.log("handleSizeChange", value);
      this.$emit('handleSizeChange',value)
    },
    handleCurrentChange(value) {
      console.log("handleCurrentChange", value);
      this.$emit('handleCurrentChange',value)
    },
  }
};
</script>

<style lang="scss" scoped>
.like {
  padding: 0 32px;
  .display-group {
    margin-top: 24px;
    display: flex;
    flex-flow: row wrap;

    .display-item {
      width: 330px;
      margin-bottom: 32px;
      border-radius: 16px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      padding: 0 0 32px 0;
      background-color: #fff;
      margin-right: 10px;
      cursor: pointer;
      img {
        border-radius: 16px 16px 0 0;
      }
      .display-desc {
        padding: 0 16px;
        .desc-content {
          text-indent: 16px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          display: block;
        }
      }
      .display-source {
        margin-top: 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 16px;
      }
    }
  }
}
</style>