<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>
</template>

<script>
import DisplayCard from "@/components/DisplayCard";
import CulturalRelicCard from "@/components/CulturalRelicCard";
export default {
  name: "Footprint",
  components: {
    DisplayCard,
    CulturalRelicCard,
  },
  props: {
    relateRelics: {
      type: Array,
      default: () => [],
    },
    exhibitions: {
      type: Array,
      default: () => [],
    },
  },
};
</script>

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