<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">
      <div 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>
          <img  v-if="!coverName" src="/img/cover.png" class=" w-20 xs:w-24 mx-auto mt-4" />
          <img id="coverImg" :src="showUploadFile" v-else class=" w-20 xs:w-24 mx-auto mt-4" />
        </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">剧本哈希</div>
                    <div>{{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">剧本名称</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">
          <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">
          <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 { toPng } from 'html-to-image';
import { mapState } from "vuex";
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,
  },
  methods:{
    async downloadImg(){
      let certifyCard = this.$refs.certifyCard as HTMLElement
      toPng(certifyCard).then(function (dataUrl) {
        // var img = new Image();
        // img.src = dataUrl;
        // console.log(img.src);
        download(dataUrl, 'my-node.png');
      })
      .catch(function (error) {
        console.error('oops, something went wrong!', error);
      });
    }
  },
});
</script>
