export default class Printctrl {
  /**
   * @description 绘制模板至缓存
   * @param  {Object}    configs      配置信息
   * @param  {Boolean}   selectId     编辑元素
   */
  static sketch (configs, selectId, debug = false) {
    if (!configs.height || !configs.width) return

    if (configs.height / configs.width > 10 || configs.width / configs.height > 10) return

    let ratio = parseInt(document.getElementById('darea').style.width) / configs.width * (window.devicePixelRatio || 1) * 1.5
    let sizeradio = 210 / configs.width * (window.devicePixelRatio || 1) * 1.5
    let canvas = document.createElement('canvas')

    canvas.height = configs.height * ratio
    canvas.width = configs.width * ratio
    let context = canvas.getContext('2d')

    if (configs.elements.length > 0) {
      let elements = JSON.parse(JSON.stringify(configs.elements))
      elements.forEach(element => {
        element.left = element.left * ratio
        element.top = element.top * ratio
        element.oriwidth = element.width
        element.oriheight = element.height
        element.width = element.width * ratio
        element.height = element.height * ratio

        if (element.type === 'text') {
          element.padding = element.padding * ratio
          element.fontSize = element.fontSize * sizeradio
        } else if (element.type === 'barcode') {
          element.barcodeWidth = element.barcodeWidth * ratio
          element.barcodeHeight = element.barcodeHeight * ratio
          element.fontSize = element.fontSize * sizeradio
        } else if (element.type === 'qrcode') {
          element.qrcodeWidth = element.qrcodeWidth * ratio

          if (element.qrcodeWidth > element.height) {
            element.qrcodeWidth = element.height
          }
          if (element.qrcodeWidth > element.width) {
            element.qrcodeWidth = element.width
          }
        } else if (element.type === 'image') {
          element.imgWidth = element.imgWidth * ratio
          element.imgHeight = element.imgHeight * ratio
        }
      })

      return new Promise(resolve => {
        this.sketchothers(context, elements, selectId, debug, ratio, resolve)
      })
    } else {
      return new Promise(resolve => {
        this.cachesketch(context, resolve)
      })
    }
  }

  /**
   * @description 绘制图片及文字
   * @param  {Object}    context    画布对象
   * @param  {Object}    elements   图片文字信息
   */
  static sketchothers (context, elements, selectId, debug, ratio, resolve) {
    let element = elements.splice(0, 1)[0] // 逐个绘制图片文字
    let textLineSpace = 5 // 绘制时行间距，防止文字重叠
    context.save()

    // if (element.rotate) { // 元素旋转时，设置画布旋转角度
    //   let _cx = element.left + element.width / 2
    //   let _cy = element.top + element.height / 2
    //   context.translate(_cx, _cy) // 移动原点
    //   context.rotate(element.rotate * Math.PI / 180)
    //   context.translate(-_cx, -_cy) // 恢复原点
    // }

    if (selectId === element.uuid) { // 选中元素，设置外部阴影
      context.shadowBlur = 5
      context.shadowColor = '#1890ff'
      context.fillStyle = 'white'
      context.fillRect(element.left, element.top, element.width || 1, element.height || 1)
      context.shadowBlur = 0
    } else if (debug) {
      context.shadowBlur = 3
      context.shadowColor = 'orange'
      context.fillStyle = 'white'
      context.fillRect(element.left, element.top, element.width || 1, element.height || 1)
      context.shadowBlur = 0
    }

    // 绘制边框
    // context.rect(element.left + element.borderSize / 2, element.top + element.borderSize / 2, element.width - element.borderSize, element.height - element.borderSize)
    if (element.borderSize >= 1) {
      context.beginPath()
      context.strokeStyle = element.borderColor
      context.lineWidth = element.borderSize
      context.rect(element.left, element.top, element.width, element.height)
      context.stroke()
    }

    // 设置背景色
    if (!element.borderSize && (element.oriwidth === 1 || element.oriheight === 1)) { // 线
      context.strokeStyle = element.background
      context.beginPath()
      if (element.oriwidth === 1) {
        context.moveTo(element.left, element.top)
        context.lineTo(element.left, element.top + element.height)
      } else {
        context.moveTo(element.left, element.top + element.height)
        context.lineTo(element.left + element.width, element.top + element.height)
      }
      context.stroke()
    } else if (element.background && element.background !== 'white') {
      context.fillStyle = element.background
      context.fillRect(element.left, element.top, element.width, element.height)
    }

    if (selectId === element.uuid && element.width > 3 * ratio && element.height > 3 * ratio) { // 选中元素，设置外部阴影
      context.strokeStyle = '#1890ff'
      context.beginPath()
      context.moveTo(element.left + element.width - 7, element.top + element.height - 2)
      context.lineTo(element.left + element.width - 2, element.top + element.height - 7)
      context.moveTo(element.left + element.width - 14, element.top + element.height - 2)
      context.lineTo(element.left + element.width - 2, element.top + element.height - 14)
      context.stroke()
    }

    if (!element.width || !element.height) {
      context.restore() // 重置画布
      if (elements.length > 0) {
        this.sketchothers(context, elements, selectId, debug, ratio, resolve)
      } else {
        this.cachesketch(context, resolve)
      }
    } else if (element.type === 'text') {
      // 绘制文字信息
      if (element.fontSize < 12) { // 浏览器最小字体
        textLineSpace += 12 - element.fontSize
      }
      // italic 斜体 small-caps(英文小写字母变成小的大写)
      context.font = 'normal normal ' + element.fontWeight + ' ' + element.fontSize + 'px ' + element.fontFamily
      context.fillStyle = element.fontColor

      let lines = element.value.split('\n')

      if (!element.value && element.field) {
        if (element.field === 'other_field') {
          lines = [element.cusfield || '']
        } else {
          lines = [element.field]
        }
      }
      let _y = element.top + element.padding + element.fontSize + element.borderSize
      let _left = element.left + element.borderSize + element.padding
      let _right = element.left + element.width - element.padding - element.borderSize
      let _width = _right - _left
      if (element.vertialAlign === 'top') {
        lines.forEach(text => {
          if (!text) {
            _y += element.fontSize + textLineSpace
          }
          let _textArr = []
          let _text = ''
          text.split('').forEach(word => {
            if (context.measureText(_text + word).width <= _width) {
              _text = _text + word
            } else {
              _textArr.push(_text)
              _text = word
            }
          })
          _textArr.forEach(word => {
            let _l = _left
            if (element.align === 'center') {
              _l = _left + (_width - context.measureText(word).width) / 2
            } else if (element.align === 'right') {
              _l = _right - context.measureText(word).width
            } else if (element.align === 'justify') {
              _l = _left + (_width - context.measureText(word).width) / 2
            }
            context.fillText(word, _l, _y)
            _y += element.fontSize + textLineSpace
          })

          if (!_text) {
            return
          }

          if (element.align === 'left') {
            context.fillText(_text, _left, _y)
          } else if (element.align === 'center') {
            context.fillText(_text, _left + (_width - context.measureText(_text).width) / 2, _y)
          } else if (element.align === 'right') {
            context.fillText(_text, _right - context.measureText(_text).width, _y)
          } else if (element.align === 'justify') {
            if (_text.length === 1) {
              context.fillText(_text, _left + (_width - context.measureText(_text).width) / 2, _y)
            } else {
              let _dleft = _left
              _text.split('').forEach(_word => {
                context.fillText(_word, _dleft, _y)
                _dleft += (_width - context.measureText(_text).width) / (_text.length - 1) + context.measureText(_word).width
              })
            }
          }

          _y += element.fontSize + textLineSpace
        })
      } else if (element.vertialAlign === 'middle' || element.vertialAlign === 'bottom') {
        let lineheight = 0
        lines.forEach(text => {
          if (!text) {
            lineheight += element.fontSize + textLineSpace
            return
          }
          lineheight += Math.ceil(context.measureText(text).width / _width) * (element.fontSize + textLineSpace)
        })

        if (element.vertialAlign === 'middle') {
          _y += (element.height - element.padding * 2 - element.borderSize * 2 - lineheight) / 2
        } else {
          _y += element.height - element.padding * 2 - element.borderSize * 2 - lineheight
        }

        lines.forEach(text => {
          if (!text) {
            _y += element.fontSize + textLineSpace
          }
          let _textArr = []
          let _text = ''
          text.split('').forEach(word => {
            if (context.measureText(_text + word).width <= _width) {
              _text = _text + word
            } else {
              _textArr.push(_text)
              _text = word
            }
          })
          _textArr.forEach(word => {
            let _l = _left
            if (element.align === 'center') {
              _l = _left + (_width - context.measureText(word).width) / 2
            } else if (element.align === 'right') {
              _l = _right - context.measureText(word).width
            } else if (element.align === 'justify') {
              _l = _left + (_width - context.measureText(word).width) / 2
            }
            context.fillText(word, _l, _y)
            _y += element.fontSize + textLineSpace
          })

          if (!_text) {
            return
          }

          if (element.align === 'left') {
            context.fillText(_text, _left, _y)
          } else if (element.align === 'center') {
            context.fillText(_text, _left + (_width - context.measureText(_text).width) / 2, _y)
          } else if (element.align === 'right') {
            context.fillText(_text, _right - context.measureText(_text).width, _y)
          } else if (element.align === 'justify') {
            if (_text.length === 1) {
              context.fillText(_text, _left + (_width - context.measureText(_text).width) / 2, _y)
            } else {
              let _dleft = _left
              _text.split('').forEach(_word => {
                context.fillText(_word, _dleft, _y)
                _dleft += (_width - context.measureText(_text).width) / (_text.length - 1) + context.measureText(_word).width
              })
            }
          }

          _y += element.fontSize + textLineSpace
        })
      }

      context.restore() // 重置画布
      if (elements.length > 0) {
        this.sketchothers(context, elements, selectId, debug, ratio, resolve)
      } else {
        this.cachesketch(context, resolve)
      }
    } else if (element.type === 'barcode') {
      let _space = 5
      let _left = element.left
      let _top = element.top
      if (element.vertialAlign === 'middle') {
        if (element.barcodeLabel === 'true') {
          _top = element.top + (element.height - element.barcodeHeight - element.fontSize - _space) / 2
        } else {
          _top = element.top + (element.height - element.barcodeHeight) / 2
        }
      } else if (element.vertialAlign === 'bottom') {
        if (element.barcodeLabel === 'true') {
          _top = element.top + (element.height - element.barcodeHeight - element.fontSize - _space)
        } else {
          _top = element.top + element.height - element.barcodeHeight
        }
      }

      if (element.align === 'center') {
        _left = element.left + (element.width - element.barcodeWidth) / 2
      } else if (element.align === 'right') {
        _left = element.left + element.width - element.barcodeWidth
      }
      context.font = 'normal normal normal ' + element.fontSize + 'px Microsoft YaHei'
      context.fillStyle = 'black'
      let text = '1234567890123'
      let _tleft = _left + (element.barcodeWidth - context.measureText(text).width) / 2
      let _ttop = _top + element.barcodeHeight + _space + element.fontSize

      let image = new Image()
      image.src = element.url
      if (image.complete) {
        context.drawImage(image, _left, _top, element.barcodeWidth, element.barcodeHeight)
        if (element.barcodeLabel === 'true') {
          context.fillText(text, _tleft, _ttop)
        }

        context.restore() // 重置画布
        if (elements.length > 0) {
          this.sketchothers(context, elements, selectId, debug, ratio, resolve)
        } else {
          this.cachesketch(context, resolve)
        }
      } else {
        image.onload = () => {
          context.drawImage(image, _left, _top, element.barcodeWidth, element.barcodeHeight)
          if (element.barcodeLabel === 'true') {
            context.fillText(text, _tleft, _ttop)
          }
  
          context.restore() // 重置画布
          if (elements.length > 0) {
            this.sketchothers(context, elements, selectId, debug, ratio, resolve)
          } else {
            this.cachesketch(context, resolve)
          }
        }
      }
    } else if (element.type === 'qrcode') {
      let _left = element.left
      let _top = element.top
      if (element.vertialAlign === 'middle') {
        _top = element.top + (element.height - element.qrcodeWidth) / 2
      } else if (element.vertialAlign === 'bottom') {
        _top = element.top + element.height - element.qrcodeWidth
      }

      if (element.align === 'center') {
        _left = element.left + (element.width - element.qrcodeWidth) / 2
      } else if (element.align === 'right') {
        _left = element.left + element.width - element.qrcodeWidth
      }

      let image = new Image()
      image.src = element.url

      if (image.complete) {
        context.drawImage(image, _left, _top, element.qrcodeWidth, element.qrcodeWidth)

        context.restore() // 重置画布
        if (elements.length > 0) {
          this.sketchothers(context, elements, selectId, debug, ratio, resolve)
        } else {
          this.cachesketch(context, resolve)
        }
      } else {
        image.onload = () => {
          context.drawImage(image, _left, _top, element.qrcodeWidth, element.qrcodeWidth)
  
          context.restore() // 重置画布
          if (elements.length > 0) {
            this.sketchothers(context, elements, selectId, debug, ratio, resolve)
          } else {
            this.cachesketch(context, resolve)
          }
        }
      }
    } else if (element.type === 'image') {
      let _left = element.left
      let _top = element.top
      if (element.vertialAlign === 'middle') {
        _top = element.top + (element.height - element.imgHeight) / 2
      } else if (element.vertialAlign === 'bottom') {
        _top = element.top + element.height - element.imgHeight
      }

      if (element.align === 'center') {
        _left = element.left + (element.width - element.imgWidth) / 2
      } else if (element.align === 'right') {
        _left = element.left + element.width - element.imgWidth
      }

      let image = new Image()
      image.src = element.url
      if (element.value && element.value.indexOf(window.location.hostname) > -1) {
        image.src = element.value
      }

      if (image.complete) {
        context.drawImage(image, _left, _top, element.imgWidth, element.imgHeight)
        
        context.restore() // 重置画布
        if (elements.length > 0) {
          this.sketchothers(context, elements, selectId, debug, ratio, resolve)
        } else {
          this.cachesketch(context, resolve)
        }
      } else {
        image.onload = () => {
          context.drawImage(image, _left, _top, element.imgWidth, element.imgHeight)
  
          context.restore() // 重置画布
          if (elements.length > 0) {
            this.sketchothers(context, elements, selectId, debug, ratio, resolve)
          } else {
            this.cachesketch(context, resolve)
          }
        }
      }
      image.onerror = () => {
        context.restore() // 重置画布
        if (elements.length > 0) {
          this.sketchothers(context, elements, selectId, debug, ratio, resolve)
        } else {
          this.cachesketch(context, resolve)
        }
      }
    }
  }

  /**
   * @description 绘制模板值页面
   * @param  {Object}    configs      配置信息
   */
  static cachesketch (context, resolve) {
    let cacheCanvas = context.canvas
    let canvas = document.getElementById('darea')

    canvas.width = cacheCanvas.width
    canvas.height = cacheCanvas.height
    let ctx = canvas.getContext('2d')
    ctx.clearRect(0, 0, canvas.width + 1, canvas.height + 1)
    ctx.beginPath()
    ctx.fillStyle = 'white'
    ctx.fillRect(0, 0, canvas.width + 1, canvas.height + 1)
    ctx.drawImage(cacheCanvas, 0, 0, canvas.width, canvas.height)
    resolve(canvas.toDataURL('image/png'))
  }
}