<template>
  <div v-if="flag" ref="canvasRef" class="donate-certificate">
    <div class="header-bg">
      <img src="http://gyzs.onwall.cn/zhengshu@2x1.png" style="margin-top: 18vh; margin-bottom: 1vh; width: 100px; height: 100%; object-fit: contain;" />
    </div>
    <div class="title">
      <van-row align="center">
        <van-col>
          <span style="font-size: 0.8rem; color: #272727;">亲爱的捐赠者</span>
        </van-col>
        <van-col>
          <div style="color: #713610; padding: 1rem;" class="bg-gradient">{{ item.name }}</div>
        </van-col>
        <van-col>：</van-col>
      </van-row>
    </div>
    <div class="content">
      感谢您对“童声无界”多民族儿童共读活动的关注及捐赠。上海市儿童基金会已收到您的捐款。您的爱心将用于边疆地区少数民族儿童阅读能力的培育。共读一本书传递一份爱，初心为爱童声无界。感谢您对公益事业的支持。
    </div>
    <div class="price">
      <div>爱心捐赠</div>
      <div>{{ item.amt }}&nbsp;元</div>
    </div>
    <div class="organizer">
      <div class="wrapper">
        <p>上海市儿童基金会</p>
        <p>上海初心为爱公益基金会</p>
        <div style="position: absolute; width: 50%; height: 100%; top: 0; left: 0;">
          <img style="height: 100%; object-fit: contain;" src="http://gyzs.onwall.cn/stamp011.png" />
        </div>
        <div style="position: absolute; width: 50%; height: 100%; top: 0; right: 0;">
          <img style="height: 100%; object-fit: contain;" src="http://gyzs.onwall.cn/stamp021.png" />
        </div>
      </div>
    </div>
    <!-- <div class="date">{{ item.donate_date }}</div> -->
    <div class="text">
      证书编号：{{ item.cert_code }}
    </div>
    <div style="height: 3rem;" />
    <div class="wrapper-border">
      <div class="top-bg">
        <img src="http://gyzs.onwall.cn/donate_top1.png" style="width: 100%; height: 10rem;" />
      </div>
      <div class="center-bg">
        <img src="http://gyzs.onwall.cn/donate_center_1.png" :style="styleObject">
      </div>
      <div class="bottom-bg">
        <img src="http://gyzs.onwall.cn/donate_bottom_1.png" style="width: 100%;" />
      </div>
      <div style="height: 3rem;" />
    </div>
  </div>
  <div v-if="imgUrl">
    <img :src="imgUrl" crossOrigin="anonymous" :style="{ width: ref_width, height: ref_height }">
  </div>
</template>

<script setup>
// import icon_cert from '@images/zhengshu@2x.png'
// import icon_stamp01 from '@images/stamp01.png'
// import icon_stamp02 from '@images/stamp02.png'
// import donate_top from '@images/donate_top.png'
// import donate_center from '@images/donate_center.png'
// import donate_bottom from '@images/donate_bottom.png'
import $ from 'jquery'
import html2canvas from "html2canvas";

const canvasRef = ref(null);
const imgUrl = ref('');
const imgSrc = ref('');
const flag = ref(true);
const ref_width = ref('');
const ref_height = ref('');

const props = defineProps({
  item: Object,
})

onMounted(() => {
  console.warn('item', props.item);
  nextTick(() => {
    let canvasDom = canvasRef.value;
    ref_width.value = canvasDom.offsetWidth + 'px';
    ref_height.value = canvasDom.offsetHeight + 'px';
  });
  createImage();
});

// 获取像素比
const DPR = () => {
  // 获取设备dpi
  if (window.devicePixelRatio && window.devicePixelRatio > 1) {
    return window.devicePixelRatio * 2
  }
  // 直接返回高像素比
  return 8
}

const createImage = () => {
  nextTick(() => {
    // 获取要生成图片的 DOM 元素
    let canvasDom = canvasRef.value;
    const options = {
      backgroundColor: '#fff',
      // canvas: canvas,
      useCORS: true,//配置允许跨域
      scale: DPR(),
      // windowWidth: document.body.scrollWidth,
      // windowHeight: document.body.scrollHeight,
      // x: 0,
      // y: window.pageYOffset,
      // allowTaint: true,
      // background: "#d21f2c", // 一定要添加背景颜色，否则出来的图片，背景全部都是透明的
      dpi: 500 // 处理模糊问题
    };
    // console.log("获取指定的宽高", width, height, canvas);
    html2canvas(canvasDom, options)
      .then(canvas => {
        try {
          // 生成图片地址
          imgUrl.value = canvas.toDataURL("image/png");
          flag.value = false;
        } catch (e) {
          alert("图片跨域,保存失败");
        }
      })
      .catch(error => {
        console.error("绘制失败");
        console.error(error);
      });
  });
}
</script>

<script>
import mixin from 'common/mixin';

export default {
  mixins: [mixin.init],
  props: ['item'],
  data() {
    return {
      name: '',
      price: '',
      datetime: '',
      styleObject: {}
    }
  },
  mounted() {
    // 动态计算背景图高度
    const wrapper_height = $('.donate-certificate').height()
    const top_height = $('.top-bg').height()
    const bottom_height = $('.bottom-bg').height()
    const center_height = (wrapper_height - top_height - bottom_height).toFixed();
    this.styleObject = {
      width: '100%',
      height: center_height + 'px'
    }
  },
  methods: {

  }
}
</script>

<style lang="less" scoped>
.donate-certificate {
  background-image: url('http://gyzs.onwall.cn/zhengshu-banner.png');
  background-color: white;
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  position: relative;
  border-radius: 10px;
  // height: 85vh;
  box-shadow: 0px 0px 7px 0px rgba(3, 155, 178, 0.14);
  .header-bg {
    text-align: center;
  }

  .title {
    padding: 0 2rem;
  }

  .content {
    font-size: 0.85rem;
    padding: 2rem;
    line-height: 1.75;
    text-indent: 2rem;
  }

  .price {
    margin-left: 4rem;

    div:first-child {
      display: inline-block;
      font-size: 0.85rem;
      vertical-align: middle;
      margin-right: 0.5rem;
    }

    div:last-child {
      display: inline-block;
      font-size: 1.25rem;
      color: red;
      vertical-align: middle;
    }
  }

  .organizer {
    margin: 1rem;
    overflow: hidden;
    margin-right: 2rem;
    padding-bottom: 1rem;
    .wrapper {
      float: right;
      font-size: 0.8rem;
      text-align: center;
      line-height: 2;
      position: relative;
      color: #000;
      padding: 0.5rem 0;
    }
  }

  .date {
    color: #272727;
    font-size: 0.85rem;
    text-align: right;
    padding-right: 2rem;
  }
  .text {
    color: #713610;
    padding-left: 10%;
    font-size: 0.9rem;
    position: relative;
    bottom: 1rem;
    margin-top: 1rem;
  }
  .wrapper-border {
    position: absolute;
    // border: 0.5px solid #11D2B1;
    height: 95%;
    top: 0;
    width: 93%;
    margin: 3%;
    // border-radius: 1.5rem;
    // overflow: hidden;
    .top-bg {
      margin: 0;
        padding: 0;
        font-size: 0;
        position: absolute;
        top: 0;
        width: 100%;
    }
    .center-bg {
      margin: 0;
        padding: 0;
        font-size: 0;
        position: absolute;
        top: 10%;
        width: 100%;
    }
    .bottom-bg {
      margin: 0;
        padding: 0;
        font-size: 0;
        position: absolute;
        bottom: 0;
        width: 100%;
    }
  }
  .bg-gradient {
    // 文字下划线
    background: linear-gradient(#EAEAEA, #EAEAEA) no-repeat;
    /*调整下划线的宽度占百分之百  高度是3px */
    // background-size: 100% 3px;
    /* 调整下划线的起始位置 左侧是0 上边是1.15em */
    // background-position: 0 1rem;
    background-size: 100% 1px;
    background-position: 0 2.5rem;
  }
}
</style>