<template>
   <div>
       <div class="title">作品信息</div>
       <div class="content">
           <div class="left">存证名称</div>
           <div class="right">{{pageData[1].proofName}}</div>
       </div>
       <div class="content">
           <div class="left">作品类别</div>
           <div class="right">{{pageData[1].proofType.name}}</div>
       </div>

       <div class="title">著作权人</div>
       <div class="" v-for="item in pageData[3].copyrightOwnerList" :key="item.id">
            <div class="content">
                <div class="left">著作权人</div>
                <div class="right">{{item.owner}}</div>
            </div>
            <div class="content">
                <div class="left">证件</div>
                <div class="right">{{mapIdType(item.idType)+'/'+item.idNumber}}</div>
            </div>
            <div class="content">
                <div class="left">归属地</div>
                <div class="right">{{'中国/'+item.province+'/'+item.city}}</div>
            </div>
            <div class="space"></div>
       </div>

       <div class="title">作品基本信息</div>
       <div class="" v-for="item in pageData[3].authorList" :key="item.name">
            <div class="content">
                <div class="left">作者姓名或名称</div>
                <div class="right">{{item.name}}</div>
            </div>
            <div class="content">
                <div class="left">作品署名</div>
                <div class="right">{{item.alias+'('+item.aliasType.name+')'}}</div>
            </div>
            <div class="space"></div>
       </div>
       <div class="content">
           <div class="left">创作完成日期</div>
           <div class="right">{{mapDate(pageData[1].proofFinishDate)}}</div>
       </div>
       <div class="content">
           <div class="left">创作完成地点</div>
           <div class="right">{{'中国/'+(pageData[1].proofFinishPlace[0]?pageData[1].proofFinishPlace[0].name:'')+'/'+(pageData[1].proofFinishPlace[1]?pageData[1].proofFinishPlace[1].name:'')}}</div>
       </div>
       <div class="space"></div>
       <div class="content">
           <div class="left">发表状态</div>
           <div class="right">{{pageData[1].proofPublishStatus == 0? '未发表' : '已发表'}}</div>
       </div>
       <div class="content" v-if="pageData[1].proofPublishStatus == 1">
           <div class="left">首次发表时间</div>
           <div class="right">{{mapDate(pageData[1].proofFinishDate)}}</div>
       </div>
       <div class="content" v-if="pageData[1].proofPublishStatus == 1">
           <div class="left">首次发表地点</div>
           <div class="right">{{'中国/'+(pageData[1].proofPublishPlace[0]?pageData[1].proofPublishPlace[0].name:'')+'/'+(pageData[1].proofPublishPlace[1]?pageData[1].proofPublishPlace[1].name:'')}}</div>
       </div>
       <div class="space"></div>
       <div class="content">
           <div class="left">作品性质</div>
           <div class="right">{{pageData[1].proofFeature.name}}</div>
       </div>
       <div class="content">
           <div class="left">内容简介</div>
           <div class="right right_link" @click="showDetail(pageData[1].proofDesc)">{{'查看'}}</div>
       </div>
       <div class="content">
           <div class="left">创作过程</div>
           <div class="right right_link" @click="showDetail(pageData[1].proofCreateProgress)">{{'查看'}}</div>
       </div>

       <div class="title">权利状况说明</div>
       <div class="content">
           <div class="left">权利取得方式</div>
           <div class="right">{{pageData[2].authGetWay.name}}</div>
       </div>
       <div class="content">
           <div class="left">权利归属方式</div>
           <div class="right">{{pageData[2].authBelongWay.name}}</div>
       </div>
       <div class="content" v-if="pageData[2].authBelongCer.length >= 1">
           <div class="left">权利归属证明</div>
           <div class="right"></div>
       </div>
       <div class="file" v-if="pageData[2].authBelongCer.length >= 1">
           <div class="file_content">
               <div class="left">{{pageData[2].authBelongCer[0]?pageData[2].authBelongCer[0].fileName : ''}}</div>
               <div class="right">
                   <!-- <Icon name="icon-xiazai" size="14px" color="#6377FF"></Icon> -->
                   </div>
           </div>
       </div>
       <div class="space"></div>
       <div class="content">
           <div class="left">权利拥有情况</div>
           <div class="right">{{pageData[3].rightSelectType == 0? '全部' : '部分'}}</div>
       </div>
       <div class="list">
           <div class="list_item" v-for="item in pageData[3].rightList" :key="item.name">
               {{item.name}}
           </div>
       </div>

       <div class="title">存留样本</div>
       <div class="content">
           <div class="left">样本形式</div>
           <div class="right">作品电子文件</div>
       </div>
       <div class="file" v-for="item in pageData[0].fileList" :key="item.fileName">
           <div class="file_content">
               <div class="left">{{item.fileName}}</div>
               <div class="right">
                   <!-- <Icon name="icon-xiazai" size="14px" color="#6377FF"></Icon> -->
                   </div>
           </div>
       </div>

       <div class="title">申请人信息</div>
       <div class="content">
           <div class="left">申请方式</div>
           <div class="right">由著作权人申请</div>
       </div>
       <div class="" v-for="item, index in pageData[3].copyrightOwnerList" :key="index">
            <div class="content">
                <div class="left">名字或名称</div>
                <div class="right">{{item.owner}}</div>
            </div>
            <div class="content">
                <div class="left">联系人</div>
                <div class="right">{{item.owner}}</div>
            </div>
            <div class="content">
                <div class="left">联系电话</div>
                <div class="right">/</div>
            </div>
            <div class="content">
                <div class="left">E-mail</div>
                <div class="right">/</div>
            </div>
            <div class="space"></div>
       </div>

       <div class="title">代理人信息</div>
       <div class="content">
           <div class="left">代理机构</div>
           <div class="right">湖北省一幕影链****公司</div>
       </div>
       <div class="content">
           <div class="left">联系人</div>
           <div class="right">王**</div>
       </div>
       <div class="content">
           <div class="left">联系电话</div>
           <div class="right">15957896089</div>
       </div>    
       <div class="content">
           <div class="left">E-mail</div>
           <div class="right">353898767@qq.com</div>
       </div>  

       <div class="title">相关材料</div>  
       <div class="file" v-if="pageData[2].authBelongCer.length >= 1">
           <div class="file_content">
               <div class="left">{{pageData[2].authBelongCer[0]? pageData[2].authBelongCer[0].fileName : ''}}</div>
               <div class="right">
                   <!-- <Icon name="icon-xiazai" size="14px" color="#6377FF"></Icon> -->
                   </div>
           </div>
       </div>

   </div>
</template>

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

export default Vue.extend({
   name:'',
   computed: {
       pageData(){
           return this.$store.state.copyright.eachPageData
       }
   },
   components: {
       Icon: ()=>import('@/components/common/Icon.vue'),
   },
   methods: {
       mapIdType(idType: number): string{
           switch(idType.toString()){
               case '0':
                   return '身份证';
               case '1':
                   return '营业执照';
               case '2':
                   return '企业法人营业执照';
               case '3':
                   return '组织机构代码证书';
               case '4':
                   return '事业单位法人证书';
               case '5':
                   return '社团法人证书';
               case '6':
                   return '统一社会信用代码';
               case '7':
                   return '其他有效证件';
           }
           return ''
       },
       mapDate(time: number): string{
           return moment().format('YYYY-MM-DD')
       },
       /**查看时展示详情 */
       showDetail(detail: string){
           this.$dialog({
               message: detail
           })
       }
   }
})
</script>

<style scoped lang='less'>
.title {
    padding: 0 16px;
    height: 37px;
    line-height: 37px;
    color: #7388AB;
    background-color: #F2F2F2;
    font-size: 12px;
}
.content {
    display: flex;
    justify-content: space-between;
    padding: 0 16px;
    height: 40px;
    line-height: 40px;
    background-color: #fff;
    font-size: 14px;
    .left {
        color: #7388AB;
    }
    .right {
        max-width: 60%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #2B446C;
    }
    .right_link {
        color: #6377FF;
    }
}
.space {
    height: 5px;
    background-color: #F2F2F2;
}

.file {
    padding: 10px 16px;
    .file_content {
        padding: 0 10px;
        min-height: 44px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #F4F5FF;
        border: 1px solid #6377FF;
        border-radius: 10px;
        .left {
            flex: 1;
            line-height: 44px;
            font-size: 14px;
            color: #2B446C;
            padding-right: 15px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .right {
            width: 10%;
        }
    }
}
.list {
    padding: 0px 19px 10px 19px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .list_item {
        width: 32%;
        text-align: center;
        height: 27px;
        line-height: 27px;      
        background: #F4F5FF;
        border: 1px solid #6377FF;
        margin-top: 8px;
        font-size: 12px;
        color: #7388AB;
    }
}
</style>