<template>
  <a-modal :visible="visible" title="销售二维码" :footer="null" @cancel="visible=false">
    <div style="text-align: center;font-size: 14px;">{{ `销售名称:${salesInfo.name}` }}</div>
    <div
      class="container"
      style="display:block">
      <div
        id="myDiv"
        class="img"
        :style="{backgroundImage:`url(${qrImg})`,height:'100%'}">
      </div>
    </div>
    <div
      style="
          width: 100%;
          display: flex;
          justify-content: space-around;
          align-items: center;
          height: 100px;
        "
    >
      <button @click="saveImage" >保存图片</button>
    </div>
  </a-modal>
</template>
<script>
// import SalesUser from './salesUser.vue'
import html2canvas from 'html2canvas'
import QRCode from 'qrcode'
export default {
  data () {
    return {
      visible: false,
      qrImg: '',
      salesInfo: {},
      base64Image: ''
    }
  },
  components: {
    // SalesUser
  },
  methods: {
    show (item) {
      this.visible = true
      this.id = item.id
      this.phone = item.phone
      this.name = item.nick_name || item.name
      this.showQrcode(5)
    },
    handleOk () {
      this.visible = false
    },
    handleCancel () {
      this.visible = false
      this.id = ''
    },
    showUrl (record) {
      this.visible = true
      this.salesInfo = record
      const QRcodeImg = `https://pqncdn.cleartv.cn/wx/mazu/?salesUserId=${record.id}`
      this.$nextTick(async () => {
        var opts = {
          errorCorrectionLevel: 'H',
          type: 'image/png',
          quality: 1,
          color: {
            dark: '#000000ff', // Blue dots
            light: '#0000' // Transparent background
          }
        }
        this.qrImg = await QRCode.toDataURL(QRcodeImg, opts)
        setTimeout(() => {
          this.generateimages()
        }, 500)
      })
    },
    generateimages () {
      // 获取容器元素
      const container = document.querySelector('.container')
      const that = this
      // 使用 html2canvas 生成图片
      return html2canvas(container, {
        useCORS: true, // 开启跨域配置
        allowTaint: false, // 允许跨域图片
        scale: 2, // 按比例增加分辨率 (2=双倍).
        dpi: window.devicePixelRatio * 2, // 设备像素比
        height: document.querySelector('.container').clientHeight + 3 // 预防生成的图片截图不全的问题(例如加填充,边框等,就会导致截图不全,这样适当给截图区域加一点距离)
      })
        .then((canvass) => {
          // 在canvas上添加文字内容准备
          // const title = '销售分享二维码'
          // const title2 =
          const title3 = `${this.salesInfo.name}`

          // 创建画布
          const canvas = document.createElement('canvas')

          // 设置 Canvas 元素的宽度和高度,与生成的canvas宽高一致
          canvas.width = 1024
          canvas.height = 1084

          // 获取 Canvas 的 2D 绘图上下文
          const ctx = canvas.getContext('2d')
          // 设置背景颜色为白色
          ctx.fillStyle = '#FFFFFF'
          // 创建白色块,宽高等于1画布的宽高
          ctx.fillRect(0, 0, canvas.width, canvas.height)

          // 创建一个图片对象
          const image = new Image()
          // 图片对象的src指向生成的图片的base64字符串,通过canvass.toDataURL()获得
          image.src = canvass.toDataURL()

          // 这里使用了promise,预防异步
          return new Promise((resolve, reject) => {
            // 等图片加载完毕
            image.onload = function () {
              // 在 Canvas 上绘制图片(每个参数含义(图片源,横坐标,纵坐标,宽,高))
              ctx.drawImage(
                image,
                -300,
                -20,
                1610,
                1024
              )

              // 绘制其他内容
              ctx.fillStyle = '#FFFFFF' // 指定文字颜色
              ctx.font = '16px Arial' // 指定文字字号大小(只需要改前面的数字就行)

              // 指定第三个文字的位置和颜色
              ctx.fillStyle = '#000000' // 指定文字颜色
              ctx.font = '36px Arial'
              ctx.textAlign = 'center'
              ctx.width = canvas.width
              ctx.fillText(title3, (canvas.width / 2), canvas.height - 60)

              // 将 Canvas 转换为 base64 图片并保存
              that.base64Image = canvas.toDataURL()

              // 操作完成，resolve Promise
              resolve('完成')
            }

            image.onerror = function (error) {
              // 操作失败，reject Promise
              reject(error)
            }
          })
        })
        .catch((error) => {
          console.error('生成图片出错：', error)
          throw error
        })
    },
    saveImage () {
      const link = document.createElement('a')
      // 指定a元素href地址(指向base64图片)
      link.href = this.base64Image
      // 下载图片的图片名后缀
      link.download = `${this.salesInfo.name}分销二维码.png`

      // 使用点击事件模拟下载操作
      link.dispatchEvent(new MouseEvent('click'))
    }
  }
}
</script>
<style lang="scss" scoped>
.container{
  height:300px;
}
.img{
  height: 100%; background: no-repeat center center /contain;
}
</style>
