<template>
  <div class="display">
    <div class="search">
      <SearchBar
        :options="options"
        :selectValue="selectValue"
        :keyword="keyword"
      />
    </div>
    <div class="display-group">
      <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>
    </div>

    <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 SearchBar from "@/components/SearchBar";
import DisplayCard from "@/components/DisplayCard";
export default {
  name: "Display",
  components: { SearchBar, DisplayCard },
  data() {
    return {
      options: [
        {
          value: "name",
          label: "文物名称",
        },
      ],
      selectValue: "",
      keyword: "",
      exhibitions: [
        {
          imgUrl: "",
          title: "贵博新展 | 清平乐——《韩琦楷书信札》及宋代文人风韵展",
          content:
            " 展出时间：2022年01月21日-2022年4月10日 展出地点：贵州省博物馆负一楼6号展厅",
        },
        {
          imgUrl: "",
          title: "贵博新展 | 清平乐——《韩琦楷书信札》及宋代文人风韵展",
          content:
            " 展出时间：2022年01月21日-2022年4月10日 展出地点：贵州省博物馆负一楼6号展厅",
        },
        {
          imgUrl: "",
          title: "贵博新展 | 清平乐——《韩琦楷书信札》及宋代文人风韵展",
          content:
            " 展出时间：2022年01月21日-2022年4月10日 展出地点：贵州省博物馆负一楼6号展厅",
        },
        {
          imgUrl: "",
          title: "贵博新展 | 清平乐——《韩琦楷书信札》及宋代文人风韵展",
          content:
            " 展出时间：2022年01月21日-2022年4月10日 展出地点：贵州省博物馆负一楼6号展厅",
        },
        {
          imgUrl: "",
          title: "贵博新展 | 清平乐——《韩琦楷书信札》及宋代文人风韵展",
          content:
            " 展出时间：2022年01月21日-2022年4月10日 展出地点：贵州省博物馆负一楼6号展厅",
        },
        {
          imgUrl: "",
          title: "贵博新展 | 清平乐——《韩琦楷书信札》及宋代文人风韵展",
          content:
            " 展出时间：2022年01月21日-2022年4月10日 展出地点：贵州省博物馆负一楼6号展厅",
        },
        {
          imgUrl: "",
          title: "贵博新展 | 清平乐——《韩琦楷书信札》及宋代文人风韵展",
          content:
            " 展出时间：2022年01月21日-2022年4月10日 展出地点：贵州省博物馆负一楼6号展厅",
        },
        {
          imgUrl: "",
          title: "贵博新展 | 清平乐——《韩琦楷书信札》及宋代文人风韵展",
          content:
            " 展出时间：2022年01月21日-2022年4月10日 展出地点：贵州省博物馆负一楼6号展厅",
        },
        {
          imgUrl: "",
          title: "贵博新展 | 清平乐——《韩琦楷书信札》及宋代文人风韵展",
          content:
            " 展出时间：2022年01月21日-2022年4月10日 展出地点：贵州省博物馆负一楼6号展厅",
        },
        {
          imgUrl: "",
          title: "贵博新展 | 清平乐——《韩琦楷书信札》及宋代文人风韵展",
          content:
            " 展出时间：2022年01月21日-2022年4月10日 展出地点：贵州省博物馆负一楼6号展厅",
        },
        {
          imgUrl: "",
          title: "贵博新展 | 清平乐——《韩琦楷书信札》及宋代文人风韵展",
          content:
            " 展出时间：2022年01月21日-2022年4月10日 展出地点：贵州省博物馆负一楼6号展厅",
        },
        {
          imgUrl: "",
          title: "贵博新展 | 清平乐——《韩琦楷书信札》及宋代文人风韵展",
          content:
            " 展出时间：2022年01月21日-2022年4月10日 展出地点：贵州省博物馆负一楼6号展厅",
        },
      ],
      size: 12,
      current: 1,
      total: 1000,
    };
  },
  methods: {
    handleSizeChange(value) {
      console.log("handleSizeChange", value);
    },
    handleCurrentChange(value) {
      console.log("handleCurrentChange", value);
    },
    handleClick() {
      this.$router.push({
        path: "display/1",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.display {
  margin: auto;
  width: 1200px;
  .search {
    // padding: 0 24%;
  }
  .display-group {
    margin-top: 24px;
    // padding: 0 16%;
  }
  .pagination {
    margin-top: 24px;
    display: flex;
    justify-content: center;
  }
}
</style>