import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'
export function getPdf(title) {
  // pdfDom 这个就是你vue页面中定义的ID  比如<div id="pdfDom">  这个也要避下雷
  const element = document.getElementById('pdfDom')
  window.pageYoffset = 0
  document.documentElement.scrollTop = 0
  document.body.scrollTop = 0
  setTimeout(() => {
    // const nowDate = new Date();
    // const date = {
    //   year: nowDate.getFullYear(),
    //   month: nowDate.getMonth() + 1,
    //   date: nowDate.getDate(),
    //   hours: nowDate.getHours(),
    //   minutes: nowDate.getMinutes(),
    //   seconds: nowDate.getSeconds(),
    // };
    // const newMonth = date.month > 10 ? date.month : "0" + date.month;
    // const newDay = date.date > 10 ? date.date : "0" + date.date;
    // const newMinutes = date.minutes < 10 ? "0" + date.minutes : date.minutes;
    // const newSeconds = date.seconds < 10 ? "0" + date.seconds : date.seconds;
    // const value = date.year + newMonth + newDay + date.hours + newMinutes + newSeconds;
    let id = ''
    //创建一个画布    ---  增加导出的pdf水印 ！！
    let can = document.createElement('canvas')
    //设置画布的长宽
    can.width = 400
    can.height = 500
    let cans = can.getContext('2d')
    //旋转角度
    cans.rotate((-15 * Math.PI) / 180)
    cans.font = '18px Vedana'
    //设置填充绘画的颜色、渐变或者模式
    cans.fillStyle = 'rgba(200, 200, 200, 0.40)'
    //设置文本内容的当前对齐方式
    cans.textAlign = 'left'
    //设置在绘制文本时使用的当前文本基线
    cans.textBaseline = 'Middle'
    //在画布上绘制填色的文本（输出的文本，开始绘制文本的X坐标位置，开始绘制文本的Y坐标位置）
    //cans.fillText(value, can.width / 8, can.height / 2)
    let div = document.createElement('div')
    div.id = id
    div.style.pointerEvents = 'none'
    div.style.top = '2000px'
    div.style.left = '-2000px'
    div.style.position = 'fixed'
    div.style.zIndex = '100000'
    div.style.width = document.getElementById('pdfDom').scrollHeight + 'px'
    div.style.height = document.getElementById('pdfDom').scrollHeight + 'px'
    div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat'
    document.getElementById('pdfDom').appendChild(div) // 到页面中
    html2Canvas(element, {
      allowTaint: true,
      useCORS: true, // 需要注意，element的 高度 宽度一定要在这里定义一下，不然会存在只下载了当前你能看到的页面   避雷避雷！！！
      scale: 2, // 提升画面质量，但是会增加文件大小
      height: document.getElementById('pdfDom').scrollHeight,
      windowHeight: document.getElementById('pdfDom').scrollHeight
    }).then(function (canvas) {
      var contentWidth = canvas.width
      var contentHeight = canvas.height
      // 一页pdf显示html页面生成的canvas高度;
      var pageHeight = (contentWidth * 841.89) / 592.28
      // 未生成pdf的html页面高度
      var leftHeight = contentHeight
      // 页面偏移
      var position = 0
      // a4纸的尺寸[595.28,841.89]，html页面生成的canvas在pdf中图片的宽高
      var imgWidth = 595.28
      var imgHeight = (592.28 / contentWidth) * contentHeight
      var pageData = canvas.toDataURL('image/jpeg', 1.0)
      var pdf = new JsPDF('', 'pt', 'a4')
      // 有两个高度需要区分，一个是html页面的实际高度，和生成pdf的页面高度(841.89)
      // 当内容未超过pdf一页显示的范围，无需分页
      if (leftHeight < pageHeight) {
        pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
      } else {
        while (leftHeight > 0) {
          pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
          leftHeight -= pageHeight
          position -= 841.89
          // 避免添加空白页
          if (leftHeight > 0) {
            pdf.addPage()
          }
        }
      }
      pdf.save(title + '.pdf')
    })
  }, 1000)
}
