'use strict';

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

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _desc, _value, _class; /**
                            * Created by baoyinghai on 11/28/16.
                            */


var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactRouter = require('react-router');

var _coreDecorators = require('core-decorators');

var _routes = require('../../../entrance/routes');

var _mxa = require('../../../../components/mxa');

var _components = require('../../../../components');

var _sideMenuBarContainer = require('./sideMenuBarContainer');

var _sideMenuBarContainer2 = _interopRequireDefault(_sideMenuBarContainer);

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; }

function _applyDecoratedDescriptor(target, property, decorators, descriptor, context) {
  var desc = {};
  Object['ke' + 'ys'](descriptor).forEach(function (key) {
    desc[key] = descriptor[key];
  });
  desc.enumerable = !!desc.enumerable;
  desc.configurable = !!desc.configurable;

  if ('value' in desc || desc.initializer) {
    desc.writable = true;
  }

  desc = decorators.slice().reverse().reduce(function (desc, decorator) {
    return decorator(target, property, desc) || desc;
  }, desc);

  if (context && desc.initializer !== void 0) {
    desc.value = desc.initializer ? desc.initializer.call(context) : void 0;
    desc.initializer = undefined;
  }

  if (desc.initializer === void 0) {
    Object['define' + 'Property'](target, property, desc);
    desc = null;
  }

  return desc;
}

var SideMenu = (_class = function (_React$Component) {
  _inherits(SideMenu, _React$Component);

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

    var _this = _possibleConstructorReturn(this, (SideMenu.__proto__ || Object.getPrototypeOf(SideMenu)).call(this, props));

    _this._isSelected = function (item) {
      if (_this.state.selectedItem.menuCode === item.menuCode) {
        return 'active';
      }
      return '';
    };

    _this._switchAccordion = function (e) {
      var parentDiv = e.currentTarget.parentNode;
      if (parentDiv) {
        var ulEle = parentDiv.childNodes[1];
        var iEle = e.currentTarget.childNodes[0];
        if (ulEle && iEle) {
          if (ulEle.style.display === 'none') {
            ulEle.style.display = '';
            iEle.className = 'selected';
          } else {
            ulEle.style.display = 'none';
            iEle.className = '';
          }
        }
      }
    };

    _this._getStyleOfSecond = function (item) {
      if (item.subMenus) {
        if (item.subMenus.some(function (menu) {
          return menu.menuCode === _this.menuCode;
        })) {
          return { iClassName: 'selected', displayAttr: '' };
        }
      }
      return { iClassName: '', displayAttr: 'none' };
    };

    _this._getStyleOfFirst = function () /* item */{
      return { iClassName: 'selected', displayAttr: 'block' };
    };

    _this._renderMenuItem = function (item, level) {
      // 到三级为止
      if (!item.subMenus || level === 2) {
        if (level === 0) {
          return _react2.default.createElement(
            'div',
            { className: 'first-menu-item' },
            _this._renderTooltipItem(item)
          );
        }
        return _react2.default.createElement(
          'div',
          null,
          _this._renderTooltipItem(item)
        );
      }

      var _this$classArray$leve = _this.classArray[level].getStyleFunc(item),
          iClassName = _this$classArray$leve.iClassName,
          displayAttr = _this$classArray$leve.displayAttr;

      return _react2.default.createElement(
        'div',
        { className: _this.classArray[level].wrapper },
        _react2.default.createElement(
          'a',
          { className: _this.classArray[level].accordion, onClick: _this._switchAccordion },
          _react2.default.createElement('i', { className: iClassName }),
          _react2.default.createElement(
            'span',
            null,
            item.menuValue
          )
        ),
        _react2.default.createElement(
          'ul',
          { style: { display: displayAttr } },
          item.subMenus.map(function (subItem) {
            return _react2.default.createElement(
              'li',
              null,
              _this._renderMenuItem(subItem, level + 1)
            );
          })
        )
      );
    };

    _this._renderMenu = function (menu, level) {
      return menu && menu.map(function (item) {
        return _this._renderMenuItem(item, level);
      });
    };

    _this.state = {
      selectedItem: _this.props.selectedItem,
      unSelected: []
    };
    _this.menuCode = _this.props.selectedItem;
    _this.classArray = [{
      wrapper: 'first',
      accordion: 'accordion-first-item',
      getStyleFunc: _this._getStyleOfFirst
    }, {
      wrapper: 'second',
      accordion: '',
      getStyleFunc: _this._getStyleOfSecond
    }];
    return _this;
  }

  _createClass(SideMenu, [{
    key: '_menuClick',
    value: function _menuClick(subItem) {
      var _this2 = this;

      this.setState({
        selectedItem: subItem
      }, function () {
        return _this2.props.menuClick(subItem);
      });
    }
  }, {
    key: '_renderTooltipItem',
    value: function _renderTooltipItem(subItem) {
      var _this3 = this;

      var _props = this.props,
          menuTaskCount = _props.menuTaskCount,
          infoCompleteness = _props.infoCompleteness;

      if (subItem.menuValue.length > 6) {
        return _react2.default.createElement(
          _mxa.Tooltip,
          { title: subItem.menuValue, placement: 'right' },
          _react2.default.createElement(
            'a',
            { className: 'accordion-first-item ' + this._isSelected(subItem), onClick: function onClick() {
                return _this3._menuClick(subItem);
              } },
            _react2.default.createElement(
              'span',
              null,
              subItem.menuValue.substr(0, 5) + '...'
            )
          )
        );
      }
      return _react2.default.createElement(
        'div',
        { className: 'accordion-first-item ' + this._isSelected(subItem), onClick: function onClick() {
            return _this3._menuClick(subItem);
          } },
        _react2.default.createElement(
          'a',
          null,
          _react2.default.createElement(
            'span',
            null,
            subItem.menuValue
          )
        ),
        this.renderMenuTaskCount(subItem, menuTaskCount),
        infoCompleteness && (infoCompleteness[subItem.menuCode] || infoCompleteness[subItem.menuCode] === 0) ? this.renderInfoCompleteness(infoCompleteness[subItem.menuCode]) : null
      );
    }

    // TODO: 先隐藏了未读条数，后期迭代加上
    // {this.renderMenuTaskCount(subItem, menuTaskCount)}

  }, {
    key: 'renderMenuTaskCount',
    value: function renderMenuTaskCount(subItem, menuTaskCount) {
      if (menuTaskCount && menuTaskCount[subItem.menuCode]) {
        var width = 16;
        if (menuTaskCount) {
          if (menuTaskCount[subItem.menuCode] > 99) {
            width = 28;
          } else if (menuTaskCount[subItem.menuCode] > 9) {
            width = 20;
          }
        }
        var itemNumStyle = { width: width };
        if (menuTaskCount[subItem.menuCode] > 0) {
          return _react2.default.createElement(
            'div',
            { className: 'item-num', style: itemNumStyle },
            menuTaskCount[subItem.menuCode]
          );
        }
      }
      return null;
    }
  }, {
    key: 'renderInfoCompleteness',
    value: function renderInfoCompleteness(num) {
      var preStyle = {
        color: num >= 9990 ? '#26BF8C' : '#fa7252'
      };

      var progressPre = {
        width: parseInt(num / 100, 10) + '%'
      };
      if (num >= 9990) {
        progressPre.background = '#85c440';
        progressPre.borderColor = '#78b337 #6ba031 #568128';
        progressPre.backgroundImage = 'linear-gradient(to bottom, #b7dc8e 0%, #99ce5f 70%, #85c440 100%)';
      }

      // return (
      //   <div>
      //     <div className="info-completeness-num">
      //       <span style={preStyle}>{parseInt(num / 100, 10)}</span><span>%</span>
      //     </div>
      //     <div className="info-completeness-progress">
      //       <ProgressBar pre={parseInt(num / 100, 10)} />
      //     </div>
      //   </div>
      // );

      return _react2.default.createElement(
        'div',
        null,
        _react2.default.createElement(
          'div',
          { className: 'info-completeness-num' },
          _react2.default.createElement(
            'span',
            { style: preStyle },
            parseInt(num / 100, 10)
          ),
          _react2.default.createElement(
            'span',
            null,
            '%'
          )
        )
      );
    }
  }, {
    key: 'render',
    value: function render() {
      var appendStyle = { maxHeight: window.innerHeight + 'px' };
      return _react2.default.createElement(
        'div',
        { className: 'info-side-bar', style: appendStyle },
        _react2.default.createElement(
          'ul',
          null,
          this._renderMenu(this.props.menu, 0)
        )
      );
    }
  }]);

  return SideMenu;
}(_react2.default.Component), (_applyDecoratedDescriptor(_class.prototype, '_menuClick', [_coreDecorators.autobind], Object.getOwnPropertyDescriptor(_class.prototype, '_menuClick'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, '_renderTooltipItem', [_coreDecorators.autobind], Object.getOwnPropertyDescriptor(_class.prototype, '_renderTooltipItem'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'renderMenuTaskCount', [_coreDecorators.autobind], Object.getOwnPropertyDescriptor(_class.prototype, 'renderMenuTaskCount'), _class.prototype), _applyDecoratedDescriptor(_class.prototype, 'renderInfoCompleteness', [_coreDecorators.autobind], Object.getOwnPropertyDescriptor(_class.prototype, 'renderInfoCompleteness'), _class.prototype)), _class);
exports.default = SideMenu;
var SideMenuContainer = exports.SideMenuContainer = _sideMenuBarContainer2.default;