import { domId } from '../__support/util';
import { loadUrl, createWaterMark } from './lib/util'; // 调试开关

var DEBUG = process.env.NODE_ENV === 'development';
import './index-sfc.css';

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__ = [];
export default {
  render: __vue_render__,
  staticRenderFns: __vue_staticRenderFns__,
  name: 'Watermark',
  props: {
    target: null,
    // 挂载水印的DOM，默认组件父元素
    targetImage: {
      // TODO 图片元素src
      type: String
    },
    dynamic: {
      type: Boolean,
      default: false
    },
    dynamicDuration: {
      type: Number,
      default: 2000
    },
    dynamicDelay: {
      type: Number,
      default: 2000
    },
    dynamicPosition: {
      type: Boolean,
      default: false
    },
    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
    },
    fontFamily: {
      type: String,
      default: 'sans-serif'
    },
    color: {
      // 文字颜色
      type: String,
      default: '#000'
    },
    strokeColor: {
      // 文字描边颜色
      type: String
    },
    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: domId(),
      canvas: document.createElement('canvas')
    };
  },
  computed: {
    // 内部配置对象
    config: function config() {
      return {
        dom: null,
        timer: null,
        canvas: this.canvas,
        output: this.targetImage && this.targetImage.split ? 'image' : !this.target || this.target.tagName && this.target.tagName.toLocaleLowerCase() !== 'img' ? 'dom' : '',
        // 文字
        text: this.wmText,
        position: this.position,
        paddingX: this.paddingX,
        paddingY: this.paddingY,
        angle: this.angle,
        fontSize: this.fontSize,
        fontFamily: this.fontFamily,
        color: this.color,
        strokeColor: this.strokeColor,
        opacity: this.opacity,
        // 平铺
        repeat: this.repeat,
        repeatWidth: this.repeatWidth,
        repeatHeight: this.repeatHeight,
        // 动态
        dynamic: this.dynamic,
        dynamicDuration: this.dynamicDuration,
        dynamicDelay: this.dynamicDelay,
        dynamicPosition: this.dynamicPosition,
        // 图片
        image: this.wmImage,
        imageWidth: this.wmImageWidth,
        imageHeight: this.wmImageWidth,
        targetImageWidth: null,
        targetImageHeight: null
      };
    }
  },
  mounted: function mounted() {
    var _this = this;

    var thisDom = document.getElementById(this.domId); // 输出DOM元素

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

      var targetNode = this.target && this.target.nodeName ? this.target : thisDom.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 === targetNode && mutation.type === 'attributes') {
            DEBUG && console.warn("\u7236\u5143\u7D20\u88AB\u7BE1\u6539"); // 删除重新添加

            try {
              targetNode.removeChild(watermakr);
            } catch (err) {
              return null;
            }
          } else 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(); // 清理定时器

                if (_this.config.timer) {
                  _this.config.timer = clearTimeout(_this.config.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;\n            z-index:9999";
        targetNode.appendChild(watermakr);
        _this.config.dom = watermakr;
        createWaterMark(_this.config, function (canvas) {
          observer.disconnect();
          watermakr.style.backgroundImage = "url(" + canvas.toDataURL() + ")"; // 监听元素

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

      addMaker();
    } else if (this.config.output === 'image') {
      // 输出图片元素
      loadUrl(this.targetImage).then(function (img) {
        // 设置输出尺寸
        _this.config.targetImageWidth = img.width;
        _this.config.targetImageHeight = img.height; // 创建水印图片

        createWaterMark(_this.config, function (canvas, ctx) {
          canvas.toBlob(function (blob) {
            var newImg = document.createElement('img');
            var url = URL.createObjectURL(blob);

            newImg.onload = function () {
              URL.revokeObjectURL(url); // 绘制原始image底图

              canvas.width = img.width;
              canvas.height = img.height;
              ctx.drawImage(img, 0, 0); // 叠加水印

              if (_this.config.repeat) {
                var pattern = ctx.createPattern(newImg, 'repeat');
                ctx.fillStyle = pattern;
                ctx.fillRect(0, 0, canvas.width, canvas.height);
              } else {
                ctx.drawImage(newImg, 0, 0);
              }

              thisDom.src = canvas.toDataURL();
            };

            newImg.src = url;
          });
        });
      });
    } else {
      console.warn("watermark: \u672A\u5339\u914D\u7684output");
    }
  }
};