<template>
  <div class="Credentials">
    <div class="content" ref="container">
      <div class="hash">
        <div>公益哈希： 0x8e9c93b62d423de639276287a889abdd</div>
        <div>区块高度： 6188888</div>
        <div>上链时间： 2020年10约11日 18：28：27</div>
      </div>
      <div class="desc">
        <div>尊敬的董军</div>
        <div>您与2020年2月8日，</div>
        <div>向武汉医院参加志愿者</div>
        <div>感谢您雪中送炭和无私奉献的精神！</div>
      </div>
      <div class="code-wrap">
        <div>扫描二维码查看更多信息</div>
      </div>
    </div>
    <div class="bottom">
      <van-button
        @click="back()"
        class="left"
        block
        color="#3C4067"
      >返回</van-button>
      <van-button
        @click="save()"
        class="right"
        block
        color="#3F79FE"
        type="primary"
      >保存证书
        <div ref="aaaa" class="aaa"></div>
      </van-button>
    </div>
  </div>
</template>

<script lang="ts">
import html2canvas from 'html2canvas';
import { Component, Prop, Watch, Vue } from 'vue-property-decorator';
import { Button, Image } from 'vant';
@Component({
  components: {
    [Button.name]: Button,
    [Image.name]: Image,
  },
})
export default class Detail extends Vue {
  private back() {
    this.$router.back();
  }
  private async save() {
    const dom = this.$refs['container'];
    const {width, height} = (dom as any).getBoundingClientRect();
    // 获取像素比
    const dpr = window.devicePixelRatio || 1;
    // 创建自定义 canvas 元素
    const canvas = document.createElement('canvas');
    // 设定 canvas 元素属性宽高为 DOM 节点宽高 * 像素比
    canvas.width = width * dpr;
    canvas.height = height * dpr;
    // 设定 canvas css宽高为 DOM 节点宽高
    canvas.style.width = `${width}px`;
    canvas.style.height = `${height}px`;
    // 获取画笔
    const context = (canvas as any).getContext('2d');
    // 将所有绘制内容放大像素比倍,解决dpr不同图片模糊问题
    (context as any).scale(dpr, dpr);
    await html2canvas((dom as any), {
      width,
      height: height * 1.5,
      scrollY: 0,
      scrollX: 0,
    }).then((canvas) => {
        const dataUrl = canvas.toDataURL('image/png', 1.0);
        const parent = this.$refs['aaaa'];
        (parent as any).innerHTML = `<img src="${dataUrl}" style="width:100%;">`;
    });
  }
}
</script>

<style lang="scss" scoped>
.Credentials {
  .content {
    margin: auto;
    width: 345px;
    height: 509px;
    background-image: url("../../assets/proofImg.png");
    background-size: 345px 509px;

  }
  .bottom {
    margin-top: 38px;
    display: flex;
    justify-content: center;
    .left,.right {
      height: 40px;
      width: 120px;
      border-radius: 4px;
      font-size: 16px;
    }
    .left {
      margin-right: 25px;
    }
    .right {
      position: relative;
    }
    .aaa {
      position: absolute;
      top: 0;
      opacity: 0;
    }
  }
}
</style>