<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" v-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-0"/>
        </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?certificateData.nftId:'无'}}</div>
                    <div class="pt-1" v-if="categoryId==1">剧本哈希</div>
                    <div v-if="categoryId==1">{{certificateData?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-4/12 text-left">{{getPreText()}}名称</div>
          <div class="flex-1 text-left break-all">{{ certificateData?certificateData.value_name:'无'}}</div>
        </div>
        <div class="ceritfy-item  flex py-1">
          <div class="w-4/12 text-left">发行人地址</div>
          <div class="flex-1 text-left break-all">{{ certificateData?certificateData.wallet:'无' }}</div>
        </div>
        <div class="ceritfy-item  flex py-1">
          <div class="w-4/12 text-left">发行人</div>
          <div class="flex-1 text-left break-all">{{ certificateData?certificateData.value_publisher:'无' }}</div>
        </div>
        <div class="ceritfy-item  flex py-1">
          <div class="w-4/12 text-left">存证时间</div>
          <div class="flex-1 text-left break-all">{{ createTime }}</div>
        </div>
        <div class="ceritfy-item  flex py-1" v-if="categoryId==1">
          <div class="w-4/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-4/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>
</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(){
      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(){
        // let certifyCard = this.$refs.certifyCard as HTMLElement
        try {
          let certifyCard = document.getElementById('certifyCard') as HTMLElement
          let dataUrl = await toPng(certifyCard)
          download(dataUrl, 'my-node.png');
            // var img = new Image();
            // img.src = dataUrl;
            // console.log(img.src);
          const img = new Image()
          img.src = dataUrl
          document.body.appendChild(img)//测试直接生成图片是否有问题

        }catch(error){
          console.error('oops, something went wrong!', error)
        }
        //  const canvas2 = document.createElement('canvas');
        //  let _canvas = document.getElementById('certifyCard');
        //  const w = parseInt(window.getComputedStyle(_canvas).width);
        //  const h = parseInt(window.getComputedStyle(_canvas).height);
        //  const dpr = window.devicePixelRatio || 1;
        //  canvas2.width = w * dpr;
        //  canvas2.height = h * dpr;
        //  canvas2.style.width = w + 'px'
        //  canvas2.style.height = h + 'px'
        //  var context = canvas2.getContext('2d');
        //  context.scale(1, 1);
        //  window.scrollTo(0, 0); 
        //  html2canvas(_canvas, { canvas: canvas2 }).then(function(canvas) {
        //    const imgUrl = canvas.toDataURL('image/png')
        //    download(imgUrl,'certify.png')
        //   //  window.location.href = imgUri; 
        //  });
    },
    getPreText():string{
      switch (this.categoryId) {
        case '1':
          return '剧本'
        case '2':
          return '视频'
        case '3':
          return '电影'
        case '4':
          return '音频'
        case '5':
          return '图片'
        case '6':
          return '衍生品'
        default:
          return ''
      }
    },
  },
});
</script>
<style scoped>
/* #certificate-title {
  background: url('/img/certify-bg.png') no-repeat ;
  background-size: cover;
} */
</style>
