<template>
   <div class="browser_box">
       <NavHeader></Navheader>
       <div class="browser_img">
           <img class="browser_img_B" src="@/assets/img/browser_img_B.png" alt="">
           <img class="browser_img_C" src="@/assets/img/browser_img_C.png" alt="">
       </div>
       <div class="trace_count_text">存证数量</div>
       <div class="trace_count_num">{{count}} <span class="unit">个</span> </div>
       <div class="trace_search">
           <Icon name="icon-xingzhuang" size=" 16px"></Icon>
           <input v-model="nftHash" class="search_area" type="text" placeholder="请输入存证哈希">
       </div>
       <div class="trace_search_btn" @click="searchTrace()">查询</div>
   </div>
</template>

<script lang='ts'>
/**框架*/
import Vue from 'vue'
/**工具库*/
/**类型*/
/**组件*/
/**自定义方法*/

export default Vue.extend({
   name:'',
   data(){
       return {
           count: 0,
           nftHash: ''
       }
   },
   async mounted(){
       await this.getApplyCount()
   },
   components: {
       NavHeader:()=> import('@/layout/NavHeader.vue'),
       Icon: ()=> import('@/components/common/Icon.vue')
   },
   methods: {
       async searchTrace(){
           const nftDetail = await this.$service.nftService.getNFTdetail(this.nftHash)
           if(nftDetail) {
               this.$router.push(`/Nft/${this.nftHash}`)
           }
           
       },
       async getApplyCount(){
           const res = await this.$service.copyrightService.getApplyCount()
           if(res) this.count = res
       }
   }
})
</script>

<style scoped lang='less'>
.browser_box {
    height: 100vh;
    overflow-y: scroll;
    padding-bottom: 150px;
    background-color: #201F7D;
    text-align: center;
    .browser_img {
        position: relative;
        height: 100vw;
        background-image: url('../../../assets/img/browser_img_A.png');
        background-size: cover;
        background-repeat: no-repeat;
        .browser_img_B {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 50%;
            margin-top: -25%;
            margin-left: -25%;
            animation: ringAction 2.5s infinite linear;
        }
        .browser_img_C {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 36%;
            margin-top: -18%;
            margin-left: -18%;
            animation: ringAction 2.5s infinite linear;
        }
        @keyframes ringAction {
          from {
            transform: rotate(0)
          }
        
          to {
            transform: rotate(360deg)
          }
        }
    }
    .trace_count_text {
        width: 30%;
        height: 30px;
        line-height: 30px;
        margin: 10px auto 0;
        font-size: 16px;
        color: #fff;
        background-color: #3C2BA2;
        border: 1px solid #5238D7;
        border-radius: 10px;
    }
    .trace_count_num {
        margin-top: 10px;
        color: #fff;
        font-size: 30px;
        .unit {
           font-size: 18px;
        }
    }
    .trace_search {
        width: 85%;
        margin: 30px auto 0;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 12px;
        background: #302693;
        border: 1px solid #4C4AEF;
        border-radius: 20px;
        .search_area {
            flex: 1;
            background: #302693;
            padding-left: 20px;
            color: #fff;
        }
    }
    .trace_search_btn {
        width: 85%;
        margin: 30px auto 0;
        background-color: #fff;
        height: 40px;
        line-height: 40px;
        color: #201F7D;
        font-size: 14px;
        border-radius: 20px;
        border: 1px solid #4C4AEF;
    }
}
</style>