var WATER_MARK_ELEMENT = '__wm';
/**
 * canvas 实现 watermark
 * @param {object} params 参数
 * @param {HTMLElement} params.container 容器
 * @param {number} params.width 图片宽
 * @param {number} params.height 图片高
 * @param {string} params.textAlign 同 ctx.textAlign
 * @param {string} params.textBaseline 同 ctx.textBaseline
 * @param {string} params.font 同 ctx.font
 * @param {string} params.fillStyle 同 ctx.fillStyle
 * @param {string} params.content 内容
 * @param {number} params.rotate 旋转角度
 * @param {number} params.zIndex 层级
 *
 * @example
 *
 * ```ts
 * const rtx = 'pony';
 *
 * createWatcherMark({
 *   content: rtx,
 *   width: '300',
 *   height: '300',
 *   textAlign: 'center',
 *   textBaseline: 'middle',
 *   font: '25px Microsoft Yahei',
 *   fillStyle: 'rgba(184, 184, 184, 0.3)',
 *   rotate: '-50',
 *   zIndex: 1000,
 * });
 * ```
 */
function createWatcherMark() {
  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
    _ref$container = _ref.container,
    container = _ref$container === void 0 ? document.body : _ref$container,
    _ref$width = _ref.width,
    width = _ref$width === void 0 ? 300 : _ref$width,
    _ref$height = _ref.height,
    height = _ref$height === void 0 ? 300 : _ref$height,
    _ref$textAlign = _ref.textAlign,
    textAlign = _ref$textAlign === void 0 ? 'center' : _ref$textAlign,
    _ref$textBaseline = _ref.textBaseline,
    textBaseline = _ref$textBaseline === void 0 ? 'middle' : _ref$textBaseline,
    _ref$font = _ref.font,
    font = _ref$font === void 0 ? '25px Microsoft Yahei' : _ref$font,
    _ref$fillStyle = _ref.fillStyle,
    fillStyle = _ref$fillStyle === void 0 ? 'rgba(184, 184, 184, 0.01)' : _ref$fillStyle,
    _ref$content = _ref.content,
    content = _ref$content === void 0 ? '请勿外传' : _ref$content,
    _ref$rotate = _ref.rotate,
    rotate = _ref$rotate === void 0 ? -50 : _ref$rotate,
    _ref$zIndex = _ref.zIndex,
    zIndex = _ref$zIndex === void 0 ? 10000 : _ref$zIndex;
  var args = arguments[0];
  var canvas = document.createElement('canvas');
  canvas.setAttribute('width', "".concat(width, "px"));
  canvas.setAttribute('height', "".concat(height, "px"));
  var ctx = canvas.getContext('2d');
  if (!ctx) return;
  ctx.textAlign = textAlign;
  ctx.textBaseline = textBaseline;
  ctx.font = font;
  ctx.fillStyle = fillStyle;
  ctx.translate(width / 2, height / 2);
  ctx.rotate(Math.PI / 180 * rotate);
  ctx.fillText(content, 30, 30);
  ctx.translate(-width / 2, -height / 2);
  var base64Url = canvas.toDataURL();
  var watermarkDom = document.querySelector(".".concat(WATER_MARK_ELEMENT));
  var watermarkDiv = watermarkDom || document.createElement('div');
  var styleStr = "\n      position:absolute;\n      top:0;\n      left:0;\n      width:100%;\n      height:100%;\n      z-index:".concat(zIndex, ";\n      pointer-events:none;\n      background-repeat:repeat;\n      background-image:url('").concat(base64Url, "')");
  watermarkDiv.setAttribute('style', styleStr);
  watermarkDiv.classList.add(WATER_MARK_ELEMENT);
  if (!watermarkDom) {
    container.style.position = 'relative';
    container.insertBefore(watermarkDiv, container.firstChild);
  }
  // @ts-ignore
  var MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
  if (MutationObserver) {
    var mo = new MutationObserver(function () {
      var watermarkDom = document.querySelector(".".concat(WATER_MARK_ELEMENT));
      // 只在 watermarkDom 元素变动才重新调用 createWatcherMark
      if (watermarkDom && watermarkDom.getAttribute('style') !== styleStr || !watermarkDom) {
        // 避免一直触发
        mo.disconnect();
        mo = null;
        createWatcherMark(JSON.parse(JSON.stringify(args)));
      }
    });
    mo.observe(container, {
      attributes: true,
      subtree: true,
      childList: true
    });
  }
}

export { createWatcherMark };
