<template>
  <Layout-Child class='page-scroll'>
    <!-- <div  v-if="loading">
      loading....
    </div> -->
    <div class="w-11/12 mx-auto mt-6 text-font-white">
      <app-collectionCard :colletionData='nftData'></app-collectionCard>
      <div class="app-icons mx-auto grid grid-cols-4 my-6">
        <div
          v-for="(i, index) in apps"
          :key="index"
          class="flex justify-center"
        >
          <div class="flex flex-col items-center gap-y-2">
            <div class="flex content-center">
              <app-icon
                :name="i.icon"
                size="24px"
                class="p-5 bg-table-light-blue shadow-md rounded-full"
              ></app-icon>
            </div>
            <div class="text-xs 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
          text="编号"
          :value="nftData.nftId"
          boxType="border"
        ></app-cell>
        <app-cell
          text="剧本HASH"
          :value="nftData.fileHash"
          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">{{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'>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="fixed bottom-0 w-full left-0 z-30 flex items-center px-5 shadow-nav"> 
            <div class='flex-grow-0'>
                <app-icon name='icon-heart' size='25px'></app-icon>
            </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>

  </Layout-Child>
</template>

<script lang="ts">
import Vue from "vue";
const apps = [
  {
    text: "版权认证",
    icon: "icon-anquanzhongxin89",
  },
  {
    text: "大厅下架",
    icon: "icon-chakan",
  },
  {
    text: "交易设置",
    icon: "icon-a-tupian",
  },
  {
    text: "查看证书",
    icon: "icon-BOSS-yingyeting-chushi",
  },
];

export default Vue.extend({
  data() {
    return {
      id: this.$route.params.id,
      apps,
      nftData:{},
      // loading:true
    };
  },
  async created() {
    this.nftData =await this.$service.nftService.getNFTdetail(parseInt(this.id))
    // const str ='safkjdshafosofol123 dfd'
    // const strVal = this.$util.validator.isByteLength(str,{min:1,max:16})
    // console.log(strVal);
    
  },
  
  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"),
  },
});
</script>
