<template>
  <div class="personal">
    <el-tabs :tab-position="'left'" type="card">
      <el-tab-pane label="我的点赞">
        <Like
          :exhibitions="exhibitions"
          :relateRelics="relateRelics"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange"
        />
      </el-tab-pane>
      <el-tab-pane label="我的收藏">
        <Collection
          :exhibitions="exhibitions"
          :relateRelics="relateRelics"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange"
        />
      </el-tab-pane>
      <el-tab-pane label="浏览记录">
        <Footprint
          :exhibitions="exhibitions"
          :relateRelics="relateRelics"
          @handleSizeChange="handleSizeChange"
          @handleCurrentChange="handleCurrentChange"
        />
      </el-tab-pane>
      <el-tab-pane label="个人信息"><Info /></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { relateRelics, exhibitions } from "@/mock/mock";
import Like from "./components/Like.vue";
import Collection from "./components/Collection.vue";
import Footprint from "./components/Collection.vue";
import Info from "./components/Info.vue";

export default {
  components: {
    Like,
    Collection,
    Footprint,
    Info,
  },
  name: "Personal",
  data() {
    return {
      relateRelics: relateRelics,
      exhibitions: exhibitions,
    };
  },
  methods: {
    handleSizeChange(value) {
      console.log("handleSizeChange", value);
    },
    handleCurrentChange(value) {
      console.log("handleCurrentChange", value);
    },
  },
};
</script>

<style lang='scss' scoped>
.personal {
  width: 1200px;
  margin: auto;
}
</style>