import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";

/**
 * dots.jsx
 *
 * @Author: bjzhuwei
 * @Date: 2017/8/18 22:52
 */
import React from 'react';
import PropTypes from 'prop-types';
/**
 * @ignore
 * */

var SmallImgIndex =
/*#__PURE__*/
function (_React$PureComponent) {
  _inherits(SmallImgIndex, _React$PureComponent);

  function SmallImgIndex() {
    _classCallCheck(this, SmallImgIndex);

    return _possibleConstructorReturn(this, _getPrototypeOf(SmallImgIndex).apply(this, arguments));
  }

  _createClass(SmallImgIndex, [{
    key: "render",
    value: function render() {
      var _this = this;

      var _this$props = this.props,
          len = _this$props.len,
          smallImgList = _this$props.smallImgList,
          activeIndex = _this$props.activeIndex,
          imgWidth = _this$props.imgWidth,
          smallImgWidth = _this$props.smallImgWidth,
          imgGap = _this$props.imgGap,
          handleClick = _this$props.handleClick,
          display = _this$props.display,
          left = _this$props.left;
      var smallImgContainerWidth = len * smallImgWidth + imgGap * (len - 1);
      var imgInnerStyle = {
        width: "".concat(smallImgContainerWidth, "px"),
        transform: "translateX(".concat(left, "px)"),
        boxSizing: 'content-box'
      };
      return React.createElement("div", {
        className: "img-index-container",
        style: {
          width: "".concat(imgWidth, "px")
        },
        ref: function ref(e) {
          return _this.dots = e;
        }
      }, len !== 1 && display ? React.createElement("div", {
        className: "smallImg",
        style: imgInnerStyle
      }, smallImgList.map(function (item, index) {
        var currentIndex = index + 1;
        var className = activeIndex === currentIndex ? 'smallImg-item smallImg-on' : 'smallImg-item';
        var styleContainer = {
          width: "".concat(smallImgWidth, "px"),
          height: "".concat(smallImgWidth, "px"),
          background: "url(".concat(item.img, ") no-repeat center"),
          backgroundSize: 'cover'
        };
        return React.createElement("div", {
          className: className,
          style: styleContainer,
          key: currentIndex,
          onClick: function onClick() {
            return handleClick(currentIndex);
          }
        });
      })) : null);
    }
  }]);

  return SmallImgIndex;
}(React.PureComponent);

_defineProperty(SmallImgIndex, "propTypes", {
  type: PropTypes.string,
  len: PropTypes.number,
  imgList: PropTypes.array,
  activeIndex: PropTypes.number,
  smallImgWidth: PropTypes.number,
  smallImgHeight: PropTypes.number,
  handleClick: PropTypes.func,
  hover: PropTypes.bool,
  imgGap: PropTypes.number
});

_defineProperty(SmallImgIndex, "defaultProps", {
  imgList: [],
  activeIndex: 1,
  smallImgWidth: 64,
  smallImgHeight: 64,
  imgGap: 8,
  handleClick: function handleClick(rs) {
    return console.log(rs);
  },
  hover: false
});

export default SmallImgIndex;