<template>
<div class="cpr_owner_card">
    <div class="cpr_owner_select" v-if="showSelect" @click="changeSelected">
        <div class="cpr_owner_noselect" v-if="!cprOwnerCard.selected"></div>
        <div class="cpr_owner_selected" v-else>
            <Icon name="icon-gou" size="17px" color="#F68585"></Icon>
        </div>
    </div>
    <div class="cpr_owner_content">
       <div class="cpr_owner_title">
           <div>著作权人{{xKey+1}}</div>
           <div @click="deleteCprOwner">
               <Icon name="icon-shanchu" size="14px" color="#ffffff"></Icon>
           </div>
       </div>
       <div class="cpr_owner_name">
           <div class="cpr_name_box">
               <div class="name">{{cprOwnerCard.owner}}</div>
               <div class="identity">{{cprOwnerCard.type == 0? '自然人' : '法人'}}</div>
           </div>
           <div class="identity_type">{{idType}}</div>
       </div>
       <div class="cpr_owner_info">
           <div>{{cprOwnerCard.idNumber}}</div>
       </div>
   </div>
</div>

</template>

<script lang='ts'>
/**框架*/
import Vue from 'vue'
/**工具库*/
/**类型*/
/**组件*/
/**自定义方法*/
interface CprOwnerCard {
    backPhoto: "https://test-nft.oss-cn-hangzhou.aliyuncs.com/20210916/328f5d842ba247a49d6f0640baf94a9e/20210728153025.png",
    certificatesPhoto: "",
    city: "杭州市",
    effectiveEndDate: "2018-12-10",
    effectiveStartDate: "1015-12-10",
    entrustProve: "https://test-nft.oss-cn-hangzhou.aliyuncs.com/20210916/328f5d842ba247a49d6f0640baf94a9e/20210728153025.png",
    idNumber: "420921193009090123",
    idType: 0,
    isEffective: 0,
    owner: "金庸",
    personalPhoto: "https://test-nft.oss-cn-hangzhou.aliyuncs.com/20210916/328f5d842ba247a49d6f0640baf94a9e/20210728153025.png",
    positivePhoto: "https://test-nft.oss-cn-hangzhou.aliyuncs.com/20210916/328f5d842ba247a49d6f0640baf94a9e/20210728153025.png",
    province: "浙江省",
    type: 0,
    selected: boolean,
    id: number
}
export default Vue.extend({
   name:'',
   props: {
       cprOwnerCard: {
           default: ()=>{return {} as CprOwnerCard} 
       },
       showSelect: {
           default: false,
           type: Boolean
       },
       xKey: {
           required: true,
           type: Number
       }
   },
   computed: {
       idType(): string{
           switch(this.cprOwnerCard.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 ''
       }
   },
   components: {
       Icon: ()=>import('@/components/common/Icon.vue')
   },
   methods: {
       changeSelected(){
           this.$emit('changeSelected', this.cprOwnerCard.id)
       },
       deleteCprOwner(){
           this.$emit('onDeleteCopyrightOwner', this.cprOwnerCard.id)
       }
   }
})
</script>

<style scoped lang='less'>
.cpr_owner_card {
    display: flex;
    align-items: center;
    .cpr_owner_select {
        margin-right: 8px;
        .cpr_owner_noselect {
            height: 17px;
            width: 17px;
            border-radius: 50%;;
            border: 2px solid #7388AB;
        }
    }
    .cpr_owner_content {
        flex: 1;
        .cpr_owner_title {
            height: 23px;
            background: #6377FF;
            border-radius: 10px 10px 0px 0px;
            padding: 0 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #fff;
            font-size: 12px;
            line-height: 23px;
        }
        .cpr_owner_name {
            padding: 0 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: 1px solid #F5F5F5;
            .cpr_name_box {
                height: 40px;
                display: flex;
                align-items: center;
                .name {
                    color: #2B446C;
                    font-size: 12px;
                    margin-right: 10px;
                }
                .identity {
                    width: 48px;
                    color: #6377FF;
                    border: 1px solid #6377FF;                  
                    border-radius: 5px;
                    text-align: center;
                }
                }
        }
        .cpr_owner_info {
            height: 36px;
            border: 1px solid #F5F5F5;
            display: flex;
            padding: 0 12px;
            align-items: center;
            justify-content: space-between;
        }
    }
} 

</style>