<template>
  <div class="donate-certificate">
    <div class="header-bg">
      <van-image width="100" height="100" fit="contain" :src="icon_cert" style="margin-top: 15vh;" />
    </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;">
          <van-image height="100%" fit="contain" :src="icon_stamp01" />
        </div>
        <div style="position: absolute; width: 50%; height: 100%; top: 0; right: 0;">
          <van-image height="100%" fit="contain" :src="icon_stamp02" />
        </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">
        <van-image :src="donate_top" style="width: 100%; height: 10rem;" />
      </div>
      <div class="center-bg">
        <img :src="donate_center" :style="styleObject">
      </div>
      <div class="bottom-bg">
        <van-image :src="donate_bottom" style="width: 100%;" />
      </div>
      <div style="height: 3rem;" />
    </div>
  </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'

</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>