'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);

var _Tabbar = require('./../Tabbar');

var _Tabbar2 = _interopRequireDefault(_Tabbar);

var _Dialog = require('./../Dialog');

var _Dialog2 = _interopRequireDefault(_Dialog);

var _MenuTiled = require('./../MenuTiled');

var _MenuTiled2 = _interopRequireDefault(_MenuTiled);

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 Dropdown = (_temp = _class = function (_Component) {
  _inherits(Dropdown, _Component);

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

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

    _this.componentDidUpdate = function (prevProps) {
      if (JSON.stringify(prevProps.list) !== JSON.stringify(_this.props.list)) {
        _this.refresh();
      }
    };

    _this.componentDidMount = function () {
      // 计算距离头部
      var top = _this.props.top;
      if (!top) {
        top = _this.$tabbar.$el.offsetTop + 40;
      }
      _this.setState({
        top: top
      });
      // 更新数据
      _this.refresh();
    };

    _this.refresh = function () {
      // tabbar 和 MenuTiled
      var tabbar = [];
      for (var _iterator = _this.props.list, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
        var _ref;

        if (_isArray) {
          if (_i >= _iterator.length) break;
          _ref = _iterator[_i++];
        } else {
          _i = _iterator.next();
          if (_i.done) break;
          _ref = _i.value;
        }

        var item = _ref;

        tabbar.push({
          id: item.id,
          name: item.name,
          ricon: _react2.default.createElement('span', { className: 'icon tab-icon shape-triangle-down' })
        });
      };
      _this.setState({
        tabbar: tabbar
      });
    };

    _this.onClickTab = function (e, item, index) {
      if (_this.state.tabbarActiveIndex >= 0) {
        _this.setState({
          // 设置弹框的数据
          menusSelectedId: _this.state.tabbar[index].id,
          menus: _this.props.list[index].data,
          // 隐藏弹框
          tabbarActiveIndex: -1,
          dialogShow: false
        });
      } else {
        _this.setState({
          // 设置弹框的数据
          menusSelectedId: _this.state.tabbar[index].id,
          menus: _this.props.list[index].data,
          // 显示弹框
          tabbarActiveIndex: index,
          dialogShow: true
        });
      }
    };

    _this.onClickMask = function () {
      _this.setState({
        tabbarActiveIndex: -1,
        dialogShow: false
      });
    };

    _this.onClickMenu = function (e, item) {
      if (item.children && item.children.length > 0) return;
      var tabbar = _this.state.tabbar;
      var activeIndex = _this.state.tabbarActiveIndex;
      // 如果选中的标题是全部,则显示原始标题,例如:点击分类,选择全部,则应当显示分类
      if (item.id === _this.props.list[activeIndex].id) {
        tabbar[activeIndex].id = _this.props.list[activeIndex].id;
        tabbar[activeIndex].name = _this.props.list[activeIndex].name;
        // 设置选中的标题显示在tabbar上
      } else {
        tabbar[activeIndex].id = item.id;
        tabbar[activeIndex].name = item.name;
      }
      _this.setState({
        tabbar: tabbar,
        tabbarActiveIndex: -1,
        dialogShow: false
      });
      // 触发onChange事件
      if (_this.props.onChange) _this.props.onChange(e, tabbar);
    };

    _this.state = {
      tabbarActiveIndex: -1,
      tabbar: [],
      menusSelectedId: '',
      menus: [],
      top: 0,
      dialogShow: false
    };
    return _this;
  }

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

    var _props = this.props,
        portal = _props.portal,
        disabled = _props.disabled,
        _props$tabbarProps = _props.tabbarProps,
        tabbarProps = _props$tabbarProps === undefined ? {} : _props$tabbarProps,
        _props$dialogProps = _props.dialogProps,
        dialogProps = _props$dialogProps === undefined ? {} : _props$dialogProps,
        _props$menutiledProps = _props.menutiledProps,
        menutiledProps = _props$menutiledProps === undefined ? {} : _props$menutiledProps;

    var DOM = [_react2.default.createElement(_Tabbar2.default, _extends({
      key: 'tabbar',
      disabled: disabled,
      ref: function ref(el) {
        _this2.$tabbar = el;
      },
      exceptOnClickActive: false,
      list: this.state.tabbar,
      onClick: this.onClickTab,
      activeIndex: this.state.tabbarActiveIndex,
      className: 'tabbar-dropdown tabbar-tiled border-b'
    }, tabbarProps))];
    DOM.push(_react2.default.createElement(
      _Dialog2.default,
      _extends({
        key: 'dialog',
        portal: portal,
        maskAttribute: { onClick: this.onClickMask, style: { top: this.state.top + 'px' } },
        animation: 'slideDown',
        style: { width: '100%' },
        show: this.state.dialogShow
      }, dialogProps),
      _react2.default.createElement(_MenuTiled2.default, _extends({
        list: this.state.menus,
        selectedId: this.state.menusSelectedId,
        onClick: this.onClickMenu
      }, menutiledProps))
    ));
    return DOM;
  };

  return Dropdown;
}(_react.Component), _class.defaultProps = {
  list: []
}, _temp);
exports.default = Dropdown;
Dropdown.propTypes = process.env.NODE_ENV !== "production" ? {
  portal: _propTypes2.default.object, // 传送到DOM
  top: _propTypes2.default.number,
  disabled: _propTypes2.default.bool,
  onChange: _propTypes2.default.func,
  list: _propTypes2.default.array, // [{name: '分类', data: [{id: '1',name: '测试数据1',children:[]}]}]
  tabbarProps: _propTypes2.default.object,
  dialogProps: _propTypes2.default.object,
  menutiledProps: _propTypes2.default.object
} : {};
module.exports = exports['default'];