"use strict";

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _react = _interopRequireWildcard(require("react"));
var _carousel = _interopRequireDefault(require("antd/lib/carousel"));
var _RightOutlined = _interopRequireDefault(require("@ant-design/icons/RightOutlined"));
var _LeftOutlined = _interopRequireDefault(require("@ant-design/icons/LeftOutlined"));
var _UpOutlined = _interopRequireDefault(require("@ant-design/icons/UpOutlined"));
var _DownOutlined = _interopRequireDefault(require("@ant-design/icons/DownOutlined"));
var _MyIcon = _interopRequireDefault(require("../MyIcon"));
var _ImgView = _interopRequireDefault(require("../ImgView"));
var _index = _interopRequireDefault(require("./index.less"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
var prefix = ['Webkit', 'Moz', 'O', 'MS'];

// 获取dom样式
function getStyle(el) {
  var computedStyle = {};
  if (window.getComputedStyle) {
    computedStyle = getComputedStyle(el, null);
  } else {
    computedStyle = el.currentStyle; // 兼容IE
  }
  return computedStyle;
}

// 像素转数值
function pxToNumber() {
  var str = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
  return str ? +str.replace('px', '') : 0;
}
function PictureGallery(props) {
  var _props$mode = props.mode,
    mode = _props$mode === void 0 ? 'vertical' : _props$mode,
    _props$thumbnailPosit = props.thumbnailPosition,
    thumbnailPosition = _props$thumbnailPosit === void 0 ? 'right' : _props$thumbnailPosit,
    _props$currentIndex = props.currentIndex,
    currentIndex = _props$currentIndex === void 0 ? 0 : _props$currentIndex,
    _props$className = props.className,
    className = _props$className === void 0 ? '' : _props$className,
    cockpit = props.cockpit,
    _props$pictures = props.pictures,
    pictures = _props$pictures === void 0 ? [] : _props$pictures,
    _props$dots = props.dots,
    dots = _props$dots === void 0 ? true : _props$dots;
  var carousel = (0, _react.useRef)();
  var lastOffset = (0, _react.useRef)('0px');
  var _useState = (0, _react.useState)({
      picSmallW: 100,
      picSmallH: 150,
      picInterval: 10
    }),
    _useState2 = _slicedToArray(_useState, 2),
    picConfig = _useState2[0],
    setPicConfig = _useState2[1];
  var _useState3 = (0, _react.useState)(currentIndex),
    _useState4 = _slicedToArray(_useState3, 2),
    currentPic = _useState4[0],
    setCurrent = _useState4[1];
  var isHorizontal = mode === 'horizontal';
  var isVertical = mode == 'vertical';
  (0, _react.useEffect)(function () {
    checkProps();
    setTimeout(function () {
      initConfig();
    });
  }, []);

  // 获取缩略图父容器dom
  function getSmallListWrapperDom() {
    return document.getElementById('pictrueGalleryListWrapper');
  }

  // 获取缩略图容器dom
  function getSmallListDom() {
    return document.getElementById('pictrueGalleryList');
  }

  // 检测props联动
  function checkProps() {
    if (isHorizontal) {
      var about = ['top', 'bottom'];
      if (!about.includes(thumbnailPosition)) {
        throw new Error('PictureGallery: horizontal模式下 thumbnailPosition只能为 top、bottom');
      }
    }
    if (isVertical) {
      var _about = ['left', 'right'];
      if (!_about.includes(thumbnailPosition)) {
        throw new Error('PictureGallery : vertical模式下 thumbnailPosition只能为 left、right');
      }
    }
  }

  // 初始化图片位置大小
  function initConfig() {
    carousel.current.innerSlider.slickGoTo(currentIndex);
    var el = getSmallListDom();
    var $li = (el === null || el === void 0 ? void 0 : el.children) && el.children[0];
    var _getStyle = getStyle($li),
      width = _getStyle.width,
      height = _getStyle.height,
      marginRight = _getStyle.marginRight,
      marginBottom = _getStyle.marginBottom;
    picConfig.picSmallH = pxToNumber(height);
    picConfig.picSmallW = pxToNumber(width);
    picConfig.picInterval = pxToNumber(isHorizontal ? marginRight : marginBottom);
    setPicConfig(_objectSpread({}, picConfig));
  }

  // 一个图片li所占据的宽度或者高度 根据mode判断
  function getLiSpace() {
    var picSmallH = picConfig.picSmallH,
      picSmallW = picConfig.picSmallW,
      picInterval = picConfig.picInterval;
    return isHorizontal ? picInterval + picSmallW : picInterval + picSmallH;
  }

  // 父容器所占据的高度或者宽度 根据mode判断
  function getWrapperSpace() {
    var wrapper = getSmallListWrapperDom();
    if (isHorizontal) {
      return wrapper.clientWidth;
    } else {
      return wrapper.clientHeight;
    }
  }

  // 获取缩略图列表的偏移值
  function getOffset(type) {
    var len = pictures.length; // 图片总数
    var liSpace = getLiSpace(); // 一张图片li所占据的宽度或者高度
    var wrapperSpace = getWrapperSpace(); // 父容器所占据的高度或者宽度
    var halfSpace = wrapperSpace / 2; // 父容器的宽或高的一半
    var number = Math.floor(wrapperSpace / liSpace); // 父容器所见宽或高能放置图片li的个数 假如父容器是800px 每个li所占宽或高是100px 那么个数为800/100=8
    var halfNo = number / 2; // 父容器所见宽或高能放置图片li个数的一半

    // 滚动到最后一张图片之后时 需要回滚到第一张
    if (currentPic + 1 > len) {
      return '0px';
      // 刚开始从左至右滚动时不需要偏移 当超过半数才需要设置偏移量
    } else if (currentPic + 1 <= halfNo) {
      return '0px';
      // 滚动到最后一页时
    } else if (currentPic + 1 > len - halfNo + 1) {
      // 右箭头点击时 不需要进行偏移
      if (type === 'add') {
        return lastOffset.current;
      }
      // 左箭头点击时 需要直接滚动到最右侧
      if (type === 'cut') {
        return "".concat(-liSpace * currentPic + wrapperSpace - liSpace, "px");
      }
    } else {
      return "".concat(-liSpace * currentPic + halfSpace - liSpace, "px");
    }
  }

  // 设置缩略图列表偏移
  function setOffset(type) {
    var offset = getOffset(type);
    var el = getSmallListDom();
    prefix.forEach(function (m) {
      el.style["".concat(m, "Transform")] = isHorizontal ? "translate(".concat(offset, ")") : "translate(0, ".concat(offset, ")");
    });
    lastOffset.current = offset;
  }
  function setPicIndex(index) {
    var currentIndex = -1;
    var picLen = pictures.length;
    if (index < 0) {
      currentIndex = picLen - 1;
    } else if (index > picLen - 1) {
      currentIndex = 0;
    } else {
      currentIndex = index;
    }
    carousel.current.innerSlider.slickGoTo(currentIndex);
    setCurrent(currentIndex);
  }

  // 图片切换事件
  function handleChange(type, i) {
    var index;
    switch (type) {
      case 'add':
        index = currentPic + 1;
        setPicIndex(index);
        break;
      case 'cut':
        index = currentPic - 1;
        setPicIndex(index);
        break;
      default:
        setPicIndex(i);
        break;
    }
    setOffset(type);
  }
  function beforeChange(from) {
    var to = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
    var type = 'cut';
    if (to > from) {
      type = 'add';
    }
    setPicIndex(to);
    setOffset(type);
  }

  // 获取箭头方向
  function getArrowDirection(type, isSmall) {
    switch (type) {
      case 'add':
        if (isSmall) {
          return isVertical ? 'down' : 'right';
        }
        return 'right';
      case 'cut':
        if (isSmall) {
          return isVertical ? 'up' : 'left';
        }
        return 'left';
      default:
        break;
    }
  }

  // 左右箭头
  function renderArrow(type, isSmall) {
    var arrowType = getArrowDirection(type === 'left' ? 'cut' : 'add', isSmall);
    var arrow = {
      left: /*#__PURE__*/_react["default"].createElement(_LeftOutlined["default"], {
        style: {
          fontSize: isSmall ? '20px' : '40px'
        }
      }),
      right: /*#__PURE__*/_react["default"].createElement(_RightOutlined["default"], {
        style: {
          fontSize: isSmall ? '20px' : '40px'
        }
      }),
      up: /*#__PURE__*/_react["default"].createElement(_UpOutlined["default"], {
        style: {
          fontSize: isSmall ? '20px' : '40px'
        }
      }),
      down: /*#__PURE__*/_react["default"].createElement(_DownOutlined["default"], {
        style: {
          fontSize: isSmall ? '20px' : '40px'
        }
      })
    };
    return /*#__PURE__*/_react["default"].createElement("div", {
      className: "".concat(_index["default"].arrow, " ").concat(_index["default"]["arrow-".concat(type)], " ").concat(isSmall ? _index["default"].small : _index["default"].big),
      onClick: function onClick() {
        return handleChange(type === 'left' ? 'cut' : 'add');
      }
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: _index["default"]['imgWrap']
    }, arrow[arrowType]));
  }

  // 小图列表
  function renderSmallList() {
    return /*#__PURE__*/_react["default"].createElement("div", {
      className: _index["default"]['small-list'],
      id: "pictrueGalleryListWrapper"
    }, /*#__PURE__*/_react["default"].createElement("ul", {
      id: "pictrueGalleryList"
    }, pictures.map(function (m, i) {
      return /*#__PURE__*/_react["default"].createElement("li", {
        key: i,
        onClick: function onClick() {
          return handleChange(null, i);
        },
        className: currentPic === i ? _index["default"].current : ''
      }, /*#__PURE__*/_react["default"].createElement("img", {
        draggable: false,
        src: m,
        alt: ""
      }));
    })));
  }

  // 缩略图
  function renderThumbnailBox() {
    return /*#__PURE__*/_react["default"].createElement("div", {
      className: "".concat(_index["default"]['thumbnail-box'], " ").concat(_index["default"][mode])
    }, renderArrow('left', true), /*#__PURE__*/_react["default"].createElement("div", {
      style: {
        height: '100%'
      }
    }, renderSmallList()), renderArrow('right', true));
  }

  // 渲染图片下标
  function renderIndex() {
    return /*#__PURE__*/_react["default"].createElement("div", {
      className: _index["default"]['indexText']
    }, /*#__PURE__*/_react["default"].createElement("span", {
      style: {
        paddingRight: 20
      }
    }, /*#__PURE__*/_react["default"].createElement("span", {
      className: _index["default"]['currentIndex']
    }, currentPic + 1), "/", pictures.length), /*#__PURE__*/_react["default"].createElement("a", {
      href: pictures[currentPic],
      target: "_blank",
      rel: "noreferrer"
    }, /*#__PURE__*/_react["default"].createElement(_MyIcon["default"], {
      type: "icon-public-msnui-cloud-download",
      style: {
        fontSize: 24
      }
    })));
  }

  // 大图预览盒子
  function renderViewBox() {
    return /*#__PURE__*/_react["default"].createElement("div", {
      className: _index["default"]['view-box']
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: _index["default"]['view-box-inner']
    }, renderArrow('left'), /*#__PURE__*/_react["default"].createElement("div", {
      className: _index["default"]['view-box-wrap']
    }, /*#__PURE__*/_react["default"].createElement(_carousel["default"], {
      ref: carousel,
      beforeChange: beforeChange,
      dots: dots
    }, pictures.map(function (item, index) {
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: _index["default"]['view-box-item'],
        key: index
      }, /*#__PURE__*/_react["default"].createElement(_ImgView["default"], {
        src: item
      }));
    }))), renderIndex(), renderArrow('right')));
  }

  // 获取主体
  function getContainer() {
    switch (thumbnailPosition) {
      case 'left':
        return /*#__PURE__*/_react["default"].createElement("div", {
          className: _index["default"]['picture-container']
        }, /*#__PURE__*/_react["default"].createElement("div", {
          className: "".concat(_index["default"]['picture-container-left'], " ").concat(_index["default"].thumbnail)
        }, renderThumbnailBox()), /*#__PURE__*/_react["default"].createElement("div", {
          className: "".concat(_index["default"]['picture-container-right'], " ").concat(_index["default"].view)
        }, renderViewBox()));
      case 'right':
        return /*#__PURE__*/_react["default"].createElement("div", {
          className: _index["default"]['picture-container']
        }, /*#__PURE__*/_react["default"].createElement("div", {
          className: "".concat(_index["default"]['picture-container-left'], " ").concat(_index["default"].view)
        }, renderViewBox()), /*#__PURE__*/_react["default"].createElement("div", {
          className: "".concat(_index["default"]['picture-container-right'], " ").concat(_index["default"].thumbnail)
        }, renderThumbnailBox()));
      case 'top':
        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, renderThumbnailBox(), renderViewBox());
      case 'bottom':
        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, renderViewBox(), renderThumbnailBox());
      default:
        break;
    }
  }
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "".concat(_index["default"]['picture-gallery-wrapper'], " ").concat(cockpit && _index["default"]['cockpit-gallery'], " ").concat(className)
  }, getContainer());
}
var _default = exports["default"] = PictureGallery;
//# sourceMappingURL=index.js.map
