<template>
  <Layout-Child class="page-scroll">
    <div class="w-11/12 mx-auto mt-6 text-font-white">
      <SkeletonNftDetail v-if="showSkelton" />


      <!-- 领取纪念版NFT页面 -->
      <div v-if="$route.query.officia">
        <div class="h-80">
          <img class=" max-h-72 mx-auto" src="@/assets/img/NFTCover.png" 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>

      <!-- 纪念版NFT -->
      <div v-else-if="nftData.isCommemorate == 1">
        <div class="h-80 flex items-center">
          <!-- <img class=" max-h-72 mx-auto" src="@/assets/img/NFTCover.png" alt="" /> -->
          <img class=" max-h-72 mx-auto" :src="nftData.cover?nftData.cover:'@/assets/img/NFTCover.png'" alt="" />
        </div>
      </div>
      <!-- 不是纪念版NFT -->
      <!-- <app-collectionCard :colletionData="nftData" v-else></app-collectionCard> -->
      <div>
        <div class="h-72 flex items-center">
          <!-- <img class=" max-h-72 mx-auto" src="@/assets/img/NFTCover.png" alt="" /> -->
          <img class=" max-h-72 mx-auto" :src="nftData.cover?nftData.cover:'/img/zx_default_img.png'" alt="" />
        </div>
      </div>
      <!-- 几个图标 -->
      <!-- <div class="app-icons mx-auto flex justify-around my-6" v-if="isOwner">
        <div
          v-for="(i, index) in (nftData.isCommemorate == 0?apps:ComApps)"
          :key="index + nftData.isCommemorate"
          class="flex justify-center "
          
        >
          <div class="flex flex-col items-center">
            <div class="flex content-center">
              <img :src="i.icon" alt="" @click="appOnclick(i.action)" />
            </div>
            <div class="text-xs mt-3 text-font-white">
              {{ i.text }}
            </div>
          </div>
        </div>
      </div> -->
      
      <!-- 发行人 -->
      <div class="">
        <div class=" text-zx-blue-light mt-2">灵魂中的倾听</div>
        <div class=" flex justify-between mt-1">
          <div class=" text-zx-blue-white">NFT类型：<span class=" text-zx-blue-light">插画</span> </div>
          <div class=" text-zx-blue-white">创作者：<span class=" text-zx-blue-light">{{ nftData.publisher ? nftData.publisher : "匿名" }}</span> </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-sm">
              {{ nftData.publisher ? nftData.publisher : "匿名" }}
            </div>
            <app-tag text="发行人" :id="1" class=" bg-font-light-black" :disabled="true"></app-tag>
          </div>
          <div class="mt-1 text-font-dark-blue">{{ nftData.wallet?nftData.wallet:nftData.publishAddress }}</div>
        </div>
      </div> -->

      <div class="py-3">
        <!-- <div class="text-font-dark-blue">剧本简介</div> -->
        <div class="text-font-dark-blue" v-if="nftData.isCommemorate == 0">作品简介</div>
        <div class="text-font-dark-blue" v-if="nftData.isCommemorate == 1 || $route.query.officia">纪念版NFT简介</div>
        <div class="py-2 tracking-wide leading-6 text-sm break-all text-zx-blue-light">
          {{ nftData.synopsis ? nftData.synopsis : "无" }}
        </div>
      </div>
      
      <div class="flex w-2/3 m-auto justify-between mt-5 text-zx-blue-white">
        <div @click="changeBanner(0)" :class="{'text-zx-blue-light':bannerIndex == 0}">NFT信息</div>
        <div @click="changeBanner(1)" :class="{'text-zx-blue-light':bannerIndex == 1}">溯源查询</div>
      </div>

      <div class="py-3" v-if="bannerIndex == 0">
        <div class="text-font-dark-blue">NFT信息</div>
        <app-cell
          v-if="nftData.isCommemorate == 0"
          text="编号"
          :value="nftData.nftId"
          boxType="border"
          class=" text-zx-blue-light"
        ></app-cell>

        <app-cell
          v-if="$route.query.officia || nftData.isCommemorate == 1"
          text="NFT HASH"
          :name="nftData.nftHash?nftData.nftHash:nftData.fileHash"
          boxType="border"
          type="showText"
          :needCopy="true"
          class=" text-zx-blue-light"
        ></app-cell>
        <app-cell
          v-else
          text="剧本HASH"
          :name="nftData.fileHash"
          boxType="border"
          type="showText"
          :needCopy="true"
          class=" text-zx-blue-light"
        ></app-cell>
        <app-cell
          text="发行时间"
          :value="nftData.publishTime"
          boxType="border"
          class=" text-zx-blue-light"
        ></app-cell>
      </div>

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

      <div class="py-3" v-if="!$route.query.officia && bannerIndex == 0">
        <div class="text-font-dark-blue">流转记录</div>
        <div class="text-center py-5 text-zx-blue-light">暂无记录</div>
      </div>

      <source-search v-if="bannerIndex == 1"></source-search>

      <van-overlay :show="showoverlay" @click="showoverlay = false" />
      <div class="scroll-padding"></div>

      <!-- 不是领取纪念版NFT的弹出层 -->
      <div
        class="
          fixed
          bottom-0
          w-full
          left-0
          z-30
          flex
          items-center
          px-5
           pb-7
           bg-white bg-opacity-80
          shadow
          flex-col
        "
        v-if="!$route.query.officia"
      >
          <div class="w-10/12 pt-8" v-if="showoverlay">
          <app-cell text="NFT类型" :value="nftData.category" class="my-1"></app-cell>
          <app-cell
            text="文件名"
            :value="nftData.name || '未上传文件'"
            class="my-1"
          ></app-cell>
          <div class="flex justify-center">
            <van-image
              v-if="nftData.isCommemorate == 1"
              class="my-3 self-center text-center"
              width="180"
              lazy-load
              :src="nftData.fileUrl"
            />
            <van-image
              v-if="nftData.isCommemorate == 0"
              class="my-3 self-center text-center"
              width="180"
              lazy-load
              :src="nftData.fileUrl?'/img/mokeImg/已加密.png':'/img/mokeImg/暂无内容.png'"
            />
            <!-- <van-image
              v-if="nftData.isCommemorate == 0"
              class="my-3 self-center text-center"
              width="180"
              lazy-load
              :src="nftData.fileUrl?!nftData.isGrant?nftData.fileUrl:'/img/mokeImg/已加密.png':'/img/mokeImg/暂无内容.png'"
            /> -->
          </div>
        </div>
        
          <div class='flex w-full items-center'>
            <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" color="#A7B5CD" size="25px" v-else></app-icon>
            </div>
          </div>
          <div class="flex-grow pl-8">
            <!-- <app-btn
              @click.native="confirmBtn"
              text="咨询作者"
              class="w-full mx-auto text-font-white bg-zx-blue-light"
              border="none"
            ></app-btn> -->
            <app-btn
              text="咨询作者"
              class="w-full mx-auto text-font-white bg-zx-blue-light"
              border="none"
            ></app-btn>
          </div>
        </div>

      </div>
      <!-- 领取纪念版NFT的弹出层 -->
      <div
        class="
          fixed
          bottom-0
          w-full
          left-0
          z-30
          flex
          items-center
          px-5
          pb-7
          bg-font-black bg-opacity-95
          shadow-nav
          flex-col
        "
        v-else
      >
        <div class="flex-grow w-10/12">
          <app-btn
            :text="
              nftData.status === 0
                ? '已领取，去查看'
                : nftData.status === 1
                ? '立即领取'
                : '已经领完'
            "
            class="w-full mx-auto text-font-white rounded-2xl bg-font-blue"
            border="none"
            @click.native="confirmBtn"
          ></app-btn>
        </div>

      </div>
      <!-- 领取纪念版NFT步骤 -->
      <div class=" fixed bottom-0 left-0 right-0 top-0 bg-font-black flex items-center z-50" v-if="getOfficialNft == 'loading'">
        <div class=" w-4/6 mx-auto text-center">
          <img src="@/assets/img/saveLoading.png" alt="" class=" mx-auto">
          <div class=" mt-5">证书领取中，请稍后~~</div>
        </div>
      </div>
      <div class=" fixed bottom-0 left-0 right-0 top-0 bg-font-black flex items-center z-50 overflow-y-scroll" v-if="getOfficialNft == 'success'">
        <div class="w-10/12 mx-auto text-center">
          <certificate :categoryId="'c'" :certificateData="certificateData"></certificate>
          <img
            @click="getOfficialNft=''"
            src="@/assets/icons/close_publish.png"
            class="w-4 xs:w-6 mx-auto mt-3"
            />
        </div>
      </div>
      <div class=" fixed bottom-0 left-0 right-0 top-12 bg-font-black flex items-center z-50" v-if="getOfficialNft == 'fail'">
        <div class=" w-4/6 mx-auto text-center">
          <img src="@/assets/img/earth.png" alt="" class=" mx-auto w-4/6">
          <div class=" mt-5">抱歉，NFT领取失败!</div>
          <div>
            <app-btn class=" w-2/6 mx-auto text-font-white rounded-2xl bg-font-blue" text="重新领取" @click.native="confirmBtn" border="none">
            </app-btn>
          </div>
        </div>
      </div>

      <!-- <van-overlay v-if>
        <app-cell text="NFT类型" :value="nftData.category" class="my-1"></app-cell>
        <app-cell
          text="文件名"
          :value="nftData.fileName || '未上传文件'"
          class="my-1"
        ></app-cell>
        <div class="flex justify-center">
          <van-image
            class="my-3 self-center text-center"
            width="180"
            lazy-load
            :src="nftData.fileUrl"
          />
        </div>
      </van-overlay> -->

      <!-- 展示证书 -->
      <div class=" fixed bottom-0 left-0 right-0 top-0 bg-font-black flex items-center z-50 overflow-y-scroll" v-if="showCertificate ">
        <div class="w-10/12 mx-auto text-center">
          <certificate :categoryId="'c'" :certificateData="certificateData"></certificate>
          <img
            @click="showCertificate = false"
            src="@/assets/icons/close_publish.png"
            class="w-4 xs:w-6 mx-auto mt-3"
            />
        </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/check.png";
import chakan from "@/assets/img/upload.png";
import atupian from "@/assets/img/transfer.png";
import BOSSyingyetingchushi from "@/assets/img/certigicate.png";
import { Overlay } from "vant";
import download from "downloadjs";

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

const ComApps = [
  {
    text: "NFT转让",
    icon: atupian,
    action: "pushToTransfer",
  },
  {
    text: "查看证书",
    icon: BOSSyingyetingchushi,
    action: "showCertificate",
  },
];

export default Vue.extend({
  data() {
    return {
      id: this.$route.params.id,
      apps,
      ComApps,
      showoverlay: false,
      showSkelton: true,
      nftData: {} as any,
      collectionData: {},
      inMyCollection: false,
      isOwner: false,
      user: this.$util.userMsg.getUserMsg() as any,
      getOfficialNft: '',
      showCertificate: false,
      bannerIndex: 0,
      // loading:true
    };
  },
  computed:{
    certificateData():any{
      return {
        NFTHash:this.nftData.nftHash,
        value_name: this.nftData.name,
        wallet: this.nftData.publishAddress || this.nftData.wallet,
        publisher: this.nftData.publisher,
        cover: this.nftData.cover,
        publishTime: this.nftData.publishTime
      }
    }
  },
  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.userId == this.user.id? this.isOwner=true:this.isOwner=false
      if(!token.getToken()) {
          this.showSkelton = false
          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"),
    "certificate": () => import("@/view/NFT/Create/components/certificate/index.vue"),
    SkeletonNftDetail,
    'sourceSearch': ()=>import('./components/sourceSearch.vue'),
  },
  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,
              ownerName: this.nftData.publisher,
            },
          });
          break;
        case "showCertificate":
          this.showCertificate = true;
          break;

        default:
          break;
      }
    },
    confirmBtn() {
      console.log(this.nftData.status);
      if(!this.$route.query.officia) {
        this.showoverlay = true
        if(this.nftData.fileUrl && this.nftData.isCommemorate == 0) {
          this.$toast('功能正在上线中，请耐心等候')
        }else if(this.nftData.isCommemorate == 0) {
          this.$toast('用户没有上传文件，不可查看')
        }
      }
      if (this.nftData.status === 1) {
            this.getOfficialNft='loading'
            this.$service.nftService
            .applyOfficialNft(Number(this.$route.params.id))
            .then((res) => {
              if (res) {
                this.getOfficialNft='success'
                download(this.nftData.fileUrl);
                this.$toast("领取成功");
                // this.$router.replace("");
                this.nftData.status = 0
              }else {
                this.getOfficialNft='fail'
              }
            }).catch(()=>{
              this.getOfficialNft='fail'
            })
        // if (!this.showoverlay) {
        //   this.showoverlay = true;
        // } else {
        //   this.$service.nftService
        //     .applyOfficialNft(Number(this.$route.params.id))
        //     .then((res) => {
        //       if (res) {
        //         download(this.nftData.fileUrl);
        //         this.$toast("领取成功");
        //         this.$router.replace("");
        //       }
        //     })
        // }
      }else if(this.nftData.status == 0){
        this.$router.push({name:'myListNft',query:{category:this.nftData.category}})
      }else{
          console.log(11);
          
        //  this.showoverlay = true;
      }
    },
    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已从我的收藏中移除");
            }
          }
        });
    },
    changeBanner(index:number){
      this.bannerIndex = index
    }
  },
});
</script>
