<template>
  <!-- domId 是要截图的容器 id -->
  <view class="my-html2canvas" :prop="domId" :change:prop="h2cRender.watchDomId">
    <!-- 用于触发 renderjs 截图 -->
    <text :prop="expOver" :change:prop="h2cRender.watchExpOver"></text>
  </view>
</template>

<script>
export default {
  props: {
    domId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      expOver: 0
    }
  },
  methods: {
    // 业务层调用这个方法开始截图
    h2cRenderDom() {
      // #ifdef H5
      // H5 直接在当前环境（有 DOM）里跑 renderDom
      this.$emit('renderDomInH5')
      // #endif

      // #ifndef H5
      // 非 H5（APP 等）通过 expOver 触发 renderjs 中的截图逻辑
      this.expOver++
      // #endif
    },
    // renderjs 截图完成后会 callMethod 回调到这里
    renderOver(base64) {
      this.$emit('renderOver', base64)
    }
  }
}
</script>

<!-- renderjs 只能内联 -->
<script module="h2cRender" lang="renderjs">
import html2canvas from 'html2canvas'

export default {
  data() {
    return {
      domIdValue: ''
    }
  },
  methods: {
    async renderDom() {
      try {
        const el = document.getElementById(this.domIdValue)
        if (!el) {
          console.error('[MyHtml2canvas] dom 未找到，请检查 domId：', this.domIdValue)
          return
        }
        const canvas = await html2canvas(el, {
          width: el.offsetWidth,
          height: el.offsetHeight,
          x: 0,
          y: 0,
          useCORS: true,
          scale: 2
        })
        const base64 = canvas.toDataURL('image/png', 1)
        this.$ownerInstance.callMethod('renderOver', base64)
      } catch (err) {
        console.error('[MyHtml2canvas] html2canvas 失败：', err && err.message)
      }
    },
    // script 部分通过 :prop 传入 domId
    watchDomId(newVal) {
      this.domIdValue = newVal
    },
    // expOver 变化时触发渲染
    watchExpOver(newVal) {
      if (newVal !== 0) {
        this.renderDom()
      }
    }
  }
}
</script>

<style>
.my-html2canvas {
  position: relative;
}
</style>

