<template>
   <div class="paper_cer_page">
       <CprHeader title="查看版权证书"></CprHeader>
       <div class="center_box" >
           <img src="@/assets/img/apply_success.png" alt="">
           <div class="text_tip">
              《作品登记证书》正在加急提供中，请耐心等候…
           </div>
           <div class="text_address">
               <Icon class="icon_img" name="icon-fuwudiqiu" size="16px" color="#333"></Icon>
               <div>
                   <div class="title">版权查询网址：</div>
                   <div class="text_item">http://cp.ccct.net.cn/web/notice</div>
               </div>
           </div>
           <div class="text_phone">
               <Icon class="icon_img" name="icon-serialnumber" size="16px" color="#333"></Icon>
               <div>
                   <div class="title">我的登记号：</div>
                   <div class="text_item">
                       <div>{{serialNum || '暂无'}}</div>
                       <div class="copyBtn" @click="copy(serialNum)"><Icon  name="icon-fuzhi" size="14px" color="#2B446C"></Icon></div>
                   </div>
               </div>
           </div>
       </div>
   </div>
</template>

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

export default Vue.extend({
   name:'',
   data(){
       return {
           serialNum: this.$route.query.serialNum as string
       }
   },
   components: {
       Icon: ()=>import('@/components/common/Icon.vue'),
       CprHeader: ()=>import('../component/CprHeader.vue'),
   },
   methods: {
       copy(text: string){
           let clipboard = new ClipboardJS('.copyBtn', {
               text: function() {
                       return text.toString();
                     }
               });
           clipboard.on("success", (e)=>{
             this.$toast("复制成功~");
             e.clearSelection();
           });

           clipboard.on("error", ()=>{
             this.$toast("复制失败~");
           });
       }
   }
})
</script>

<style scoped lang='less'>
.paper_cer_page {
   height: 100vh;
   background-color: #fff;
   padding: 0 16px 150px;
   overflow-y: scroll;
   color: #2B446C;
   font-size: 14px;
   .center_box {
       width: 90%;
       height: 100px;
       margin: 100px auto 0;
       img {
           width: 60%;
           margin: 0 auto;

       }
       .text_tip {
           margin-top: 30px;
           font-size: 14px;
       }
       .text_address {
           margin-top: 20px;
           display: flex;
           .icon_img {
               margin-right: 10px;
           }
           .title {
               font-size: 12px;
           }
       }
       .text_phone {
           margin-top: 20px;
           display: flex;
           .icon_img {
               margin-right: 10px;
           }
           .title {
               font-size: 12px;
           }
       }
       .text_item {
           display: flex;
           align-items: center;
           .copyBtn {
               margin-left: 10px;
           }
       }
   }

}
</style>