"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var React = _interopRequireWildcard(require("react"));

var _lodash = _interopRequireDefault(require("lodash"));

var _LegacyCanvas = _interopRequireDefault(require("./LegacyCanvas"));

var _LegacyNav = _interopRequireDefault(require("./LegacyNav"));

var _ViewerToolbar = _interopRequireWildcard(require("./ViewerToolbar"));

var _Icon = require("./Icon");

var constants = _interopRequireWildcard(require("./constants"));

var _utils = _interopRequireDefault(require("../../utils/utils"));

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

var prefixCls = "".concat(_utils.default.prefixCls, "-viewer");

function noop() {}

var transitionDuration = 300;

var LegacyCore = /*#__PURE__*/function (_React$Component) {
  (0, _inherits2.default)(LegacyCore, _React$Component);

  var _super = _createSuper(LegacyCore);

  function LegacyCore(props) {
    var _this;

    (0, _classCallCheck2.default)(this, LegacyCore);
    _this = _super.call(this, props);

    _this.handleClose = function (e) {
      _this.props.onClose();
    };

    _this.setModleFile = function (activeIndex, currentLength, files) {
      var _modleFile = _this.state.modleFile;

      var modleFile = _lodash.default.cloneDeep(_modleFile);

      ;

      if (currentLength === 0) {
        modleFile = [activeIndex];
      } else {
        if (modleFile.length === 0) {
          for (var i = 0; i < currentLength; i++) {
            modleFile.push(i);
          }
        } else if (currentLength > modleFile.length) {
          var end = modleFile[modleFile.length - 1];
          var head = modleFile[0];
          var num = currentLength - modleFile.length; //要添加的数量

          var endnum = files.length - end;

          if (end + num < files.length) {
            for (var _i = 1; _i < num + 1; _i++) {
              modleFile.push(end + _i);
            }
          } else {
            for (var _i2 = 1; _i2 < endnum; _i2++) {
              modleFile.push(end + _i2);
            }

            for (var _i3 = 1; _i3 < num - endnum + 2; _i3++) {
              modleFile.unshift(head - _i3);
            }
          }
        } else if (currentLength < modleFile.length) {
          var loc = modleFile.indexOf(activeIndex);

          if (loc >= modleFile.length - currentLength) {
            for (var _i4 = 0; _i4 < modleFile.length - currentLength; _i4++) {
              modleFile.shift();
            }
          } else {
            for (var _i5 = 0; _i5 < loc; _i5++) {
              modleFile.shift();
            }

            for (var _i6 = 0; _i6 < modleFile.length - currentLength - loc; _i6++) {
              modleFile.pop();
            }
          }
        }
      }

      _this.setState({
        modleFile: modleFile
      });
    };

    _this.nextModleFile = function (modleFile, index) {
      modleFile.shift();
      modleFile.push(index);
      return modleFile;
    };

    _this.preModleFile = function (modleFile, index) {
      modleFile.unshift(index);
      modleFile.pop();
      return modleFile;
    };

    _this.indexMoleFile = function (modleFile, newIndex, files) {
      var num = modleFile.length; //要添加的数量

      var endnum = files.length - newIndex;
      modleFile = [];

      if (newIndex + num <= files.length) {
        for (var i = 0; i < num; i++) {
          modleFile.push(newIndex + i);
        }
      } else {
        for (var _i7 = 0; _i7 < endnum; _i7++) {
          modleFile.push(newIndex + _i7);
        }

        for (var _i8 = 1; _i8 <= num - endnum; _i8++) {
          modleFile.unshift(newIndex - _i8);
        }
      }

      return modleFile;
    };

    _this.changeActive = function (newIndex, files, onClick) {
      if (_this.props.onChange) {
        var activeFile = _this.getActiveFile(newIndex, files);

        onClick && onClick(activeFile);

        _this.props.onChange(activeFile, newIndex);
      }

      _this.loadFile(newIndex, true, files);
    };

    _this.loadImgSuccess = function (activeFile, imgWidth, imgHeight, isNewImage) {
      var realImgWidth = imgWidth;
      var realImgHeight = imgHeight;

      if (_this.props.defaultSize) {
        realImgWidth = _this.props.defaultSize.width;
        realImgHeight = _this.props.defaultSize.height;
      }

      if (activeFile.defaultSize) {
        realImgWidth = activeFile.defaultSize.width;
        realImgHeight = activeFile.defaultSize.height;
      }

      var _this$getImgWidthHeig = _this.getImgWidthHeight(realImgWidth, realImgHeight),
          _this$getImgWidthHeig2 = (0, _slicedToArray2.default)(_this$getImgWidthHeig, 2),
          width = _this$getImgWidthHeig2[0],
          height = _this$getImgWidthHeig2[1];

      var left = (_this.containerWidth - width) / 2;
      var top = (_this.containerHeight - height - _this.footerHeight) / 2;
      var scaleX = _this.props.defaultScale;
      var scaleY = _this.props.defaultScale;

      if (_this.props.noResetZoomAfterChange && isNewImage) {
        scaleX = _this.state.scaleX;
        scaleY = _this.state.scaleY;
      }

      _this.setState({
        activeFile: activeFile,
        width: width,
        height: height,
        left: left,
        top: top,
        imageWidth: imgWidth,
        imageHeight: imgHeight,
        loading: false,
        rotate: 0,
        scaleX: scaleX,
        scaleY: scaleY
      });
    };

    _this.handleChangeImg = function (newIndex, files, onClick) {
      var _modleFile = _this.state.modleFile;

      var modleFile = _lodash.default.cloneDeep(_modleFile);

      files = files || _this.props.files;

      if (newIndex >= files.length) {
        newIndex = 0;
      }

      if (newIndex < 0) {
        newIndex = files.length - 1;
      }

      if (newIndex === _this.state.activeIndex && !files) {
        return;
      } //目标不在当前数组内


      if (modleFile.indexOf(newIndex) === -1) {
        // if (newIndex === 0 && modleFile[modleFile.length - 1] === files.length - 1) {
        //     this.setModleFile(newIndex, modleFile.length, files);
        //     // modleFile = this.nextModleFile(modleFile, newIndex);
        // }
        // else if (newIndex === files.length - 1 && modleFile[0] === 0) {
        //     this.setModleFile(newIndex, modleFile.length, files);
        //     // modleFile = this.preModleFile(modleFile, newIndex);
        // }
        // else
        if (newIndex === modleFile[0] - 1) {
          modleFile = _this.preModleFile(modleFile, newIndex);
        } else if (newIndex === modleFile[modleFile.length - 1] + 1) {
          modleFile = _this.nextModleFile(modleFile, newIndex);
        } else {
          modleFile = _this.indexMoleFile(modleFile, newIndex, files);
        }

        _this.changeActive(newIndex, files, onClick);

        _this.setState({
          modleFile: modleFile
        });
      } else {
        _this.changeActive(newIndex, files, onClick);
      }
    };

    _this.handleChangeImgState = function (width, height, top, left) {
      _this.setState({
        width: width,
        height: height,
        top: top,
        left: left
      });
    };

    _this.handleDefaultAction = function (type) {
      switch (type) {
        case _Icon.ActionType.prev:
          _this.handleChangeImg(_this.state.activeIndex - 1);

          break;

        case _Icon.ActionType.next:
          _this.handleChangeImg(_this.state.activeIndex + 1);

          break;

        case _Icon.ActionType.zoomIn:
          var imgCenterXY = _this.getImageCenterXY();

          _this.handleZoom(imgCenterXY.x, imgCenterXY.y, 1, _this.props.zoomSpeed);

          break;

        case _Icon.ActionType.zoomOut:
          var imgCenterXY2 = _this.getImageCenterXY();

          _this.handleZoom(imgCenterXY2.x, imgCenterXY2.y, -1, _this.props.zoomSpeed);

          break;

        case _Icon.ActionType.rotateLeft:
          _this.handleRotate();

          break;

        case _Icon.ActionType.rotateRight:
          _this.handleRotate(true);

          break;

        case _Icon.ActionType.reset:
          _this.loadImg(_this.state.activeIndex);

          break;

        case _Icon.ActionType.scaleX:
          _this.handleScaleX(-1);

          break;

        case _Icon.ActionType.scaleY:
          _this.handleScaleY(-1);

          break;

        case _Icon.ActionType.download:
          _this.handleDownload();

          break;

        default:
          break;
      }
    };

    _this.handleAction = function (config) {
      _this.handleDefaultAction(config.actionType);

      if (config.onClick) {
        var activeFile = _this.getActiveFile();

        config.onClick(activeFile);
      }
    };

    _this.handleDownload = function () {
      var activeFile = _this.getActiveFile();

      if (activeFile.downloadUrl) {
        window.location.href = activeFile.downloadUrl;
      }
    };

    _this.handleScaleX = function () {
      var newScale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1 | -1;

      _this.setState({
        scaleX: _this.state.scaleX * newScale
      });
    };

    _this.handleScaleY = function () {
      var newScale = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1 | -1;

      _this.setState({
        scaleY: _this.state.scaleY * newScale
      });
    };

    _this.handleScrollZoom = function (targetX, targetY, direct) {
      _this.handleZoom(targetX, targetY, direct, _this.props.zoomSpeed);
    };

    _this.handleZoom = function (targetX, targetY, direct, scale) {
      _this.setContainerWidthHeight();

      var imgCenterXY = _this.getImageCenterXY();

      var diffX = targetX - imgCenterXY.x;
      var diffY = targetY - imgCenterXY.y; // when image width is 0, set original width        

      var top = 0;
      var left = 0;
      var width = 0;
      var height = 0;
      var scaleX = 0;
      var scaleY = 0;

      if (_this.state.width === 0) {
        var _this$getImgWidthHeig3 = _this.getImgWidthHeight(_this.state.imageWidth, _this.state.imageHeight),
            _this$getImgWidthHeig4 = (0, _slicedToArray2.default)(_this$getImgWidthHeig3, 2),
            imgWidth = _this$getImgWidthHeig4[0],
            imgHeight = _this$getImgWidthHeig4[1];

        left = (_this.containerWidth - imgWidth) / 2;
        top = (_this.containerHeight - _this.footerHeight - imgHeight) / 2;
        width = _this.state.width + imgWidth;
        height = _this.state.height + imgHeight;
        scaleX = scaleY = 1;
      } else {
        var directX = _this.state.scaleX > 0 ? 1 : -1;
        var directY = _this.state.scaleY > 0 ? 1 : -1;
        scaleX = _this.state.scaleX + scale * direct * directX;
        scaleY = _this.state.scaleY + scale * direct * directY;

        if (Math.abs(scaleX) < 0.1 || Math.abs(scaleY) < 0.1) {
          return;
        }

        top = _this.state.top + -direct * diffY / _this.state.scaleX * scale * directX;
        left = _this.state.left + -direct * diffX / _this.state.scaleY * scale * directY;
        width = _this.state.width;
        height = _this.state.height;
      }

      _this.setState({
        width: width,
        scaleX: scaleX,
        scaleY: scaleY,
        height: height,
        top: top,
        left: left
      });
    };

    _this.getImageCenterXY = function () {
      return {
        x: _this.state.left + _this.state.width / 2,
        y: _this.state.top + _this.state.height / 2
      };
    };

    _this.handleRotate = function () {
      var isRight = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;

      _this.setState({
        rotate: _this.state.rotate + 90 * (isRight ? 1 : -1)
      });
    };

    _this.handleResize = function () {
      var _this$state = _this.state,
          imageWidth = _this$state.imageWidth,
          imageHeight = _this$state.imageHeight;

      var _this$getImgWidthHeig5 = _this.getImgWidthHeight(imageWidth, imageHeight),
          _this$getImgWidthHeig6 = (0, _slicedToArray2.default)(_this$getImgWidthHeig5, 2),
          width = _this$getImgWidthHeig6[0],
          height = _this$getImgWidthHeig6[1];

      _this.setContainerWidthHeight();

      if (_this.props.visible) {
        var left = (_this.containerWidth - width) / 2;
        var top = (_this.containerHeight - height - _this.footerHeight) / 2;

        _this.changeNavBarStyle(_this.props.activeIndex, _this.props.files);

        _this.setState({
          width: width,
          height: height,
          left: left,
          top: top
        });
      }
    };

    _this.handleKeydown = function (e) {
      var keyCode = e.keyCode || e.which || e.charCode;
      var isFeatrue = false;

      switch (keyCode) {
        // key: esc
        case 27:
          _this.props.onClose();

          isFeatrue = true;
          break;
        // key: ←

        case 37:
          if (e.ctrlKey) {
            _this.handleDefaultAction(_Icon.ActionType.rotateLeft);
          } else {
            _this.handleDefaultAction(_Icon.ActionType.prev);
          }

          isFeatrue = true;
          break;
        // key: →

        case 39:
          if (e.ctrlKey) {
            _this.handleDefaultAction(_Icon.ActionType.rotateRight);
          } else {
            _this.handleDefaultAction(_Icon.ActionType.next);
          }

          isFeatrue = true;
          break;
        // key: ↑

        case 38:
          _this.handleDefaultAction(_Icon.ActionType.zoomIn);

          isFeatrue = true;
          break;
        // key: ↓

        case 40:
          _this.handleDefaultAction(_Icon.ActionType.zoomOut);

          isFeatrue = true;
          break;
        // key: Ctrl + 1

        case 49:
          if (e.ctrlKey) {
            _this.loadImg(_this.state.activeIndex);

            isFeatrue = true;
          }

          break;

        default:
          break;
      }

      if (isFeatrue) {
        e.preventDefault();
      }
    };

    _this.handleTransitionEnd = function (e) {
      if (!_this.state.transitionEnd || _this.state.visibleStart) {
        _this.setState({
          visibleStart: false,
          transitionEnd: true
        });
      }
    };

    _this.onRenderSuccess = function () {
      _this.setState({
        loading: false
      });
    };

    _this.refNavBar = function (ref) {
      _this.navBar = ref;
    };

    _this.handleCanvasMouseDown = function (e) {
      var onMaskClick = _this.props.onMaskClick;
      onMaskClick && onMaskClick(e);
    };

    _this.getActiveFile = function () {
      var activeIndex = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : undefined;
      var files = arguments.length > 1 ? arguments[1] : undefined;
      var activeImg = {
        src: '',
        alt: '',
        downloadUrl: ''
      };

      var _files = files || _this.props.files || [];

      var realActiveIndex = null;

      if (activeIndex !== undefined) {
        realActiveIndex = activeIndex;
      } else {
        realActiveIndex = _this.state.activeIndex;
      }

      if (_files.length > 0 && realActiveIndex >= 0) {
        activeImg = _files[realActiveIndex];
      }

      return activeImg;
    };

    _this.handleMouseScroll = function (e) {
      if (_this.detail) {
        return;
      } // e.preventDefault();


      var direct = 0 | 1 | -1;

      if (e.deltaY === 0) {
        direct = 0;
      } else {
        direct = e.deltaY > 0 ? -1 : 1;
      }

      if (direct !== 0) {
        var x = e.clientX;
        var y = e.clientY;

        if (_this.props.container) {
          var containerRect = _this.props.container.getBoundingClientRect();

          x -= containerRect.left;
          y -= containerRect.top;
        }

        _this.handleScrollZoom(x, y, direct);
      }
    };

    _this.onPrev = function () {
      var prev = _this.props.customToolbar(_ViewerToolbar.defaultToolbars).filter(function (i) {
        return i.key === 'prev';
      })[0];

      var onClick = prev.onClick || null;

      _this.handleChangeImg(_this.state.activeIndex - 1, _this.props.files, onClick);
    };

    _this.onNext = function () {
      var next = _this.props.customToolbar(_ViewerToolbar.defaultToolbars).filter(function (i) {
        return i.key === 'next';
      })[0];

      var onClick = next.onClick || null;

      _this.handleChangeImg(_this.state.activeIndex + 1, _this.props.files, onClick);
    };

    _this.state = {
      visible: false,
      visibleStart: false,
      transitionEnd: false,
      activeFile: {
        src: ''
      },
      activeIndex: _this.props.activeIndex,
      isImage: false,
      width: 0,
      height: 0,
      top: 15,
      left: null,
      rotate: 0,
      imageWidth: 0,
      imageHeight: 0,
      scaleX: _this.props.defaultScale,
      scaleY: _this.props.defaultScale,
      loading: false,
      loadFailed: false,
      navbarWidth: 0,
      //navBar宽度
      // compareDistance: 0,  //navBar移动距离
      modleFile: [] //渲染文件数组
      // currentLength: 0,//当前渲染数量

    };

    _this.setContainerWidthHeight();

    _this.footerHeight = constants.FOOTER_HEIGHT;
    return _this;
  }

  (0, _createClass2.default)(LegacyCore, [{
    key: "setContainerWidthHeight",
    value: function setContainerWidthHeight() {
      this.containerWidth = window.innerWidth;
      this.containerHeight = window.innerHeight;

      if (this.props.container) {
        this.containerWidth = this.props.container.offsetWidth;
        this.containerHeight = this.props.container.offsetHeight;
      }
    }
  }, {
    key: "startVisible",
    value: function startVisible(activeIndex) {
      var _this2 = this;

      if (!this.props.container) {
        document.body.style.overflow = 'hidden';

        if (document.body.scrollHeight > document.body.clientHeight) {
          document.body.style.paddingRight = '15px';
        }
      }

      this.setState({
        visibleStart: true
      });
      setTimeout(function () {
        _this2.setState({
          visible: true,
          activeIndex: activeIndex
        }, function () {
          _this2.bindEvent();

          _this2.loadFile(activeIndex);
        });
      }, 10);
    } //初始化目标数组 （页面改变/鼠标选中目标）

  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      this.LegacyCore.addEventListener('transitionend', this.handleTransitionEnd, false);
      this.startVisible(this.state.activeIndex);
      this.changeNavBarStyle(this.props.activeIndex, this.props.files);
    }
  }, {
    key: "getImgWidthHeight",
    value: function getImgWidthHeight(imgWidth, imgHeight) {
      var width = 0;
      var height = 0; // let maxWidth = this.containerWidth * 0.8;
      // let maxHeight = (this.containerHeight - this.footerHeight) * 0.8;
      // this.setContainerWidthHeight();

      var maxWidth = this.containerWidth;
      var maxHeight = this.containerHeight - this.footerHeight;
      width = Math.min(maxWidth, imgWidth);
      height = width / imgWidth * imgHeight;

      if (height > maxHeight) {
        height = maxHeight; // width = height / imgHeight * imgWidth;
      }

      if (this.props.noLimitInitializationSize) {
        // width = imgWidth;
        height = imgHeight;
      }

      return [width, height];
    }
  }, {
    key: "loadFile",
    value: function loadFile(activeIndex, isNewImage, files) {
      this.setContainerWidthHeight();
      var activeFile = null;

      var _files = files || this.props.files || [];

      if (_files.length > 0) {
        activeFile = _files[activeIndex];
        this.changeNavBarStyle(activeIndex, _files);
        var isImage = activeFile.imageType && activeFile.imageType.includes('image');

        if (isImage) {
          this.loadImg(activeIndex, isNewImage, activeFile);
        } else {
          this.loadPDF(activeIndex, activeFile);
        }
      }
    }
  }, {
    key: "loadImg",
    value: function loadImg(activeIndex, isNewImage, activeFile) {
      var _this3 = this;

      var loadComplete = false;
      var img = new Image();
      this.setState({
        isImage: true,
        activeIndex: activeIndex,
        loading: true,
        loadFailed: false
      }, function () {
        img.onload = function () {
          if (!loadComplete) {
            _this3.loadImgSuccess(activeFile, img.width, img.height, isNewImage);
          }
        };

        img.onerror = function () {
          if (_this3.props.defaultImg) {
            _this3.setState({
              loadFailed: true
            });

            var deafultImgWidth = _this3.props.defaultImg.width || _this3.containerWidth * .5;
            var defaultImgHeight = _this3.props.defaultImg.height || _this3.containerHeight * .5;

            _this3.loadImgSuccess(activeFile, deafultImgWidth, defaultImgHeight, isNewImage);
          } else {
            _this3.setState({
              activeIndex: activeIndex,
              imageWidth: 0,
              imageHeight: 0,
              loading: false
            });
          }
        };

        img.src = activeFile.src || '';

        if (img.complete) {
          loadComplete = true;

          _this3.loadImgSuccess(activeFile, img.width, img.height, isNewImage);
        }
      });
    }
  }, {
    key: "loadPDF",
    value: function loadPDF(activeIndex, activeFile) {
      var _this4 = this;

      var width = this.containerWidth;
      var height = this.containerHeight - this.footerHeight; // let left = (this.containerWidth - width) / 2;
      // let top = (this.containerHeight - height - this.footerHeight) / 2;

      var _document = (document.getElementsByClassName('react-pdf__Document') || [])[2];

      if (_document) {
        _document.style.height = height + 'px';
      }

      var left = 0;
      var top = 0;
      var scaleX = this.props.defaultScale;
      var scaleY = this.props.defaultScale;

      if (this.props.noResetZoomAfterChange) {
        scaleX = this.state.scaleX;
        scaleY = this.state.scaleY;
      }

      this.setState({
        activeIndex: activeIndex,
        isImage: false,
        activeFile: activeFile,
        width: width,
        height: height,
        left: left,
        top: top,
        imageWidth: this.containerWidth,
        imageHeight: this.containerHeight,
        loading: this.props.type !== 'ofd' && activeFile.src,
        //新增ofd发票无需loading
        rotate: 0,
        scaleX: scaleX,
        scaleY: scaleY
      });
      setTimeout(function () {
        if (_this4.state.loading) {
          _this4.setState({
            loading: false
          });
        }
      }, 1000);
    }
  }, {
    key: "changeNavBarStyle",
    value: function changeNavBarStyle(activeIndex, files) {
      if (this.navBar && this.navBar.clientWidth) {
        var clientWidth = this.navBar.clientWidth;
        var realLength = files.length;
        var currentLength = Math.min(parseInt(clientWidth / 46), this.props.maxLength, realLength); //确认底部列表显示数量

        this.setModleFile(activeIndex, currentLength, files); //初始化数组

        var navbarWidth = currentLength * 46 - 6; // const compareDistance = activeIndex + 1 > currentLength ? (currentLength - activeIndex - 1) * 46 : 0;

        this.setState({
          navbarWidth: navbarWidth // compareDistance

        });
      }
    }
  }, {
    key: "bindEvent",
    value: function bindEvent() {
      var remove = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
      var funcName = 'addEventListener';

      if (remove) {
        funcName = 'removeEventListener';
      }

      if (!this.props.disableKeyboardSupport) {
        document[funcName]('keydown', this.handleKeydown, false);
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this.bindEvent(true);
      this.LegacyCore.removeEventListener('transitionend', this.handleTransitionEnd, false);
    }
  }, {
    key: "UNSAFE_componentWillReceiveProps",
    value: function UNSAFE_componentWillReceiveProps(nextProps) {
      var _this5 = this;

      if (!this.props.visible && nextProps.visible) {
        this.startVisible(nextProps.activeIndex);
        return;
      }

      if (this.props.visible && !nextProps.visible) {
        this.bindEvent(true);
        this.handleZoom(this.containerWidth / 2, (this.containerHeight - this.footerHeight) / 2, -1, (this.state.scaleX > 0 ? 1 : -1) * this.state.scaleX - 0.11);
        setTimeout(function () {
          document.body.style.overflow = '';
          document.body.style.paddingRight = '';

          _this5.setState({
            visible: false,
            transitionEnd: false,
            // width: 0,
            // height: 0,
            scaleX: _this5.props.defaultScale,
            scaleY: _this5.props.defaultScale,
            // rotate: 1,
            rotate: 0,
            imageWidth: 0,
            imageHeight: 0,
            loadFailed: false
          });
        }, transitionDuration);
        return;
      }

      if (this.props.activeIndex !== nextProps.activeIndex && _lodash.default.isEqual(this.props.files, nextProps.files)) {
        this.handleChangeImg(nextProps.activeIndex, nextProps.files);
      }

      if (!_lodash.default.isEqual(this.props.files, nextProps.files)) {
        if (this.props.files.length > nextProps.files.length) {
          var num = this.state.modleFile.length;

          if (num > nextProps.files.length) {
            num = nextProps.files.length;
          }

          var modleFile = [];

          for (var i = 0; i < num; i++) {
            modleFile.push(i);
          }

          this.setState({
            modleFile: modleFile
          }, function () {
            return _this5.handleChangeImg(nextProps.activeIndex, nextProps.files);
          });
        } else {
          this.handleChangeImg(nextProps.activeIndex, nextProps.files);
        }
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this6 = this;

      var activeImg = {
        src: '',
        alt: ''
      };
      var zIndex = 1000;
      var cMapUrl = this.props.cMapUrl;

      if (this.props.zIndex) {
        zIndex = this.props.zIndex;
      }

      var viewerStryle = {
        opacity: this.state.visible ? 1 : 0
      };

      if (!this.state.visible && this.state.transitionEnd) {
        viewerStryle.display = 'none';
      }

      if (!this.state.visible && this.state.visibleStart) {
        viewerStryle.display = 'block';
      }

      if (this.state.visible && this.state.transitionEnd) {
        activeImg = this.getActiveFile();
      }

      var className = "".concat(prefixCls, " ").concat(prefixCls, "-transition");

      if (this.props.container) {
        className += " ".concat(prefixCls, "-inline");
      }

      return /*#__PURE__*/React.createElement("div", {
        ref: function ref(_ref) {
          _this6.LegacyCore = _ref;
        },
        className: className,
        style: viewerStryle,
        onWheel: this.handleMouseScroll
      }, !this.props.noMask && /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-mask"),
        style: {
          zIndex: zIndex,
          background: this.props.container ? '' : 'rgba(55, 55, 55, 0.6)'
        }
      }), this.props.noClose || /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-close ").concat(prefixCls, "-btn"),
        onClick: this.handleClose
      }, /*#__PURE__*/React.createElement("i", {
        className: "fm fm-cross"
      })), this.props.noToolbar || /*#__PURE__*/React.createElement(_ViewerToolbar.default, {
        prefixCls: prefixCls,
        onAction: this.handleAction,
        activeFile: this.state.activeFile,
        alt: activeImg.alt,
        width: this.state.imageWidth,
        height: this.state.imageHeight,
        attribute: this.props.attribute,
        zoomable: this.props.zoomable,
        rotatable: this.props.rotatable,
        scalable: this.props.scalable,
        changeable: this.props.changeable,
        downloadable: this.props.downloadable,
        noImgDetails: this.props.noImgDetails,
        toolbars: this.props.customToolbar(_ViewerToolbar.defaultToolbars)
      }), /*#__PURE__*/React.createElement(_LegacyCanvas.default, {
        prefixCls: prefixCls,
        activeFile: this.state.activeFile // isImage={this.state.isImage}
        ,
        type: this.props.type //文件类型
        ,
        visible: this.props.visible,
        width: this.state.width,
        height: this.state.height,
        top: this.state.top,
        left: this.state.left,
        rotate: this.state.rotate,
        onChangeImgState: this.handleChangeImgState,
        onResize: this.handleResize,
        zIndex: zIndex + 5,
        cMapUrl: cMapUrl,
        scaleX: this.state.scaleX,
        scaleY: this.state.scaleY,
        loading: this.state.loading,
        drag: this.props.drag,
        containerWidth: this.containerWidth,
        containerHeight: this.containerHeight,
        footerHeight: this.footerHeight,
        renderDetail: this.props.renderDetail,
        closeDetail: this.closeDetail,
        onCanvasMouseDown: this.handleCanvasMouseDown,
        onRenderSuccess: this.onRenderSuccess,
        activeIndex: this.state.activeIndex //当前选中项

      }), this.props.noFooter || /*#__PURE__*/React.createElement("div", {
        className: "".concat(prefixCls, "-footer"),
        style: {
          zIndex: zIndex + 5
        }
      }, this.props.noNavbar || /*#__PURE__*/React.createElement(_LegacyNav.default, {
        prefixCls: prefixCls,
        cMapUrl: cMapUrl,
        type: this.props.type //文件类型
        ,
        navbarWidth: this.state.navbarWidth,
        files: this.props.files //总文件
        ,
        sourefiles: this.state.modleFile //传入文件下标数组
        ,
        activeIndex: this.state.activeIndex,
        refNavBar: this.refNavBar,
        onPrev: this.onPrev,
        onNext: this.onNext,
        onChangeImg: this.handleChangeImg
      })));
    }
  }]);
  return LegacyCore;
}(React.Component);

exports.default = LegacyCore;
LegacyCore.defaultProps = {
  visible: false,
  onClose: noop,
  files: [],
  activeIndex: 0,
  zIndex: 1000,
  drag: true,
  attribute: true,
  zoomable: true,
  rotatable: true,
  scalable: true,
  onMaskClick: noop,
  changeable: true,
  customToolbar: function customToolbar(toolbars) {
    return toolbars;
  },
  zoomSpeed: .05,
  disableKeyboardSupport: false,
  noResetZoomAfterChange: false,
  noLimitInitializationSize: false,
  defaultScale: 1,
  noMask: true,
  maxLength: 5,
  type: 'img'
};