<template>
  <Layout-Child>
     <div class=' pl-5 pr-5 mt-6 overflow-y-scroll h-screen pb-48'>
        <div class=" h-52 ">
            <!-- <img src="/img/cover.png" alt="" class=" max-h-full max-w-full mx-auto"> -->
            <app-collectionCard :colletionData="{}"></app-collectionCard>
        </div>
        <div class=" h-20  mt-3 border-b border-font-gray border-opacity-25">
            <div class=" text-white">nft名称</div>
            <div class=" text-font-dark-blue flex justify-between mt-4">
                <div>
                    NFT类型： <span class="text-white">插画</span>
                </div>
                <div>
                    创作者： <span class="text-white">士大夫但是</span>
                </div>
            </div>
        </div>
        <div class=" h-20 flex items-center text-font-dark-blue ">
            <div class=" rounded-full w-10 h-10">
                <img src="/img/mokeImg/avatar.png" alt="">
            </div>
            <div class=" ml-3 flex-1">
                <div class="flex">
                    <div class=" mr-2 text-white">青木</div>
                    <div class=" w-12 bg-font-light-black text-center leading-6 text-sm rounded-xl">转出</div>
                </div>
                <div>4444444</div>
            </div>
            <div>
                <img src="@/assets/icons/copy.png" class="copyBtn max-h-5" alt="" @click="handleClickCopy('333')">
            </div>
        </div>
        <div class=" h-20 flex items-center text-font-dark-blue border-b border-font-gray border-opacity-25">
            <div class=" rounded-full w-10 h-10 ">
                <img src="/img/mokeImg/avatar.png" alt="">
            </div>
            <div class=" ml-3 flex-1">
                <div class="flex">
                    <div class=" mr-2 text-white">青木</div>
                    <div class="w-12 bg-font-light-black text-center text-sm leading-6 rounded-xl">接收</div>
                </div>
                <div>4444444</div>
            </div>
            <div>
                <img src="@/assets/icons/copy.png" class="copyBtn max-h-5" alt="" @click="handleClickCopy('444')">
            </div>
        </div>
        <div class=" text-white">
          <app-cell
            text="NFT编号"
            :value="1111"
            boxType="border"
          ></app-cell>
          <app-cell
            text="NFT HASH"
            :name="'dfgrgrttttttttttttttttttttttttttttttttttttttttttttg'"
            boxType="border"
            type="showText"
            :needCopy="true"
          ></app-cell>
          <app-cell
            text="转让状态"
            :value="1111"
            boxType="border"
          ></app-cell>
          <app-cell
            text="转让时间"
            :value="1111"
            boxType="border"
          ></app-cell>
          <app-cell
            text="转让数量"
            :value="1111"
            boxType="border"
          ></app-cell>
          <app-cell
            text="手续费"
            :value="1111"
            boxType="border"
          ></app-cell>
        </div>
     </div>
  </Layout-Child>
</template>

<script lang="ts">
import Vue from "vue"
import ClipboardJS from "clipboard";
export default Vue.extend({
    data(){
        return {
        }
    },
    components:{
        'Layout-Child':()=>import('@/layout/Child.vue'),
        "app-cell": () => import("@/components/common/Cell.vue"),
        "app-collectionCard": () => import("@/components/CollectionCard.vue"),
    },
    methods:{
        async handleClickCopy(text: string | number) {
          let clipboard = new ClipboardJS('.copyBtn', {
              text: function() {
                      return text.toString();
                    }
              });
          clipboard.on("success", (e)=>{
            this.$toast("复制成功~");
            e.clearSelection();
          });
    
          clipboard.on("error", ()=>{
            this.$toast("复制失败~");
          });
          
        },
    }
})
</script>

<style lang="less" scoped>

</style>