<template>
  <div class="like">
    <el-tabs :tab-position="'top'" v-model="activeName">
      <el-tab-pane
        :key="tab.name"
        v-for="tab in Tabs"
        :label="tab.title"
        :name="tab.name"
      >
        <el-row :gutter="20">
          <el-col
            :span="8"
            v-for="(item, index) in list.records"
            :key="index"
            @click.native="handleClick(item)"
          >
            <Card
              :title="item.title"
              :url="item.faceImagePressUrl || item.faceImageUrl"
          /></el-col>
        </el-row>
        <el-empty
          description="暂无数据"
          v-if="list.records.length == 0"
        ></el-empty>
      </el-tab-pane>
    </el-tabs>
    <div class="pagination" v-if="list.records.length > 0">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="Number(list.current)"
        :page-sizes="[10, 20, 50]"
        :page-size="Number(list.size)"
        layout="total, sizes, prev, pager, next, jumper"
        :total="Number(list.total)"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import Card from "./Card";
import { mapGetters } from "vuex";
import { getLikeList } from "@/api/user";
export default {
  name: "Like",
  components: {
    Card,
    // CulturalRelicCard,
  },
  props: {
    relateRelics: {
      type: Array,
      default: () => [],
    },
    exhibitions: {
      type: Array,
      default: () => [],
    },
  },
  // watch: {
  //   activeName(type) {
  //     console.log('type',type);
  //     this.loadList(type);
  //   },
  // },
  data() {
    return {
      Tabs: [
        {
          name: "biz_cultural_relic",
          title: "文物",
        },
        {
          name: "biz_exhibition",
          title: "展览",
        },
      ],
      activeName: "biz_cultural_relic",
      list: {
        records: {},
        size: 10,
        current: 1,
        total: 0,
      },
    };
  },
  watch: {
    activeName(name) {
      // 重置current
      this.list.current = 1;
      this.loadList(name);
    },
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  mounted() {
    let type = "biz_cultural_relic";
    if (this.userInfo && this.userInfo.username && this.userInfo.nickName) {
      this.loadList(type);
    }
  },
  methods: {
    async loadList(type) {
      // biz_cultural_relic 文物  biz_exhibition 展览
      const params = {
        sourceType: type, //默认先加载文物
        limit: this.list.size,
        page: this.list.current,
      };
      let res = await getLikeList(params);
      this.list = res.data;
    },
    handleSizeChange(size) {
      this.list.size = size;
      this.loadList(this.activeName);
    },
    handleCurrentChange(current) {
      this.list.current = current;
      this.loadList(this.activeName);
    },
    handleClick(item) {
      switch (this.activeName) {
        case "biz_cultural_relic":
          this.$router.push({
            path: "culturalRelic/" + item.sourceId,
          });
          break;
        case "biz_exhibition":
          this.$router.push({
            path: "display/" + item.sourceId,
          });
          break;
      }
    },
  },
};
</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;
      }
    }
  }
}
.pagination {
  margin: 20px;
}
</style>