<template>
  <div>
    <div :class="[$style.wrapper, 'sd-web-print']">
      <div ref="flowForm" :class="$style.inner">
        <sd-print-form v-if="showForm" :flow-data="webflow.flowData">
          <template v-slot="scope">
            <slot name="form" v-bind="scope" />
          </template>
        </sd-print-form>
      </div>
    </div>
    <a-modal
      :visible="showLoading"
      :footer="null"
      :closable="false"
      :transition-name="null"
      :mask-transition-name="null"
      >正在保存审批单，请稍候……</a-modal
    >
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
import loginService from '@/login/login-service'
import components from './_import-components/sd-form-snapshot-import'

// 给审批单截图
export default {
  name: 'SdFormSnapshot',
  components,
  data() {
    return {
      showForm: false,
      showLoading: false,
    }
  },
  methods: {
    run() {
      let p
      if (this.sdPlatform.isIE) {
        // IE很慢，加一个提示框
        this.showLoading = true
        p = new Promise((resolve, reject) => {
          setTimeout(resolve, 0)
        })
      } else {
        p = Promise.resolve()
      }
      return p
        .then(() => loginService.updateAccessToken()) // 表单里面有签名图等，保证token有效
        .then(() => {
          this.showForm = true
          return new Promise((resolve, reject) => {
            // 稍等一会儿界面稳定再截图
            setTimeout(resolve, 500)
          })
        })
        .then(() => {
          return html2canvas(this.$refs.flowForm)
        })
        .then((canvas) => {
          this.showForm = false
          this.showLoading = false
          return new Promise((resolve, reject) => {
            if (canvas.msToBlob) {
              resolve(canvas.msToBlob())
            } else {
              canvas.toBlob((blob) => {
                resolve(blob)
              })
            }
          })
        })
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;
.wrapper {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
.inner {
  box-sizing: content-box;
  width: 210mm;
  padding: 20mm;
  table {
    tr > td + td {
      // 修复html2canvas边框变粗的bug
      /* stylelint-disable-next-line  */
      border-left-width: 0 !important;
    }
    > tr + tr > td {
      // 修复html2canvas边框变粗的bug
      /* stylelint-disable-next-line  */
      border-top-width: 0 !important;
    }
  }
}
</style>
