<template>
    <div>
        <div class="copyright_card" @click="onClickCpyCard">
            <div class="card_title" >
                <div class="title_left">{{copyrightTitle}}</div>
                <div class="title_right" :class="titleRightColor">{{copyrightState}}</div>
            </div>
            <div class="card_time" >{{copyrightData.updateDate}}</div>
            <div class="card_footer">
                <div class="footer_left">流水号&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{serialNum || '暂无'}}</div>
                <div class="footer_right" @click.stop="showActionSheet=true">···</div>
            </div>
        </div>
        <van-action-sheet v-model="showActionSheet" :actions="actions" cancel-text="取消" @select="onActionSelect" @cancel="showActionSheet=false" />
    </div>
</template>

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

// interface CopyrightDataType {
//     content: string,
//     createDate: string,
//     id: number,
//     json: string,
//     step: number,
//     updateDate: string,
//     userId: number,
// }
export default Vue.extend({
   name:'',
   props: {
       copyrightData: {
           default: ()=>{return {} as any},
           required: true
       }
   },
   data(){
       return {
           showActionSheet: false
       }
   },
   computed: {
       titleRightColor(): string {
           switch(this.copyrightData.registerState){
               case -1:
                   return 'blue';
               case 0:
                   return 'blue';
               case 2:
                   return 'green';
               case 3:
                   return 'red';
               case 4:
                   return 'green';
               case 5:
                   return 'red';
           }
           return ''
       },
       copyrightState(): string{
           switch(this.copyrightData.registerState){
               case -1:
                   return '已撤回';
               case 0:
                   return '待核验';
               case 2:
                   return '提交审核';
               case 3:
                   return '已驳回';
               case 4:
                   return '登记成功';
               case 5:
                   return '审核失败';
           }
           return '草稿'
       },
       copyrightTitle(): string {
           if(this.copyrightState == '草稿') {
               return JSON.parse(this.copyrightData.content)[1].proofName
           }else {
               return this.copyrightData.opusName
           }
       },
       serialNum(): string {
           if(this.copyrightState == '草稿') {
               return ''
           }else {
               return this.copyrightData.serialNum
           }
       },
       actions(): any {
           switch(this.copyrightData.registerState){
               case -1:
                   return [{name:'编辑', value: 0}, {name:'删除', value: 1}];
               case 0:
                   return [{name:'撤回', value: 0}];
               case 2:
                   return [{name:'查看详情', value: 0}];
               case 3:
                   return [{name:'查看详情', value: 0}];
               case 4:
                   return [{name:'查看存证证书', value: 0}, {name:'查看版权证书', value: 1}, {name:'申请纸质证书', value: 2}];
               case 5:
                   return [{name:'重新申请', value: 0}, {name:'删除', value: 1}];
           }
           return [{name:'编辑', value: 0}, {name:'删除', value: 2}]
       }
   },
   methods: {
       /**点击选择时 */
       onActionSelect(selected: {name: string, value: number}){
           this.$emit('onActionSelect', {id: this.copyrightData.id, selected, state: this.copyrightState, hash: this.copyrightData.nftHash, serialNum: this.copyrightData.serialNum})
           this.showActionSheet = false
       },
       /**点击整个卡片时 */
       onClickCpyCard(){
           this.$emit('onClickCpyCard', {id: this.copyrightData.id, state: this.copyrightState})
       }
   }
})
</script>

<style scoped lang='less'>
.copyright_card {
    padding: 13px;
    box-shadow: 0px 2px 8px 0px #F5F5F5;
    border-radius: 10px;
    .card_title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title_left {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            color: #2B446C;
            width: 80%;
            font-size: 16px;
        }
        .title_right {
            color: #2B446C;
            font-size: 12px;
        }
        .blue {
            color: #6377FF;
        }
        .green {
            color: #51AB8C;
        }
        .red {
            color: #FF5454
        }
    }
    .card_time {
        color: #7388AB;
        font-size: 12px;
        margin-top: 10px;
    }
    .card_footer {
        margin-top: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .footer_left {
            color: #2B446C;
            font-size: 12px;
        }
        .footer_right {
            width: 40px;
            height: 16px;
            line-height: 16px;
            text-align: center;
            border: 1px solid #8899B3;
            border-radius: 9px;
        }
    }
}
// 更改弹出层样式
.van-action-sheet__cancel, .van-action-sheet__item {
    background-color: #fff;
    color: #2B446C;
}
.van-action-sheet__item:active {
  background-color: #F5F5F5;
}
.van-action-sheet__gap {
    background-color: #2B446C;
    height: 2px;
}

</style>