<template>
  <div >
    <div class="py-3 text-xs">恭喜您获得NFT证书</div>
    <div class="w-6/12 object-cover mx-auto">
      <img src="./stars.png" class="mx-auto" />
    </div>
    <div class="box xs:mt-6 mt-3" ref="certifyCard" id="certifyCard">
      <div id="certificate-title" class=" top xs:h-60 h-48 relative bg-certifyBG  bg-no-repeat bg-cover">
        <div class="blur-img h-full w-full absolute top-0 left-0"></div>
        <div class="pt-6 xs:text-sm text-xs">
          <div>影视区块链版权电子数据确权书</div>
        </div>
        <div class=" h-40 flex items-center relative">
          <img id="coverImg" :src="certificateData.cover" v-if="certificateData.cover" class=" max-w-20 xs:max-w-24 mx-auto mt-4 mb-4 max-h-32" />
          <img id="coverImg" v-else-if="!coverName" src="/img/cover.png" class=" max-w-20 xs:max-w-24 mx-auto mt-4 mb-4 max-h-32" />
          <img id="coverImg" :src="showUploadFile" v-else class=" max-w-20 xs:max-w-24 mx-auto mt-4 mb-4 max-h-32" />
          <img src="./mark.png" class=" absolute right-20 bottom-10 w-1/5"/>
        </div>
        <div class="float-box  w-full absolute -bottom-10  text-3xs xs:text-2xs">
            <div class="w-11/12 p-2 flex-wrap mx-auto flex break-all bg-font-white shadow-md rounded  text-font-black">
                <div class="w-full text-left ">
                    <div>NFT哈希</div>
                    <div>{{certificateData.NFTHash?certificateData.NFTHash:'无'}}</div>
                    <!-- <div class="pt-1" v-if="categoryId==1 || categoryId==5">{{getPreText()}}哈希</div>
                    <div v-if="categoryId==1 || categoryId==5">{{certificateData.fileHash?certificateData.fileHash:''}}</div> -->
                    <div class="pt-1">{{getPreText()}}哈希</div>
                    <div >{{certificateData.fileHash?certificateData.fileHash:''}}</div>
                </div>
            </div>
        </div>
      </div>
      <div class="bot bg-font-white text-font-black px-3 py-10 pt-12 text-3xs xs:text-2xs">
        <div class="ceritfy-item  flex py-1">
          <div class="w-3/12 text-left">{{getPreText()}}名称</div>
          <!-- <div class="w-3/12 text-left">作品名称</div> -->
          <div class="flex-1 text-left break-all">{{ certificateData.value_name?certificateData.value_name:''}}</div>
        </div>
        <div class="ceritfy-item  flex py-1">
          <div class="w-3/12 text-left">发行人地址</div>
          <div class="flex-1 text-left break-all">{{ certificateData.wallet?certificateData.wallet:'' }}</div>
        </div>
        <div class="ceritfy-item  flex py-1" v-if="certificateData.publisher">
          <div class="w-3/12 text-left">发行人</div>
          <div class="flex-1 text-left break-all">{{ certificateData.publisher }}</div>
        </div>
        <div class="ceritfy-item  flex py-1">
          <div class="w-3/12 text-left">存证时间</div>
          <div class="flex-1 text-left break-all">{{ certificateData.publishTime?certificateData.publishTime:'' }}</div>
        </div>
        <!-- <div class="ceritfy-item  flex py-1" v-if="categoryId==1">
          <div class="w-3/12 text-left">剧本审核</div>
          <div class="flex-1 text-left break-all" v-if="auditing === 0">剧本未审核</div>
        </div> -->
        <!-- <div class="ceritfy-item  flex py-1" v-if="categoryId==1">
          <div class="w-3/12 text-left">版权证明</div>
          <div class="flex-1 text-left break-all" v-if="copyRight === 0">版权未审核</div>
        </div> -->
      </div>
    </div>
    <div class="py-3 text-xs" @click="downloadImg">点击下载保存图片</div>
    <!-- <div class="py-3 text-xs">请截图保存图片</div> -->


  </div>
</template>

<script lang="ts">
import Vue from "vue";
// import download from 'downloadjs'
// import moment from 'moment'
// import html2canvas from 'html2canvas'
// import { toPng } from 'html-to-image';
import { mapState } from "vuex";
'bg-certifyBG'
export default Vue.extend({
  data(){
    return {
      // createTime: moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  computed:{
    ...mapState("create", ["coverFile","coverName"]),
    showUploadFile():any{
      if(this.coverFile) {
        return window.URL.createObjectURL(this.coverFile)
      }else {
        return ''
      }
    }
  },
  // mounted(){
  //       const fileReader = new FileReader();
  //       fileReader.readAsDataURL(this.coverFile);
  //       fileReader.onload = function (){
  //           (document.getElementById("coverImg") as any).src = fileReader.result;
  //       }
  // },
  props: {
    name: {
      type: String,
      default: "飙车大师",
    },
    addr: {
      type: String,
      default: "ij1hoi12oi312i31ik1op1o1lwm3nhjk",
    },
    publisher: {
      type: String,
      default: "张瀚峰",
    },
    timeStamp: {
      type: String,
      default: "2021/06/19 14:42:24",
    },
    auditing: {
      type: Number,
      default: 0,
    },
    copyRight: {
      type: Number,
      default: 0,
    },
    NFTHASH:{
        type:String,
        default: "1a4f5032c12d8638324b5c97699e5c3ed5bee1325865kjdshshhdh"
    },
    fileHash:{
        type:String,
        default: "1z9e1beb62e754ff7666hgjggFFHHKJJKKKK5a0ddd7879774757474974"
    },
    certificateData:Object,
    categoryId:{
      type:String,
      default: '1'
    }
  },
  methods:{
    async downloadImg(){
        this.$toast.loading({
            message: '证书下载中...',
            duration: 20000,
        })
        const nftData = {
          nftHash:this.certificateData.NFTHash || "",
          hash:this.certificateData.fileHash || "",
          name:this.certificateData.value_name || "",
          wallet:this.certificateData.wallet || "",
          publisher:this.certificateData.publisher || "",
          publishTimer:this.certificateData.publishTime || "",
          coverUrl: this.certificateData.cover || "",
          nftType: this.getPreText()
        }
        const data = await this.$service.nftService.downloadCerfificate(nftData) as any
        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)
        // }
    },
    getPreText():string{
      switch (this.categoryId) {
        case '1':
          return '剧本'
        case '剧本':
          return '剧本'
        case '2':
          return '视频'
        case '视频':
          return '视频'
        case '3':
          return '电影'
        case '电影':
          return '电影'
        case '4':
          return '音频'
        case '音频':
          return '音频'
        case '5':
          return '图片'
        case '图片':
          return '图片'
        case '6':
          return '衍生品'
        case '衍生品':
          return '衍生品'
        default:
          return '作品'
      }
    },
  },
});
</script>
<style scoped>
/* #certificate-title {
  background: url('/img/certify-bg.png') no-repeat ;
  background-size: cover;
} */
</style>
