<template>
  <div class="trace_detail">
    <div class="trace_banner">
      <NavHeader></Navheader>
      <div class="banner_content">

        <div class="content_btn_box">
          <div class="content_btn_one" @click="traceSearch()">
            <Icon name="icon-xingzhuang"></Icon>
            <div class="btn_text">存证查询</div>
          </div>
          <div class="content_btn_two" @click="nftTransfer()" v-if="userId == nftDetail.userId">NFT转让</div>
          <div class="content_btn_two" @click="showNftCer()">NFT证书</div>
        </div>

        <img class="ring_img" src="@/assets/img/ring_img.png" alt="">
        <div class="content_title_box">
          <div class="content_title_one">一幕影链</div>
          <div class="content_title_two">让影视版权更具价值</div>
        </div>
      </div>
    </div>
    <div class="trace_content">
      <div class="center_container">
        <!-- 存证信息 -->
        <div class="trace_info">
          <div class="trace_info_content">
            <TextCell label="存证名称" :value="nftDetail.name || ''"></TextCell>
            <TextCell label="存证哈希" :value="nftDetail.nftHash || ''" :copy="true" :isHash="true"></TextCell>
            <TextCell label="发行状态" :value="nftDetail.publishStatus"></TextCell>
            <TextCell label="发行个数" :value="nftDetail.count || ''"></TextCell>
            <TextCell label="NFT编号" :value="nftDetail.nftId || ''"></TextCell>
          </div>
        </div>
        <!-- 每条存证 -->
        <div class="trace_card">
            <div class="trace_card_title">
                {{nftDetail.name}}
            </div>
            <div class="trace_card_content">
                <div class="card_item">
                    <TextCell label="存证哈希" :value="nftDetail.nftHash || ''" :isHash="true"></TextCell>
                </div>
                <div class="card_item">
                    <TextCell label="存证人" :value="nftDetail.evidencer"></TextCell>
                </div>
                <div class="card_item">
                    <TextCell label="存证名称" :value="nftDetail.name"></TextCell>
                </div>
                <div class="card_item">
                    <TextCell label="文件哈希" :value="nftDetail.fileHash || ''" :isHash="true"></TextCell>
                </div>
                <div class="card_item" :class="{'card_item_end':true}">
                    <TextCell label="存证时间" :value="nftDetail.evidenceTime"></TextCell>
                </div>
            </div>
        </div>
        <!-- <TraceCard class="trace_card" :traceData="nftDetail" v-if="nftDetail.copyright && nftDetail.copyright.evidenceHash"></TraceCard> -->
        <TraceCard class="trace_card" :traceData="nftDetail" ></TraceCard>
      </div>
    </div>
    <!-- NFT证书，待定 -->
    <Certificate @hiddenCer="hiddenCer" v-if="showCertificate" :certificateData="certificateData"></Certificate>
    <van-popup v-model="showGoSafe" class=" bg-font-light-black pt-3 pb-10 rounded-lg text-white w-3/4">
        <div class=" text-font-dark-blue pl-5 pr-5 h-10 border-b border-table-light-blue flex items-center justify-between">
          <div>温馨提示</div>
          <div>
            <img class=" w-7" src="/img/closeBtn.2ecdb438.svg" alt="" @click="showGoSafe=false">
          </div>
        </div>
        <div class=" text-sm mt-5 pl-5 pr-5">您需要通过实名认证后才能转让您的NFT哦！</div>
        <div class=" w-20 h-8 leading-8 rounded-full mx-auto bg-font-blue text-center mt-5" @click="gotoSafe()">去认证</div>
    </van-popup>
  </div>
</template>

<script lang='ts'>
import Vue from 'vue'
import NavHeader from '@/layout/NavHeader.vue'
import Icon from '@/components/common/Icon.vue'
import TextCell from './component/textCell.vue'
import TraceCard from './component/traceCard.vue'
import vueQr from "vue-qr/src/packages/vue-qr.vue";

export default Vue.extend({
   name:'',
   data(){
     return {
       nftHash: this.$route.params.id,
       nftDetail: {} as any,
       traceDataList: [{}] as Array<any>,
       showCertificate: false,
       showGoSafe: false,
       qrContent: localStorage.origin+'/Nft/'+ this.$route.params.id,
       userId: ''
     }
   },
   computed: {
    certificateData():any{
      return {
        nftHash: this.nftDetail.nftHash,
        nftName: this.nftDetail.name,
        nftPublisher: this.nftDetail.evidencer,
        nftPublishTime: this.nftDetail.evidenceTime,
        qrUrl: window.location.href
      }
    }
   },
   components:{
     NavHeader,
     Icon,
     TextCell,
     TraceCard,
     vueQr,
     Certificate: ()=>import('@/components/common/Certificate.vue')
     
   },
   async mounted(){
     /**获取NFT详情 */
     await this.getNftDetail()
     /**获取自己的地址 */
     const userInfo = localStorage.getItem('KEY_USER')
     if(userInfo) {
       this.userId = JSON.parse(userInfo).authPerson.userId
     }
   },
   methods: {
     async getNftDetail(){
       this.nftDetail = await this.$service.nftService.getNFTdetail(this.nftHash)
      //  this.traceDataList = [this.nftDetail]
     },
     showNftCer(){
       this.showCertificate = true
     },
     hiddenCer(){
       this.showCertificate = false
     },
     traceSearch(){
       this.$router.push('/Browser')
     },
     nftTransfer(){
       const auth = localStorage.getItem('isCertificate')
       if(auth != 'true') {
         this.showGoSafe = true
         return
       }
       this.$router.push({
         name: "NftTransfer",
         query: {
           nftId: this.nftDetail.id,
           from: this.nftDetail.wallet,
           avatar: this.nftDetail.avatar,
           nftName: this.nftDetail.name,
           ownerName: this.nftDetail.publisher,
         },
       });
     },
     gotoSafe(){
      this.showGoSafe = false
      this.$router.push('/safe')
     }
   }
})
</script>

<style scoped lang='less'>
.trace_detail {
  height: 100vh;
  overflow-y: scroll;
  padding-bottom: 150px;
  background-color: #ffffff;
}
.trace_banner {
   background-color: #201F7D;
  .banner_content {
    height: 352px;
    background-image: url('../../../assets/img/nft_detail_bg.png');
    background-size: 90%;
    background-repeat: no-repeat;
    background-position: center center;
    color: #fff;
    position: relative;
    .content_btn_box {
      padding: 20px 20px;
      display: flex;
      justify-content: space-between;
      .content_btn_one {
        background: #302693;
        border-radius: 27px;
        border: 1px solid #4C4AEF;
        width: 110px;
        height: 30px;
        line-height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        .btn_text {
          margin-left: 10px;
        }
      }
      .content_btn_two {
        background: #302693;
        border-radius: 27px;
        border: 1px solid #4C4AEF;
        width: 80px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 12px;
      }
    }
    .ring_img {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 60%;
      margin-top: -30%;
      margin-left: -30%;
      animation: ringAction 3s infinite linear;
    }
    @keyframes ringAction {
      from {
        transform: rotate(0)
        // transform: translate(-50%, -50%) rotate(0)
      }
    
      to {
        transform: rotate(360deg)
        // transform: translate(-50%, -50%) rotate(360deg)
      }
    }
    .content_title_box {
      position: absolute;
      top: 48%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      .content_title_one {
        font-size: 15px;
        letter-spacing:2px
      }
      .content_title_two {
        margin-top: 15px;
        font-size: 16px;
        font-weight: 500;
        letter-spacing:2px
      }
    }
  }
}
.trace_content {
  position: relative;
  min-height: 400px;
  z-index: 50;
  width: 90%;
  margin: -50px auto 20px;
  .trace_info {
    box-shadow: 0px 2px 8px 0px #DFDFDF;
    background: #FFFFFF;
    padding: 7px;
    .trace_info_content {
      min-height: 168px;
      padding: 15px 15px;
      border: 1px solid #D9DEE3;
    }
  }
  .trace_card {
    margin-top: 10px;
  }
}
.trace_card {
    .trace_card_title {
        text-align: center;
        color: #fff;
        font-size: 14px;
        height: 30px;
        line-height: 30px;
        background-color: #333393
    }
    .trace_card_content {
        border: 1px solid #E2E2E2;
        padding: 15px 15px;
        .card_item {
            height: 40px;
            width: 100%;
            display: flex;
            align-items: center;
            padding-left: 15px;
            position: relative;
            &:before {
                content: " ";
                font-size: 0;
                height: 8px;
                width: 8px;
                border-radius: 50%;
                background-color: #7388AB;
                position: absolute;
                left: -4px;
            }
            &:after {
                content: " ";
                font-size: 0;
                height: 40px;
                width: 1px;
                border-radius: 50%;
                background-color: #7388AB;
                position: absolute;
                left: -1px;
                top: 50%;
            }
        }
        .card_item_end {
            &:after {
                display: none;
            }
        }
    }
}
</style>