'use strict';

exports.__esModule = true;
exports.default = undefined;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _class, _temp;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Tabbar = (_temp = _class = function (_Component) {
  _inherits(Tabbar, _Component);

  function Tabbar(props) {
    _classCallCheck(this, Tabbar);

    var _this = _possibleConstructorReturn(this, _Component.call(this, props));

    _this.onClick = function (e) {
      var target = e.target;
      if (_this.props.exceptOnClickActive && target.classList.contains('active')) return;
      var index = target.getAttribute('data-index');
      if (!index) return;
      if (_this.props.onClick) {
        _this.props.onClick(e, _this.props.list[index], Number(index));
        e.stopPropagation();
      }
    };

    _this.getTabbarStyle = function () {
      var _this$props = _this.props,
          list = _this$props.list,
          className = _this$props.className,
          style = _this$props.style;

      var tabbarStyle = {};
      // 矩形tabbar应当有的总宽度
      if (className.hasClass('tabbar-rect')) {
        switch (list.length) {
          case 1:
            tabbarStyle = { width: '30%' };
            break;
          case 2:
            tabbarStyle = { width: '50%' };
            break;
          case 3:
            tabbarStyle = { width: '50%' };
            break;
          default:
            tabbarStyle = {};
        }
      }
      return Object.assign({}, tabbarStyle, style);
    };

    _this.getTabbarClassName = function () {
      var _this$props2 = _this.props,
          className = _this$props2.className,
          tiled = _this$props2.tiled;

      return 'tabbar animated' + (className ? ' ' + className : ' tabbar-line-width60') + (tiled ? ' tabbar-tiled' : '');
    };

    _this.getIconDOM = function (icon, iconActive, isActive) {
      if (isActive) {
        return iconActive ? iconActive : icon;
      }
      return icon;
    };

    _this.getTabsDOM = function () {
      var _this$props3 = _this.props,
          list = _this$props3.list,
          activeIndex = _this$props3.activeIndex,
          _this$props3$contentA = _this$props3.contentAttribute,
          contentAttribute = _this$props3$contentA === undefined ? {} : _this$props3$contentA,
          _this$props3$captionA = _this$props3.captionAttribute,
          captionAttribute = _this$props3$captionA === undefined ? {} : _this$props3$captionA,
          _this$props3$sndcapti = _this$props3.sndcaptionAttribute,
          sndcaptionAttribute = _this$props3$sndcapti === undefined ? {} : _this$props3$sndcapti;
      // tabStyle高度

      var tabStyle = {};
      if (_this.props.style && _this.props.style.height) {
        tabStyle = {
          height: _this.props.style.height
        };
      }
      // 遍历
      return list.map(function (item, index) {
        var icon = item.icon,
            iconActive = item.iconActive,
            ricon = item.ricon,
            riconActive = item.riconActive,
            name = item.name,
            caption = item.caption,
            sndcaption = item.sndcaption,
            active = item.active,
            _item$attribute = item.attribute,
            attribute = _item$attribute === undefined ? {} : _item$attribute,
            _item$style = item.style,
            style = _item$style === undefined ? {} : _item$style;

        var isActive = active || activeIndex === index;
        var liconDOM = null;
        if (icon) {
          liconDOM = _this.getIconDOM(icon, iconActive, isActive);
        }
        var riconDOM = null;
        if (ricon) {
          riconDOM = _this.getIconDOM(ricon, riconActive, isActive);
        }
        return _react2.default.createElement(
          'li',
          _extends({ className: 'tab' + (isActive ? ' active' : ''), style: Object.assign(tabStyle, style || {}), 'data-index': index, key: index }, attribute),
          liconDOM && liconDOM,
          _react2.default.createElement(
            'div',
            _extends({ className: 'tab-content' }, contentAttribute),
            _react2.default.createElement(
              'div',
              _extends({}, captionAttribute, { className: 'tab-caption' + (captionAttribute.className ? ' ' + captionAttribute.className : '') }),
              caption || name
            ),
            sndcaption && _react2.default.createElement(
              'div',
              _extends({}, sndcaptionAttribute, { className: 'tab-sndcaption' + (sndcaptionAttribute.className ? ' ' + sndcaptionAttribute.className : '') }),
              sndcaption
            )
          ),
          riconDOM && riconDOM
        );
      });
    };

    _this.state = {};
    return _this;
  }

  Tabbar.prototype.render = function render() {
    var _this2 = this;

    var disabled = this.props.disabled;
    // 获取tabbar样式

    var tabbarStyle = this.getTabbarStyle();
    // 获取tabbar的ClassName
    var tabbarClassName = this.getTabbarClassName();
    // 获取tabs的DOM
    var tabsDOM = this.getTabsDOM();

    return _react2.default.createElement(
      'ul',
      { ref: function ref(el) {
          _this2.$el = el;
        }, className: tabbarClassName, disabled: disabled, style: tabbarStyle, onClick: this.onClick },
      tabsDOM
    );
  };

  return Tabbar;
}(_react.Component), _class.defaultProps = {
  list: [],
  // [
  //   {
  //     icon: node,
  //     iconActive: node,
  //     ricon: node,
  //     riconActive: node,

  //     name: string, // 与caption完全相同, 允许传入name或者caption
  //     caption: string,
  //     sndcaption: string,
  //     active: bool,

  //     attribute: object // tab属性
  //   }
  // ]
  exceptOnClickActive: true,
  className: 'tabbar-line tabbar-line-width70 border-b',
  activeIndex: 0
}, _temp);
exports.default = Tabbar;
Tabbar.propTypes = process.env.NODE_ENV !== "production" ? {
  style: _propTypes2.default.object,
  className: _propTypes2.default.string, // tabbar-line | tabbar-rect | tabbar-lump | tabbar-dropdown | tabbar-footer

  contentAttribute: _propTypes2.default.object,
  captionAttribute: _propTypes2.default.object,
  sndcaptionAttribute: _propTypes2.default.object,

  list: _propTypes2.default.array,

  tiled: _propTypes2.default.bool, // 宽度等分, 默认宽度弹性伸缩
  disabled: _propTypes2.default.bool,
  exceptOnClickActive: _propTypes2.default.bool, // 排除点击选中的菜单
  onClick: _propTypes2.default.func,
  activeIndex: _propTypes2.default.number
} : {};
module.exports = exports['default'];