"use strict";

exports.__esModule = true;
exports.default = void 0;

var _util = require("../__support/util");

var _util2 = require("./lib/util");

require("./index-sfc.css");

// 调试开关
var DEBUG = process.env.NODE_ENV === 'development'; // 获取绘制文字位置

var getDrawPosition = function getDrawPosition(width, height, config) {
  var posi = config.position;
  var x = 0;
  var y = 0;

  if ([2, 5, 8].indexOf(posi) !== -1) {
    x = Math.round(width / 2);
  } else if ([3, 6, 9].indexOf(posi) !== -1) {
    x = width - config.paddingX;
  } else {
    x = config.paddingX;
  }

  if ([4, 5, 6].indexOf(posi) !== -1) {
    y = Math.round(height / 2);
  } else if ([7, 8, 9].indexOf(posi) !== -1) {
    y = height - config.paddingY;
  } else {
    y = config.paddingY;
  }

  return [x, y];
}; // 获取绘制图片位置


var getDrawImagePositon = function getDrawImagePositon(width, height, config, img) {
  var posi = config.position;
  var x = 0;
  var y = 0;
  var w = img.width;
  var h = img.height;

  if (w > config.imageWidth || h > config.imageHeight) {
    DEBUG && console.log('水印图片较大，需要重新矫正尺寸');
    var imgProp = w / h;

    if (imgProp > config.imageWidth / config.imageHeight) {
      DEBUG && console.log('图片较宽，高为基准');
      h = config.imageHeight;
      w = h * imgProp;
    } else {
      DEBUG && console.log('图片较高，宽为基准');
      w = config.imageWidth;
      h = w / imgProp;
    }
  } // 计算绘制位置


  if ([2, 5, 8].indexOf(posi) !== -1) {
    x = width / 2 - w / 2;
  } else if ([3, 6, 9].indexOf(posi) !== -1) {
    x = width - config.paddingX - w;
  } else {
    x = config.paddingX;
  }

  if ([4, 5, 6].indexOf(posi) !== -1) {
    y = height / 2 - h / 2;
  } else if ([7, 8, 9].indexOf(posi) !== -1) {
    y = height - config.paddingY - h;
  } else {
    y = config.paddingY;
  }

  console.log(posi, x, y, w, h);
  return {
    position: [x, y],
    size: [w, h]
  };
}; // 文字水平对齐


var textAlignHash = {
  1: 'left',
  2: 'center',
  3: 'right',
  4: 'left',
  5: 'center',
  6: 'right',
  7: 'left',
  8: 'center',
  9: 'right'
}; // 文字垂直对齐

var textBaselineHash = {
  1: 'top',
  2: 'top',
  3: 'top',
  4: 'middle',
  5: 'middle',
  6: 'middle',
  7: 'bottom',
  8: 'bottom',
  9: 'bottom'
};

function createWaterMark(ele, config) {
  var rect = ele.getBoundingClientRect();
  var canvas = config.canvas;
  canvas.width = config.repeat ? config.repeatWidth : rect.width;
  canvas.height = config.repeat ? config.repeatHeight : rect.height;
  var ctx = canvas.getContext('2d');
  ctx.clearRect(0, 0, canvas.width, canvas.height); // 统一设置

  ctx.globalAlpha = config.opacity;
  ctx.rotate(Math.PI / 180 * config.angle);
  return new Promise(function (resolve) {
    if (config.input === 'text') {
      // 绘制文字
      var drawTextPosition = getDrawPosition(canvas.width, canvas.height, config);
      ctx.fillStyle = config.color;
      ctx.font = config.fontSize + "px serif";
      ctx.textAlign = textAlignHash[config.position];
      ctx.textBaseline = textBaselineHash[config.position];
      ctx.fillText(config.text, drawTextPosition[0], drawTextPosition[1]);
      resolve(canvas.toDataURL());
    } else if (config.input === 'image') {
      // 绘制图像
      (0, _util2.loadUrl)(config.image).then(function (img) {
        var drawImageInfo = getDrawImagePositon(canvas.width, canvas.height, config, img);
        ctx.drawImage(img, 0, 0, img.width, img.height, drawImageInfo.position[0], drawImageInfo.position[1], drawImageInfo.size[0], drawImageInfo.size[1]);
        resolve(canvas.toDataURL());
      });
    }
  });
}

var __vue_render__ = function __vue_render__() {
  var _vm = this;

  var _h = _vm.$createElement;

  var _c = _vm._self._c || _h;

  return _vm.config.output === 'image' ? _c('img', {
    attrs: {
      "id": _vm.domId
    }
  }) : _c('div', {
    attrs: {
      "id": _vm.domId
    }
  });
};

var __vue_staticRenderFns__ = [];
var _default = {
  render: __vue_render__,
  staticRenderFns: __vue_staticRenderFns__,
  name: 'watermark',
  props: {
    target: {
      // 挂载水印的DOM，默认组件父元素
      type: Object
    },
    targetImage: {
      // TODO 图片元素src
      type: String
    },
    dynamic: {
      // TODO: 动态显示
      type: Boolean,
      default: false
    },
    dynamicDuration: {
      type: Number,
      default: 1000
    },
    dynamicDelay: {
      type: Number,
      default: 1000
    },
    wmText: {
      type: String,
      default: '水印文字'
    },
    wmImage: {
      // 图片水印
      type: String
    },
    position: {
      // 位置：1~9
      type: Number,
      default: 9
    },
    paddingX: {
      type: Number,
      default: 10
    },
    paddingY: {
      type: Number,
      default: 10
    },
    angle: {
      // 旋转角度
      type: Number,
      default: 0
    },
    fontSize: {
      // 文字大小
      type: Number,
      default: 16
    },
    color: {
      // 文字颜色
      type: String,
      default: '#000'
    },
    opacity: {
      // 透明度
      type: Number,
      default: 0.3
    },
    repeat: {
      // 平铺模式，开启后position设置无效
      type: Boolean,
      default: false
    },
    repeatWidth: {
      // 平铺单元格宽度
      type: Number,
      default: 180
    },
    repeatHeight: {
      // 平铺单元格高度
      type: Number,
      default: 180
    },
    wmImageWidth: {
      // 图片绘制宽度
      type: Number,
      default: 180
    },
    wmImageHeight: {
      // 图片绘制高度
      type: Number,
      default: 180
    }
  },
  data: function data() {
    return {
      domId: (0, _util.domId)(),
      canvas: document.createElement('canvas'),
      timer: null
    };
  },
  computed: {
    config: function config() {
      return {
        canvas: this.canvas,
        output: this.targetImage ? 'image' : 'dom',
        input: this.wmImage ? 'image' : 'text',
        // 文字
        text: this.wmText,
        position: this.position,
        paddingX: this.paddingX,
        paddingY: this.paddingY,
        angle: this.angle,
        fontSize: this.fontSize,
        color: this.color,
        opacity: this.opacity,
        // 平铺
        repeat: this.repeat,
        repeatWidth: this.repeatWidth,
        repeatHeight: this.repeatHeight,
        // 动态
        dynamic: this.dynamic,
        dynamicDuration: this.dynamicDuration,
        dynamicDelay: this.dynamicDelay,
        timer: this.timer,
        // 图片
        image: this.wmImage,
        imageWidth: this.wmImageWidth,
        imageHeight: this.wmImageWidth
      };
    }
  },
  mounted: function mounted() {
    var _this = this;

    if (this.config.output === 'dom') {
      // 水印元素
      var watermakr = document.createElement('div'); // 父元素

      var targetNode = this.target && this.target.nodeName ? this.target : document.getElementById(this.domId).parentNode;

      if (['relative', 'absolute', 'fixed'].indexOf(targetNode.style.position) === -1) {
        DEBUG && console.warn("\u91CD\u8BBEtargetNode.style.position");
        targetNode.style.position = 'relative';
      } // 元素变动回调函数


      var callback = function callback(mutationsList) {
        mutationsList.forEach(function (mutation) {
          if (mutation.target === watermakr) {
            DEBUG && console.warn("\u6C34\u5370\u88AB\u7BE1\u6539"); // 删除重新添加

            targetNode.removeChild(watermakr);
          } else {
            mutation.removedNodes.forEach(function (item) {
              if (item === watermakr) {
                DEBUG && console.warn("\u6C34\u5370\u88AB\u5220\u9664");
                observer.disconnect(); // 清理定时器

                _this.timer = clearInterval(_this.timer);
                DEBUG && console.warn("\u91CD\u65B0\u6DFB\u52A0\u6C34\u5370");
                addMaker();
              }
            });
          }
        });
      };

      var observer = new MutationObserver(callback);

      var addMaker = function addMaker() {
        watermakr.style = "position: " + (targetNode.tagName.toLocaleLowerCase() === 'body' ? 'fixed' : 'absolute') + ";\n            top: 0px;\n            right: 0px;\n            bottom: 0px;\n            left: 0px;\n            pointer-events: none;\n            background-repeat: repeat;";
        targetNode.appendChild(watermakr);
        createWaterMark(watermakr, _this.config).then(function (img) {
          watermakr.style.backgroundImage = "url(" + img + ")"; // 监听元素

          observer.observe(document.body, {
            attributes: true,
            childList: true,
            subtree: true
          });
        });
      };

      addMaker();
    } else {
      console.log(this.config);
      (0, _util2.loadUrl)(this.targetImage).then(function (img) {});
    }
  }
};
exports.default = _default;