<template>
  <Layout-Child>
    <div class="nft-cardBox w-11/12 mx-auto mt-6">
      <div
        class="nft-card w-full bg-cardBG2 bg-cover bg-no-repeat text-font-white px-5 py-3 rounded-md"
      >
        <div class="w-full flex items-start justify-between mb-12">
          <div>我的NFT(个）</div>
          <div></div>
        </div>
        <div class="flex items-end justify-between flex-wrap">
          <div class="text-3xl">{{ balance }}</div>
          <div class="text-xs">{{ getUserInfo.wallet }}</div>
        </div>
      </div>
    </div>
    <div class="container-view w-11/12 mx-auto">
      <app-scrollbar
        :list="categoryTypes"
        @tabChange="getDataByCategory"
      ></app-scrollbar>
      <div class="myNFT-list-scroll">
        <div v-if="listData.length > 0">
          <app-collectionCard
            v-for="i in listData"
            :key="i.id"
            class="mt-3"
            :colletionData="i"
            @click.native="goDetail(i.id)"
          ></app-collectionCard>
        </div>

        <div v-else class="mt-12">
          <van-empty image="/img/empty.png" description="没有找到更多内容" />
        </div>
      </div>
    </div>
  </Layout-Child>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
  data() {
    return {
      categoryTypes: [] as any[],
      listData: {},
      currentCategory: 1,
      balance: 0,
    };
  },
  async created() {
    this.categoryTypes = await this.$service.nftService.getCategory();
  },
  async mounted() {
    let data = await this.$service.nftService.getMyList();
    this.balance = data.size;
    await this.$service.nftService
      .getMyList(this.currentCategory)
      .then((res) => {
        this.listData = res.list;
      });
  },
  computed: {
    getUserInfo() {
      return this.$util.userMsg.getUserMsg();
    },
  },
  methods: {
    async getDataByCategory(item: any) {
      this.currentCategory = item.data.id;
      await this.$service.nftService
        .getMyList(this.currentCategory)
        .then((res) => {
          this.listData = res.list;
        });
    },
    goDetail(id: any) {
      this.$router.push({ name: "Nftdetail", params: { id: id } });
    },
  },
  components: {
    "Layout-Child": () => import("@/layout/Child.vue"),
    "app-scrollbar": () => import("@/components/common/ScrollBar.vue"),
    "app-collectionCard": () => import("@/components/CollectionCard.vue"),
  },
});
</script>
