<template>
  <div class="display">
    <div class="search">
      <SearchBar
        :options="options"
        :selectValue="selectValue"
        :keyword="keyword"
      />
      <div class="types">
        <el-button  v-for="(item, index) in buttons" :key="index" type="text" @click.native="handleClickType(item.value)">{{
          item.label
        }}</el-button>
      </div>
    </div>
    <ALL v-if="currentType === 'all'" @handleClick="handleClickCard" />
    <Area v-if="currentType === 'area'" @handleClick="handleClickCard" />
    <ThreeDimension
      v-if="currentType === '3d'"
      @handleClick="handleClickCard"
    />
    <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 ALL from "./components/All";
import Area from "./components/Area";
import ThreeDimension from "./components/ThreeDimension";
export default {
  name: "CulturalRelic",
  components: { SearchBar, ALL, Area, ThreeDimension },
  data() {
    return {
      buttons: [
        {
          label: "所有",
          value: "all",
        },
        {
          label: "区域",
          value: "area",
        },
        {
          label: "3D",
          value: "3d",
        },
      ],
      options: [
        {
          value: "name",
          label: "文物名称",
        },
      ],
      selectValue: "",
      keyword: "",

      size: 12,
      current: 1,
      total: 1000,
      currentType: "all",
    };
  },
  methods: {
    handleSizeChange(value) {
      console.log("handleSizeChange", value);
    },
    handleCurrentChange(value) {
      console.log("handleCurrentChange", value);
    },
    handleClickType(type) {
      console.log("type", type);
      this.currentType = type;
    },
    handleClickCard(value) {
      console.log("接受到value", value);
      this.$router.push({
        path: "culturalRelic/1",
      });
    },
  },
};
</script>

<style lang="scss" scoped>
$text-indent: 16px;
.display {
  margin: auto;
  width: 1200px;
  .search {
    // padding: 0 24%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 32px;
    .types {
      width: 160px;
      margin-left: 16px;
    }
  }

  .pagination {
    margin-top: 24px;
    display: flex;
    justify-content: center;
  }
}
</style>