// (function (window, document) {
var ImgView = function (targetDom, options) {
  // 判断是用函数创建的还是用new创建的。这样我们就可以通过MaskShare("dom") 或 new MaskShare("dom")来使用这个插件了
  if (!(this instanceof ImgView)) return new ImgView(targetDom, options);
  // 参数
  this.options = this.extend(
    {
      dataList: [],
      currentSrc: "",
    },
    options
  );
  // 获取dom
  this.targetDom = document.getElementById(targetDom);
  var html =
    "<div id='imgViewDiv' class='img-view-dialog'>" +
    "<div id='imgViewContent' class='img-view-content' draggable>" +
    "<img id='dialogImg' class='dialog-img' src=''></div>" +
    "<div class='dialog-tool'><i id='closeDialog' class='close-dialog'></i>" +
    "<i id='rotateDialog' class='rotate-dialog'></i><i id='prevDialog' class='previous-dialog'></i>" +
    "<i id='nextDialog' class='next-dialog'></i></div></div>";
  this.targetDom.innerHTML = html;
  this.btnClose = document.getElementById("closeDialog");
  this.btnRotate = document.getElementById("rotateDialog");
  this.btnPrev = document.getElementById("prevDialog");
  this.btnNext = document.getElementById("nextDialog");
  this.imgViewDiv = document.getElementById("imgViewDiv");
  this.imgViewContent = document.getElementById("imgViewContent");
  this.dialogImg = document.getElementById("dialogImg");
  this.num = 0;
  this.winWidth = 0;
  this.winHeight = 0;
  (this.startX = 0), (this.startY = 0), (this.x = 0), (this.y = 0);
  this.index = 1;
  this.event();
};
ImgView.prototype = {
  init: function () {
    this.event();
  },
  extend: function (obj, obj2) {
    for (var k in obj2) {
      obj[k] = obj2[k];
    }
    return obj;
  },
  event: function () {
    var _this = this;
    _this.thisSrc = _this.options.currentSrc;
    var dataList = _this.options.dataList;
    var index = dataList.indexOf(_this.thisSrc);
    _this.checkImg(_this.options.currentSrc, index);
    // 关闭
    _this.btnClose.addEventListener("click", function () {
      _this.close(_this);
    });
    // 旋转
    _this.btnRotate.addEventListener("click", function () {
      _this.rotate(_this);
    });
    // 上一张
    _this.btnPrev.addEventListener("click", function () {
      _this.prev(_this);
    });
    // 下一张
    _this.btnNext.addEventListener("click", function () {
      _this.next(_this);
    });
    // 鼠标按下
    _this.imgViewContent.addEventListener("mousedown", function (event) {
      _this.mousedown(_this, event);
    });
    // 滚轮事件 chrome & ie
    _this.imgViewContent.addEventListener("mousewheel", function (event) {
      _this.mousewheel(_this, event);
    });
    // 滚轮事件 firefox
    _this.imgViewContent.addEventListener("DOMMouseScroll", function (event) {
      _this.mousewheel(_this, event);
    });
  },
  // 滚轮事件
  mousewheel: function (_this, event) {
    event.preventDefault();
    var delta =
      (event.wheelDelta && (event.wheelDelta > 0 ? 1 : -1)) || // chrome & ie
      (event.detail != 0 && (event.detail > 0 ? -1 : 1));
    if (delta > 0) {
      // 向上滚
      _this.index = _this.index + 0.1;
      if (_this.index > 4) {
        _this.index = 4;
      }
    } else if (delta < 0) {
      // 向下滚
      _this.index = _this.index - 0.1;
      if (_this.index < 0.1) {
        _this.index = 0.1;
      }
    }
    _this.imgViewContent.style.marginLeft =
      _this.imgMarginLeft - ((_this.index - 1) * _this.imgWidth) / 2 + "px";
    _this.imgViewContent.style.marginTop =
      _this.imgMarginTop - ((_this.index - 1) * _this.imgHeight) / 2 + "px";
    event.target.style.width = _this.imgWidth * _this.index + "px";
    event.target.style.height = _this.imgHeight * _this.index + "px";
  },
  // 鼠标按下事件(拖拽用)
  mousedown: function (_this, event) {
    event.preventDefault();
    var imgWidth = _this.imgWidth * _this.index;
    var imgHeight = _this.imgHeight * _this.index;
    var rotateNum = _this.num * 90;
    // 根据旋转的角度不同，坐标也不一样
    if (
      rotateNum % 90 == 0 &&
      rotateNum % 180 != 0 &&
      rotateNum % 270 != 0 &&
      rotateNum % 360 != 0
    ) {
      _this.startX = (imgWidth - imgHeight) / 2 + imgHeight - event.offsetY;
      _this.startY = event.offsetX - (imgWidth - imgHeight) / 2;
    } else if (rotateNum % 180 == 0 && rotateNum % 360 != 0) {
      _this.startX = imgWidth - event.offsetX;
      _this.startY = imgHeight - event.offsetY;
    } else if (rotateNum % 270 == 0 && rotateNum % 360 != 0) {
      _this.startX = (imgWidth - imgHeight) / 2 + event.offsetY;
      _this.startY = imgWidth - event.offsetX - (imgWidth - imgHeight) / 2;
    } else {
      _this.startX = event.offsetX;
      _this.startY = event.offsetY;
    }
    document.addEventListener("mousemove", mousemove);
    document.addEventListener("mouseup", mouseup);
    // 拖拽
    function mousemove(event) {
      _this.y = event.clientY - _this.startY - 10;
      _this.x = event.clientX - _this.startX - 10;
      _this.imgViewContent.style.marginTop = "" + _this.y + "px";
      _this.imgViewContent.style.marginLeft = "" + _this.x + "px";
      _this.imgViewContent.style.transition = "margin 0s";
    }
    // 鼠标放开
    function mouseup() {
      document.removeEventListener("mousemove", mousemove);
      document.removeEventListener("mouseup", mouseup);
      _this.imgViewContent.style.transition = "all 0.6s";
    }
  },
  // 关闭
  close: function (_this) {
    var imgViewDiv = document.getElementById("imgViewDiv");
    imgViewDiv.setAttribute("class", "img-view-dialog closing");
    setTimeout(function () {
      imgViewDiv.setAttribute("class", "img-view-dialog");
      imgViewDiv.style.display = "none";
      _this.num = 0;
    }, 400);
  },
  // 旋转
  rotate: function (_this) {
    _this.num++;
    _this.imgViewContent.style.transform =
      "rotate(" + _this.num * 90 + "deg) scale(1, 1)";
  },
  // 上一张
  prev: function (_this) {
    var dialogImg = document.getElementById("dialogImg");
    var thisSrc = dialogImg.attributes[2].value;
    if (thisSrc.indexOf("width:") != -1 || thisSrc.indexOf("height:") != -1) {
      thisSrc = dialogImg.attributes[3].value;
    }
    var dataList = _this.options.dataList;
    var index = dataList.indexOf(thisSrc);
    if (index > 0 && index <= dataList.length - 1) {
      index = index - 1;
      _this.checkImg(dataList[index], index);
    }
  },
  // 下一张
  next: function (_this) {
    var dialogImg = document.getElementById("dialogImg");
    var thisSrc = dialogImg.attributes[2].value;
    if (thisSrc.indexOf("width:") != -1 || thisSrc.indexOf("height:") != -1) {
      thisSrc = dialogImg.attributes[3].value;
    }
    var dataList = _this.options.dataList;
    var index = dataList.indexOf(thisSrc);
    if (index >= 0 && index < dataList.length - 1) {
      index = index + 1;
      _this.checkImg(dataList[index], index);
    }
  },
  // 点击图片
  checkImg: function (thisSrc, index) {
    var _this = this;
    _this.index = 1;
    _this.num = 0;
    _this.dialogImg.style.transform = "";
    _this.imgViewContent.setAttribute("class", "img-view-content");
    _this.getWindowWH();
    if (index == 0) {
      _this.btnPrev.style.display = "none";
    } else if (index == dataList.length - 1) {
      _this.btnNext.style.display = "none";
    } else {
      _this.btnPrev.style.display = "block";
      _this.btnNext.style.display = "block";
    }
    var image = new Image();
    image.src = thisSrc;
    var width = image.width;
    var height = image.height;
    var ww = 860;
    var wh = _this.winHeight - 20;
    if (width < ww && height < wh) {
      width = width;
      height = height;
    } else {
      var scale_x = width / ww;
      var scale_y = height / wh;
      if (scale_x > scale_y) {
        var width = ww;
        var height = parseInt(height / scale_x);
      } else {
        var width = parseInt(width / scale_y);
        var height = wh;
      }
    }
    _this.imgWidth = width;
    _this.imgHeight = height;
    var left = (_this.winWidth - width) / 2;
    var top = (_this.winHeight - height) / 2;
    _this.imgMarginLeft = left;
    _this.imgMarginTop = top;
    _this.imgViewContent.style.cssText =
      "margin-top:" + top + "px; margin-left:" + left + "px";
    _this.dialogImg.style.cssText =
      "width:" + width + "px; height:" + height + "px;";
    setTimeout(function () {
      _this.dialogImg.setAttribute("src", thisSrc);
      _this.imgViewContent.setAttribute("class", "img-view-content loadingImg");
    }, 600);
  },
  // 获取浏览器宽高
  getWindowWH: function () {
    var _this = this;
    if (window.innerWidth) _this.winWidth = window.innerWidth;
    else if (document.body && document.body.clientWidth)
      _this.winWidth = document.body.clientWidth;
    // 获取窗口高度
    if (window.innerHeight) _this.winHeight = window.innerHeight;
    else if (document.body && document.body.clientHeight)
      _this.winHeight = document.body.clientHeight;
    // 通过深入 Document 内部对 body 进行检测，获取窗口大小
    if (
      document.documentElement &&
      document.documentElement.clientHeight &&
      document.documentElement.clientWidth
    ) {
      _this.winHeight = document.documentElement.clientHeight;
      _this.winWidth = document.documentElement.clientWidth;
    }
  },
};
window.ImgView = ImgView;

module.exports = {
  ImgView,
};
// })(window, document);