<template>
   <div class="certificate_box">
        <div class="certificate_toast" @click="hiddenCer"></div>
        <div class="certificate_container">
            <div class="certificate_tip">
                恭喜您获得版权证书
            </div>
            <div id="cerImg">
            <div  class="certificate_img">
                <img class="head_img" src="@/assets/img/cpr_head_img.png" alt="">
                <div class="head_text">版权存证证书</div>
                <div class="ten_text">区块链技术</div>
                <div class="hash_head">证书哈希</div>
                <div class="hash_text">{{CprCertificateData.cprHash}}</div>
                <div class="content_box">
                    <div class="content_item">
                        <div class="left">作品名称</div>
                        <div class="right">{{CprCertificateData.proofName}}</div>
                    </div>
                    <div class="content_item">
                        <div class="left">作品性质</div>
                        <div class="right">{{CprCertificateData.proofFeature}}</div>
                    </div>
                    <div class="content_item">
                        <div class="left">作品分类</div>
                        <div class="right">{{CprCertificateData.proofType}}</div>
                    </div>
                    <div class="content_item">
                        <div class="left">存证人</div>
                        <div class="right">{{CprCertificateData.evidenceUser}}</div>
                    </div>
                    <div class="content_item">
                        <div class="left">存证时间</div>
                        <div class="right">{{CprCertificateData.evidenceTime}}</div>
                    </div>
                    <div class="content_item">
                        <div class="left">存证平台</div>
                        <div class="right">一幕影链版权管理平台</div>
                    </div>
                    <div class="content_item">
                        <div class="left">平台网址</div>
                        <div class="right">https://nft.inmvo.com/</div>
                    </div>
                </div>
                <div class="qrcode_box">
                    <div class="img_qr">
                        <img src="@/assets/img/cpr_qrcode.jpg" alt="">
                        <div class="qr_text">湖北省版权保护中心</div>
                    </div>
                    <img src="@/assets/img/cpr_stamp.png" alt="">
                </div>
            </div>
            </div>
            <div class="certificate_dowload" @click="downloadCer()">
                保存下载
            </div>
            <div class="certificate_close" @click="hiddenCer">
                <Icon class="close_icon" name="icon-cha" size="20px"></Icon>
            </div>
        </div>
        <div class="open_tip" v-if="showTip">
            <div class="toast" @click="showTip = false"></div>
            <div class="tip ">请在默认浏览器中打开<img src="@/assets/img/youshangjiao.png" alt=""> </div>
        </div>
   </div>
</template>

<script lang='ts'>
/**框架*/
import Vue from 'vue'
/**工具库*/
// import vueQr from "vue-qr/src/packages/vue-qr.vue";
/**类型*/
/**组件*/
/**自定义方法*/
import {is_neizhi} from "@/util/common"
interface CprCertificateDataType {
    cprHash: string,
    proofName: string,
    proofFeature: string,
    proofType: string,
    evidenceUser: string,
    evidenceTime: string,
}
export default Vue.extend({
   name:'certificate',
   data(){
       return {
           showTip: false
       }
   },
   props:{
       CprCertificateData: {
           type: Object,
           default: {} as CprCertificateDataType,
           required: true

       }
   },
   components: {
    //    vueQr,
       Icon: ()=>import('@/components/common/Icon.vue')
   },
   methods: {
       hiddenCer(){
           this.$emit('hiddenCer')
       },
       async downloadCer(){
           if(is_neizhi()) {
               this.showTip = true
               return
           }
            // const QRImg = document.getElementsByClassName('img_qr')[0].children[0] as HTMLImageElement
            this.$toast.loading({
                message: '证书下载中...',
                duration: 20000,
            })
            const cprData = {
               cprHash: this.CprCertificateData.cprHash,
               proofName: this.CprCertificateData.proofName,
               proofFeature: this.CprCertificateData.proofFeature,
               proofType: this.CprCertificateData.proofType,
               evidenceUser: this.CprCertificateData.evidenceUser,
               evidenceTime: this.CprCertificateData.evidenceTime,
            //    qrUrl: QRImg.src,
            }
            const data = await this.$service.copyrightService.downloadCprCer(cprData) as any
            if(!data){
                this.$toast.success('证书下载失败，请稍后重试~')
                return 
            } 
            let blob = new Blob([data]);
            let url = window.URL.createObjectURL(blob)
            let link = document.createElement('a')
            link.download = 'cprCertificate.png'
            link.style.display = 'none'
            link.href = url
            document.body.appendChild(link)
            link.click()
            URL.revokeObjectURL(link.href)
            document.body.removeChild(link)
            this.$toast.clear()
            this.$toast.success('证书下载完成')
            return 
        },
   }
})
</script>

<style scoped lang='less'>
.certificate_box {
    -webkit-text-size-adjust: 100%;
    .certificate_toast {
       position: fixed;
       top: 0;
       left: 0;
       bottom: 0;
       right: 0;
       background: #000000;
       opacity: 0.6;
       z-index: 100
    }
    .certificate_container {
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        height: 540px;
        width: 284px;
        text-align: center;
        // background: #fff;
        z-index: 200;
        .certificate_tip {
            color: #fff;
            font-size: 14px;
            margin-bottom: 20px;
        }
        .certificate_img {
            position: relative;
            height: 425px;
            background-image: url('../../assets/img/cpr_bg.png');
            background-size: contain;
            background-repeat: no-repeat;
            padding: 4px;
            .head_img {
                margin: 40px auto 0;
                width: 50%;
            }
            .head_text {
                margin-top: 13px;
                text-align: center;
                font-size: 16px;
                color: #2B446C;
                font-weight: bold;
            }
            .ten_text {
                font-size: 16px;
                transform: scale(0.5);
                -webkit-transform: scale(0.5);
                -ms-transform: scale(0.5);
                -moz-transform: scale(0.5);
                -o-transform: scale(0.5);
                color: #5E6A77;
                position: relative;
                &:before {
                    content: " ";
                    font-size: 0;
                    height: 2px;
                    width: 80px;
                    border-radius: 50%;
                    background-color: #7388AB;
                    position: absolute;
                    left: 0px;
                    top: 50%;
                }
                &:after {
                    content: " ";
                    font-size: 0;
                    height: 2px;
                    width: 80px;
                    border-radius: 50%;
                    background-color: #7388AB;
                    position: absolute;
                    right: 0px;
                    top: 50%;
                }
            }
            .hash_head {
                height: 25px;
                line-height: 25px;
                background-image: url('../../assets/img/cpr_tip_img.png');
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
                font-size: 8px;
                transform: scale(0.6);
                color: #fff;
            }
            .hash_text {
                padding: 5px 14px;
                margin: auto ;
                border-radius: 5px;
                border: 1px solid #4D81B1;
                color: #2B446C;
                font-size: 6px;
                transform: scale(0.7);
            }
            .content_box {
                width: 100%;
                margin:  0 auto;
                font-size: 12px;
                transform: scale(0.6);
                transform-origin: 50% 0;
                .content_item {
                    margin-top: 6px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .left {
                        width: 35%;
                        color: #7388AB;
                        text-align: left;
                    }
                    .right {
                        flex: 1;
                        color: #2B446C;
                        text-align: left;
                    }
                }
            }
            .qrcode_box {
                width: 100%;
                height: 80px;
                margin: -40px auto 0;
                display: flex;
                justify-content: space-between;
                transform: scale(0.6);
                transform-origin: 50% 0;
                .img_qr {
                    height: 80px;
                    width: 80px;
                    font-size: 12px;
                    color: #2B446C;
                    .qr_text {
                        margin-top: 5px;
                        font-size: 8px;
                    }
                }

            }


        }
        .certificate_dowload {
            background: #fff;
            color: #979797;
            border-radius: 12px;
            width: 79px;
            height: 24px;
            line-height: 24px;
            text-align: center;
            margin: 0 auto;
            font-size: 12px;
            font-weight: bold;
            margin-top: 14px;
        }
        .certificate_close {
            margin-top: 30px;
            .close_icon {
                width: 20px;
                margin: 0 auto;
            }
        }
    }
    .open_tip {
        .toast {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: #333;
            opacity: 0.8;
            z-index: 1000;
        }
        .tip {
            position: fixed;
            top: 40px;
            left: 0;
            right: 0;
            z-index: 2000;
            text-align: center;
            color: #fff;
            display: flex;
            justify-content: space-around;
            align-items: flex-end;
            padding-left: 20px;
            img {
                width: 30%;
            }
        }
    }

}

</style>