/**
 * @file 预览图片
 * @author mazhaobo
 * @email mazhaobo@hoteamsoft.com
 */

(function (window, document) {
  function Viewer() {
    let scale = 1;

    // 劫持操作
    Object.defineProperties(this, {
      visible: {
        set: function (bool) {
          if (!bool) {
            this.dialog.setAttribute("hidden", "hidden");
          } else {
            this.dialog.removeAttribute("hidden");
          }
        },
      },
      src: {
        set: function (src) {
          this.img && this.img.setAttribute("src", src);
        },
      },
      scale: {
        get: function () {
          return scale;
        },
        set: function (num) {
          scale = num;
          if (!this.img.naturalWidth) {
            return;
          }
          Object.assign(this.img.style, {
            width: `${this.img.naturalWidth * num}px`,
            height: `${this.img.naturalHeight * num}px`,
          });
        },
      },
    });
  }

  // 初始化
  Viewer.prototype.init = function () {
    this.renderDialog();
    this.setScrollEvent();
    this.setKeyPressEvent();
    document.body.appendChild(this.dialog);
  };

  // 打开
  Viewer.prototype.open = function (src) {
    if (!this.dialog) {
      this.init();
    }
    this.src = src;
    this.visible = true;
    this.reset();
  };

  // 重置
  Viewer.prototype.reset = function () {
    Object.assign(this.img.style, {
      "margin-top": "",
      "margin-left": "",
    });
    this.scale = 1;
  };

  // 外层盒子
  Viewer.prototype.renderDialog = function () {
    const dialog = document.createElement("div");
    this.dialog = dialog;

    Object.assign(dialog.style, {
      position: "fixed",
      top: 0,
      left: 0,
      "z-index": "999",
      width: "100vw",
      height: "100vh",
      background: "rgba(0, 0, 0, 0.2)",
      overflow: "hidden",
    });

    this.renderImage();
    this.renderClose();
    dialog.appendChild(this.img);
  };

  // 图片
  Viewer.prototype.renderImage = function () {
    const img = document.createElement("img");
    this.img = img;

    img.src = this.src;

    Object.assign(img.style, {
      position: "absolute",
      top: "50vh",
      left: "50vw",
      transform: "translate(-50%, -50%)",
      "object-fit": "contain",
    });
  };

  // 关闭按钮
  Viewer.prototype.renderClose = function () {
    const _self = this;
    const close = document.createElement("button");
    this.dialog.appendChild(close);

    close.innerText = "关闭";
    Object.assign(close.style, {
      position: "absolute",
      fontWeight:'bold',
      top: "30px",
      right: "50px",
      padding:'5px',
      "z-index": "2000",
      border: "none",
      borderRadius:'5px',
      background: "#3979f9",
      outline: "none",
      color: "#fff",
      cursor: "pointer",
      "user-drag": "none",
    });
    close.addEventListener("click", function (e) {
      _self.visible = false;
    });
  };

  // 滚动调整大小
  Viewer.prototype.setScrollEvent = function () {
    const support = "onwheel" in document.createElement("div") ? "wheel" : "mousewheel";
    const _self = this;
    this.dialog.addEventListener(support, function (e) {
      if (e.deltaY > 0) {
        _self.scale = Math.max(0.1, _self.scale - 0.1);
      } else {
        _self.scale = Math.min(5, _self.scale + 0.1);
      }
      e.stopPropagation();
      e.preventDefault();
    });
    this.dialog.addEventListener("mousemove", function (e) {
      if (e.buttons === 1) {
        const { marginLeft, marginTop } = _self.img.style;
        const left = `${parseInt(marginLeft || 0) + e.movementX}px`;
        const top = `${parseInt(marginTop || 0) + e.movementY}px`;

        Object.assign(_self.img.style, {
          "margin-left": left,
          "margin-top": top,
        });
      }
      e.preventDefault();
    });
  };

  // 设置按键
  Viewer.prototype.setKeyPressEvent = function () {
    const _self = this;
    window.addEventListener("keydown", function (e) {
      if (e.code === "Escape") {
        _self.visible = false;
      }
    });
  };

  // 单例模式
  window.Viewer = new Viewer();
})(window, document);