<template>
   <div class="trace_card">
       <div class="trace_card_title">
           {{traceData.copyright && traceData.copyright.opusName}}
       </div>
       <div class="trace_card_content">
           <div class="card_item">
               <TextCell label="存证哈希" :value="traceData.nftHash || ''" :isHash="true"></TextCell>
           </div>
           <div class="card_item">
               <TextCell label="存证人" :value="traceData.copyright && traceData.copyright.evidencer"></TextCell>
           </div>
           <div class="card_item">
               <TextCell label="登记号" :value="traceData.copyright && traceData.copyright.evidencer"></TextCell>
           </div>
           <div class="card_item">
               <TextCell label="作品名称" :value="traceData.copyright && traceData.copyright.opusName"></TextCell>
           </div>
           <div class="card_item">
               <TextCell label="作品类型" :value="traceData.copyright && traceData.copyright.opusType"></TextCell>
           </div>
           <div class="card_item">
               <TextCell label="作者" :value="traceData.copyright && traceData.copyright.author"></TextCell>
           </div>
           <div class="card_item">
               <TextCell label="著作权人" :value="traceData.copyright && traceData.copyright.copyrightOwner"></TextCell>
           </div>
           <div class="card_item">
               <TextCell label="创作完成时间" :value="traceData.copyright && traceData.copyright.opusCompleteDate"></TextCell>
           </div>
           <div class="card_item">
               <TextCell label="首次发表时间" :value="traceData.copyright && traceData.copyright.firstPublishDate"></TextCell>
           </div>
           <div class="card_item">
               <TextCell label="登记时间" :value="traceData.copyright && traceData.copyright.registerDate"></TextCell>
           </div>
           <div class="card_item" :class="{'card_item_end':true}">
               <TextCell label="存证时间" :value="traceData.copyright && traceData.copyright.evidenceTime"></TextCell>
           </div>
       </div>
   </div>
</template>

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

export default Vue.extend({
   name:'',
   props: {
       traceData: {
           default: ()=>{return {} as any},
           required: true
       }
   },
   components: {
       TextCell
   }
})
</script>

<style scoped lang='less'>
.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>