<template>
  <Layout-Child>
      <van-action-sheet v-model="showAction" title=" " :closeable='false'>
        <div class="content bg-font-light-black py-10 mt-8">
            <div class=" w-11/12 mx-auto flex flex-col justify-center items-center">
                <div>我的地址</div>
                <div class=" p-2 ">
                    <img :src="qrcode" class=' w-full'>
                </div>

                <div class='text-xs pt-8'>
                    {{getUserInfo.wallet}}
                </div>
                <div>
                    <app-btn text='复制地址' class="copyBtn bg-font-blue" @click.native="copyAddr(getUserInfo.wallet)"></app-btn>
                </div>
            </div>
        </div>
    </van-action-sheet>
    <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 @click='openAction'> 
            <img :src="qrcode" class='w-14'>
          </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"
        :defaultIndex='defaultIndex'
      ></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 class='scroll-padding'></div>
        </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";
import { ActionSheet } from 'vant';
import ClipboardJS from "clipboard";


Vue.use(ActionSheet);
export default Vue.extend({
  data() {
    return {
      categoryTypes: [] as any[],
      listData: {},
      currentCategory: 1,
      balance: 0,
      qrcode:'',
      srcData:'' as any,
      showAction:false,
      defaultIndex:0
    };
  },
  async created() {
    const cates = await this.$service.nftService.getCategory()
    if(this.$route.query.category){
      const index =  await cates.findIndex(i=>{
      return i.categoryName == this.$route.query.category
     })
     
      this.defaultIndex = index
    }
     this.categoryTypes = cates
  },
  async mounted() {
    let data = await this.$service.nftService.getMyList();
    this.qrcode = data.qrCode;
    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;
        });
    },

    openAction(){
      this.showAction = true;
    },
    copyAddr(addr:any){
      // console.log(2222)
      let clipboard = new ClipboardJS('.copyBtn', {
        text: function() {
          return addr.toString();
        }
      });
      clipboard.on("success", (e)=>{
        this.$toast("复制成功~");
        e.clearSelection();
      });

      clipboard.on("error", ()=>{
        this.$toast("复制失败~");
      });
            
            // this.$util.cliboard(addr);
            // this.$toast("复制成功");
        },
        indexOnchange(id:any){
          console.log(id);
          
        },
    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"),
      'app-btn':()=>import('@/components/common/Btn.vue'),
  },
});
</script>
