<template>
  <Layout-Child>
     <div v-if="showSkelton" class=' pl-5 pr-5 mt-6 overflow-y-scroll h-screen pb-48'>
        <SkeletonNftDetail  />
     </div>
     <div v-else class=' pl-5 pr-5 mt-6 overflow-y-scroll h-screen pb-48'>
        <div class=" h-52 ">
            <img v-if="transferDetail.cover" :src="transferDetail.cover" alt="" class=" max-h-full max-w-full mx-auto">
            <img v-else src="/img/cover.png" alt="" class=" max-h-full max-w-full mx-auto">
        </div>
        <!-- <div class=" h-48 mb-5 bg-font-light-black bg-opacity-70 rounded pt-2 pb-2 pr-8 pl-8 text-font-dark-blue" v-else>
            <div class=" flex items-center">
                <div class=" w-2/6 h-44 mr-4 bg-imgbox">
                  <img  v-if="transferDetail.cover" :src="transferDetail.cover" alt="" class="bg-img rounded">  
                  <img v-else src="/img/cover.png" alt="" class="bg-img rounded">
                </div>
                <div class="flex-1 ">
                    <div class=" text-white text-sm">{{transferDetail.nftName || 'NFT名称'}}</div>
                    <div class="flex h-8">
                        <div class=" mr-3 text-gray-400">类型</div>
                        <div>{{transferDetail.category}}</div>
                    </div>
                    <div class="flex h-8">
                        <div class=" mr-3 text-gray-400">状态</div>
                        <div>已完成</div>
                    </div>
                    <div class="flex h-8">>
                        <div>{{transferDetail.createDate && transferDetail.createDate.substring(0,16)}}</div>
                    </div>
                </div>
            </div>
        </div> -->
        <div class=" h-20  mt-3 border-b border-font-gray border-opacity-25">
            <div class=" text-white text-sm">{{transferDetail.nftName || 'NFT名称'}}</div>
            <div class=" text-font-dark-blue flex justify-between mt-4 text-sm">
                <div>
                    NFT类型： <span class="text-white">{{transferDetail.category}}</span>
                </div>
                <div>
                    发行人： <span class="text-white">{{transferDetail.publisher}}</span>
                </div>
            </div>
        </div>
        <div class=" h-20 flex items-center text-font-dark-blue text-sm">
            <div class=" rounded-full w-10 h-10">
                <img v-if="transferDetail.fromAvatar" :src="transferDetail.fromAvatar" alt=""  class=" rounded-full w-10 h-10 ">
                <img v-else src="/img/mokeImg/avatar.png" alt=""  class=" rounded-full w-10 h-10 ">
            </div>
            <div class=" ml-3 flex-1">
                <div class="flex">
                    <div class=" mr-2 text-white">{{transferDetail.fromNickname || '转出人姓名'}}</div>
                    <div class=" w-12 bg-font-light-black text-center leading-5 text-xs rounded-xl">转出</div>
                </div>
                <div class=" w-64 overflow-hidden overflow-ellipsis whitespace-nowrap">{{transferDetail.fromWallet || '转出人地址'}}</div>
            </div>
            <div>
                <img src="@/assets/icons/copy.png" class="copyBtn max-h-5" alt="" @click="handleClickCopy(transferDetail.fromWallet)">
            </div>
        </div>
        <div class=" h-20 flex items-center text-font-dark-blue border-b border-font-gray border-opacity-25 text-sm">
            <div class=" rounded-full w-10 h-10 ">
                <img v-if="transferDetail.toAvatar" :src="transferDetail.toAvatar" alt=""  class=" rounded-full w-10 h-10 ">
                <img v-else src="/img/mokeImg/avatar.png" alt=""  class=" rounded-full w-10 h-10 ">
            </div>
            <div class=" ml-3 flex-1">
                <div class="flex">
                    <div class=" mr-2 text-white">{{transferDetail.toNickname || '转入人姓名'}}</div>
                    <div class="w-12 bg-font-light-black text-center text-xs leading-5 rounded-xl">接收</div>
                </div>
                <div class=" w-64 overflow-hidden overflow-ellipsis whitespace-nowrap">{{transferDetail.toWallet || '转入人地址'}}</div>
            </div>
            <div>
                <img src="@/assets/icons/copy.png" class="copyBtn max-h-5" alt="" @click="handleClickCopy(transferDetail.toWallet)">
            </div>
        </div>
        <div class=" text-white">
          <app-cell
            text="NFT编号"
            :value="transferDetail.nftId || 'nftId'"
            boxType="border"
          ></app-cell>
          <app-cell
            text="NFT HASH"
            :name="transferDetail.nftHash"
            boxType="border"
            type="showText"
            :needCopy="true"
          ></app-cell>
          <app-cell
            text="转让状态"
            value="已完成"
            boxType="border"
          ></app-cell>
          <app-cell
            text="转让时间"
            :value="transferDetail.createDate"
            boxType="border"
          ></app-cell>
          <app-cell
            text="转让数量"
            :value="1"
            boxType="border"
          ></app-cell>
          <app-cell
            text="手续费"
            value="暂无"
            boxType="border"
          ></app-cell>
        </div>
     </div>
  </Layout-Child>
</template>

<script lang="ts">
import Vue from "vue"
import ClipboardJS from "clipboard";
import SkeletonNftDetail from "@/components/common/Skeleton/SkeletonNftDetail.vue";
export default Vue.extend({
    data(){
        return {
            transferDetail:{},
            showSkelton: true
        }
    },
    components:{
        'Layout-Child':()=>import('@/layout/Child.vue'),
        "app-cell": () => import("@/components/common/Cell.vue"),
        SkeletonNftDetail
    },
    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("复制失败~");
          });
          
        },
    },
    async mounted(){
        this.transferDetail = await this.$service.nftService.getTransferDetail(this.$route.params.id)
        this.showSkelton = false
    },
})
</script>

<style lang="less" scoped>
.bg-imgbox {
    position: relative
}
.bg-img {
    max-width: 100%;
    max-height: 100%;
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
</style>