<template>
  <Layout-Child class='page-scroll'>
    <!-- <div  v-if="loading">
      loading....
    </div> -->
    <div class="w-11/12 mx-auto mt-6 text-font-white">
    <SkeletonNftDetail v-if="showSkelton"/>
      <div v-if="$route.query.officia">
        <div class='h-80 '>
          <img :src="nftData" alt="">
        </div>
        <div>
          {{nftData.name}}
        </div>
        <div class='flex text-sm text-font-dark-blue justify-between my-3'>
          <div>全球限量发行{{nftData.publishCount}}</div>
          <div>已领取 <i class=" text-font-blue">{{nftData.receiveCount}}</i> 个</div>
        </div>
        <div class="border border-font-dark-blue  border-opacity-50 rounded-lg text-sm p-6 text-font-dark-blue ">
          纪念版NFT只能进行转让，不能进行交易。最终解释权归平台所有。
        </div>

      </div>
      <app-collectionCard :colletionData='nftData' v-else></app-collectionCard>
      <div class="app-icons mx-auto grid grid-cols-4 my-6" v-if="isOwner">
        <div
          v-for="(i, index) in apps"
          :key="index"
          class="flex justify-center"
        >
          <div class="flex flex-col items-center">
            <div class="flex content-center">
              <!-- <app-icon
                @click.native="appOnclick(i.action)"
                :name="i.icon"
                size="24px"
                class="p-5 bg-table-light-blue shadow-md rounded-full"
              ></app-icon> --> 
              <img :src="i.icon" alt="">
            </div>
            <div class="text-xs mt-3 text-font-white">
              {{ i.text }}
            </div>
          </div>
        </div>
      </div>
      <div
        class="
          text-xs
          w-full
          flex
          border-b border-font-dark-blue border-opacity-50
          items-center
        "
      >
        <div class="py-3 pr-4">
          <img :src="nftData.avatar?nftData.avatar:'/img/mokeImg/avatar.png'" class="h-12 w-12 rounded-full" />
        </div>
        <div>
          <div class="flex items-center">
            <div class="pr-3 text-base">{{nftData.publisher?nftData.publisher:'匿名'}}</div>
            <app-tag text="发行人" :id="1" class="bg-font-dark-blue"></app-tag>
          </div>
          <div class="mt-1 text-font-dark-blue">{{nftData.wallet}}</div>
        </div>
      </div>
      <div class="py-3">
        <div class="text-font-dark-blue">NFT信息</div>
        <app-cell
          v-if="!$route.query.officia" 
          text="编号"
          :value="nftData.nftId"
          boxType="border"
        ></app-cell>
        <app-cell
          v-if="!$route.query.officia" 
          text="剧本HASH"
          :value="nftData.fileHash"
          boxType="border"
        ></app-cell>
        <app-cell
          v-if="$route.query.officia" 
          text="NFT HASH"
          :value="nftData.nftHash"
          boxType="border"
        ></app-cell>
        <app-cell
          text="发行时间"
          :value="nftData.publishTime"
          boxType="border"
        ></app-cell>
      </div>
      <div class="py-3">
        <div class="text-font-dark-blue">版权信息</div>
        <!-- <app-cell
          text="版权登记号"
          value="JOYING-20210615-HONGJUREN"
          boxType="border"
        ></app-cell> -->
        <app-cell
          text="作者"
          :value="nftData.author?nftData.author:'无'"
          boxType="border"
        ></app-cell>
        <!-- <app-cell
          text="著作权人"
          value="JOYING-20210615-HONGJUREN"
          boxType="border"
        ></app-cell>
        <app-cell
          text="版权登记日期"
          value="JOYING-20210615-HONGJUREN"
          boxType="border"
        ></app-cell>
        <app-cell
          text="版权HASH"
          value="JOYING-20210615-HONGJUREN"
          boxType="border"
        ></app-cell> -->
      </div>

        <div class="py-3">
            <div class="text-font-dark-blue">剧本简介</div>
            <div class=" py-2  tracking-wide leading-6  text-sm break-all">{{nftData.synopsis?nftData.synopsis:'无'}}</div>
        </div>

        <div class="py-3">
            <div class="text-font-dark-blue">关于NFT</div>
            <div class=' py-2  tracking-wide leading-6  text-sm break-all'>NFT全称为Non-Fungible Token，也称为非同质化通证。可以通俗化理解为在区块链上的唯一凭证。电影产业中，能够为剧本、电影、花絮、剧照、音乐等作品发行NFT，链上确权、高效流转、不可替代、独一无二。能够保护编剧及电影人的知识产权，挖掘版权交易价值，提高创作收益，丰富影视行业良好生态，创造影视版权数字化经济。</div>
        </div>

        <div class="py-3">
            <div class="text-font-dark-blue">交易记录</div>
            <div class="text-center py-5">
                暂无记录
            </div>
        </div>
        <div class="scroll-padding"></div>
        <div class="fixed bottom-0 w-full left-0 z-30 flex items-center px-5 mb-7 bg-font-black bg-opacity-80 shadow-nav"   v-if="!$route.query.officia" > 
            <div class='flex-grow-0'>
                <div @click='editCollection'>
                    <app-icon name='icon-heart1' size='25px' v-if="inMyCollection" color='#ED6F6F'></app-icon>
                   <app-icon name='icon-heart' size='25px' v-else></app-icon>

                </div>
            </div>
            <div class='flex-grow pl-8'>
                  <app-btn text="查看剧本" class=" w-full mx-auto text-font-white rounded-2xl bg-font-blue"  border='none' ></app-btn>
            </div>
        </div>
        <div class="fixed bottom-0 w-full left-0 z-30 flex items-center px-5 mb-7 bg-font-black bg-opacity-80 shadow-nav" v-else> 

            <div class='flex-grow '>
                <app-btn :text="nftData.status ===0?'已领取，去查看':nftData.status ===1?'立即领取':'已经领完'" class=" w-full mx-auto text-font-white rounded-2xl bg-font-blue"  border='none' ></app-btn>
            </div>
        </div>
    </div>

  </Layout-Child>
</template>

<script lang="ts">
import Vue from "vue";
import SkeletonNftDetail from "@/components/common/Skeleton/SkeletonNftDetail.vue"
import { token } from '@/util/userInfoUtils'
import anquanzhongxin89 from "@/assets/img/img-anquanzhongxin89.png"
import chakan from "@/assets/img/img-chakan.png"
import atupian from "@/assets/img/img-a-tupian.png"
import BOSSyingyetingchushi from "@/assets/img/img-BOSS-yingyeting-chushi.png"

const apps = [
  {
    text: "版权认证",
    icon: anquanzhongxin89,
  },
  {
    text: "大厅下架",
    icon: chakan,
  },
  {
    text: "NFT转让",
    icon: atupian,
    action: 'pushToTransfer'
  },
  {
    text: "查看证书",
    icon: BOSSyingyetingchushi,
  },
];

export default Vue.extend({
  data() {
    return {
      id: this.$route.params.id,
      apps,
      showSkelton:true,
      nftData:{} as any,
      collectionData:{},
      inMyCollection:false,
      isOwner:false,
      user:this.$util.userMsg.getUserMsg() as any
      // loading:true
    };
  },
  async created() {
    console.log(this.$route.query.officia);
    if(this.$route.query.officia){
      this.nftData = await this.$service.nftService.officialNFTDetail(parseInt(this.id))
      console.log(this.nftData);
      
    }else{
      this.nftData =await this.$service.nftService.getNFTdetail(parseInt(this.id))
      this.nftData.wallet == this.user.wallet? this.isOwner=true:this.isOwner=false
      if(!token.getToken()) {
          return 
      }
      await this.setMyCollection()
    }

    this.showSkelton = false
  },
  
  components: {
    "Layout-Child": () => import("@/layout/Child.vue"),
    "app-icon": () => import("@/components/common/Icon.vue"),
    "app-tag": () => import("@/components/common/Tag.vue"),
    "app-cell": () => import("@/components/common/Cell.vue"),
    'app-btn':()=>import('@/components/common/Btn.vue'),
    //  'app-scrollbar':()=>import('@/components/common/ScrollBar.vue'),
    "app-collectionCard":  () => import("@/components/CollectionCard.vue"),
    SkeletonNftDetail,
  },
  methods:{
    appOnclick(action:any){
      console.log(action);
      switch (action) {
        case 'pushToTransfer':
          this.$router.push({name:'NftTransfer',query:{
            nftId:this.nftData.id,
            from:this.nftData.wallet,
            avatar:this.nftData.avatar,
            nftName:this.nftData.name
          }})
          break;
      
        default:
          break;
      }
      
    },

    async setMyCollection():Promise<void>{
      if(!token.getToken()) {
        this.$router.push('/auth/login')
      }
      let list = await this.$service.nftService.getCollection()
      if(list.find(i=> i.id == this.id)){
        this.inMyCollection = true
      }else{
        this.inMyCollection = false
      }
    },
    async editCollection(){
      if(!token.getToken()) {
        this.$router.push('/auth/login')
      }
      await this.$service.nftService.editCollection(parseInt(this.id)).then(async (res)=>{
        if(res){
          await this.setMyCollection()
          if(this.inMyCollection){
            this.$toast.success('NFT已经收藏成功')
          }else {
            this.$toast.success('NFT已从我的收藏中移除')
          }
        }
      })
    }
  }
});
</script>
