<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">
                <div class="img_head">存证证书</div>
                <div class="img_logo"></div>
                <div class="img_title">区块链版权电子数据确权书</div>
                <div class="img_line"></div>
                <div class="img_qr">
                    <vueQr :text="certificateData.qrUrl"></vueQr>
                </div>
                <div class="img_qr_tip">扫一扫 查看存证</div>
                <div class="img_hash_tip">NFT哈希</div>
                <div class="img_hash">{{certificateData.nftHash || ''}}</div>
                <div class="img_text">
                    <div class="img_text_item">
                        <div class="item_label">存证名称</div>
                        <div class="item_value">{{certificateData.nftName}}</div>
                    </div>
                    <div class="img_text_item">
                        <div class="item_label">存证人</div>
                        <div class="item_value">{{certificateData.nftPublisher}}</div>
                    </div>
                    <div class="img_text_item">
                        <div class="item_label">存证时间</div>
                        <div class="item_value">{{certificateData.nftPublishTime}}</div>
                    </div>
                    <div class="img_text_item">
                        <div class="item_label">发证单位</div>
                        <div class="item_value">一幕影链版权管理平台</div>
                    </div>
                </div>
                <img class="seal_img" src="@/assets/img/cpr_stamp.png" alt="">
            </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" v-if="openBrowser">请在默认浏览器中打开<img src="@/assets/img/youshangjiao.png" alt=""> </div>
            <div class="tip" v-else>请到我的NFT中进行下载</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 CertificateDataType {
    nftHash: string;
    nftName: string;
    nftPublisher: string;
    nftPublishTime: number;
    qrUrl: string
}
export default Vue.extend({
   name:'certificate',
   data(){
       return {
           showTip: false
       }
   },
   props:{
       certificateData: {
           type: Object,
           default: {} as CertificateDataType,
           required: true
       },
       openBrowser: {
           default: 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 nftData = {
               nftHash: this.certificateData.nftHash,
               nftName: this.certificateData.nftName,
               nftPublisher: this.certificateData.nftPublisher,
               nftPublishTime: this.certificateData.nftPublishTime,
               qrUrl: QRImg.src,
            }
            const data = await this.$service.nftService.downloadCerfificate(nftData) 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 = 'certificate.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 
            // function arrayBufferToBase64(buffer:any) {
            //   var binary = '';
            //   var bytes = new Uint8Array(buffer);
            //   var len = bytes.byteLength;
            //   for (var i = 0; i < len; i++) {
            //       binary += String.fromCharCode(bytes[i]);
            //   }
            //   return window.btoa(binary);
            // }
            // const url= arrayBufferToBase64(data);
            // await download('data:image/jpeg;base64,'+url, '证书.png')
    
    
            // try {
            //   let link = document.createElement('a')
            //   let certifyCard = document.getElementById('certifyCard') as HTMLElement
            //   let dataUrl = await toPng(certifyCard)
            //   link.download = '证书.png'
            //   link.href = dataUrl
            //   link.click()
            // }catch(error){
            //   console.error('oops, something went wrong!', error)
            // }
        },
   }
})
</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: 440px;
            background-image: url('../../assets/img/cer_bg.png');
            background-size: contain;
            padding: 4px;
            .img_head {
                width: 50%;
                height: 27px;
                margin: 0 auto;
                color: #fff;
                font-size: 10px;
                letter-spacing: 3px;
                text-align: center;
                background-image: url('../../assets/img/cer_head.png');
                background-size: contain;
                background-repeat: no-repeat;
            }
            .img_logo {
                height: 21px;
                width: 47px;
                margin: 0 auto;
                background-image: url('../../assets/img/cmp_logo.png');
                background-size: contain;
                background-repeat: no-repeat;
                margin-top: 14px;
            }
            .img_title {
                color: #2b446c;
                font-size: 16px;
                font-weight: bold;
                margin-top: 10px;
            }
            .img_line {
                height: 5px;
                width: 60%;
                margin: 5px auto 0;
                background-image: url('../../assets/img/cer_line_img.png');
                background-size: cover;
                background-repeat: no-repeat;
            }
            .img_qr {
                height: 90px;
                width: 90px;
                margin: 10px auto 0;

            }
            .img_qr_tip {
                color: #2b446c;
                font-size: 10px;
                margin-top: 5px;
                // transform: scale(80%);
                // -webkit-transform: scale(80%);

            }
            .img_hash_tip {
                font-size: 10px;
                height: 18px;
                line-height: 18px;
                color: #fff;
                width: 30%;
                margin: 10px auto 0;
                background-image: url('../../assets/img/img_tip.png');
                background-size: contain;
                background-repeat: no-repeat;
                // transform: scale(80%);
                // -webkit-transform: scale(80%);
            }
            .img_hash {
                width: 85%;
                margin: 5px auto 0;
                color: #2B446C;
                font-size: 10px;
                border: 1px solid #979797;   
                border-radius: 5px;
                line-height: 18px;
                padding: 4px 8px;
                // transform: scale(85%);
                // -webkit-transform: scale(85%);
            }
            .img_text {
                width: 70%;
                margin: 10px auto 0;
                // transform: scale(85%);
                // -webkit-transform: scale(85%);
                .img_text_item {
                    display: flex;
                    font-size: 10px;
                    text-align: left;
                    height: 23px;
                    .item_label {
                        width: 65px;
                        color: #7388AB;
                    } 
                    .item_value {
                        color: #2B446C;
                    } 
                }
            }
            .seal_img {
                position: absolute;
                right: 30px;
                bottom: 30px;
                width: 70px;
            }

        }
        .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>