<template>
  <Layout-Child class='page-scroll'>
    <div class="w-11/12 mx-auto mt-6 text-font-white">
      <app-collectionCard></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="@/assets/img/avatar.png" class="h-12 w-12 rounded-full" />
        </div>
        <div>
          <div class="flex items-center">
            <div class="pr-3 text-base">张瀚峰</div>
            <app-tag text="发行人" :id="1" class="bg-font-dark-blue"></app-tag>
          </div>
          <div class="mt-1 text-font-dark-blue">sdfsdfsdf</div>
        </div>
      </div>
      <div class="py-3">
        <div class="text-font-dark-blue">NFT信息</div>
        <app-cell
          text="编号"
          value="JOYING-20210615-HONGJUREN"
          boxType="border"
        ></app-cell>
        <app-cell
          text="剧本HASH"
          value="JOYING-20210615-HONGJUREN"
          boxType="border"
        ></app-cell>
        <app-cell
          text="发行时间"
          value="JOYING-20210615-HONGJUREN"
          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="JOYING-20210615-HONGJUREN"
          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">在人工智能和机械人科技日新月异的进步下，我们已经不能阻止这些科技已经超越了一般只 是用于方便人们日常生活的范畴。特斯拉 CEO 埃隆·马斯克在公开场合说过“无人机等技 术的发展的迅速，在降低了生</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。NFT不可分割、不可替代、独一无二，可以将资产数字化。采用NFT形式，推动剧本知识产权保护、剧本价值挖掘、促进剧本流通交易、保护编剧及电影制片方利益。我平台的NFT基于比特元（BTY）公链，根据ERC20或ERC1155协议发行，链上创建合约、链上确权、链上流转、链上查询。能有效保护剧本知识产权，防止篡改、伪造，并可在链上永久保留剧本原创作者信息，保留原创作者署名权，所有权等权益。保护编剧利益，促进编剧的创作欲望，促进电影行业生态健康发展。</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,
    };
  },
  created() {},
  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>
