"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _typeof = require("@babel/runtime/helpers/typeof");

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

require("maycur-antd/lib/modal/style/css");

var _modal = _interopRequireDefault(require("maycur-antd/lib/modal"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

require("maycur-antd/lib/list/style/css");

var _list = _interopRequireDefault(require("maycur-antd/lib/list"));

require("maycur-antd/lib/alert/style/css");

var _alert = _interopRequireDefault(require("maycur-antd/lib/alert"));

require("maycur-antd/lib/message/style/css");

var _message2 = _interopRequireDefault(require("maycur-antd/lib/message"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

require("maycur-antd/lib/input/style/css");

var _input = _interopRequireDefault(require("maycur-antd/lib/input"));

var _react = _interopRequireWildcard(require("react"));

var _reactDom = _interopRequireDefault(require("react-dom"));

var _lodash = _interopRequireDefault(require("lodash"));

var _utils = _interopRequireDefault(require("../utils/utils"));

var _constants = _interopRequireDefault(require("../utils/constants"));

var _ExpenseTypeList = _interopRequireDefault(require("./ExpenseTypeList"));

var _mkTranslate = _interopRequireDefault(require("../utils/mkTranslate"));

var _reactI18next = require("react-i18next");

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

var EXPENSE_TYPE_PICKER = _constants.default.EXPENSE_TYPE_PICKER;
var Search = _input.default.Search;

var ExpenseTypeSelectionModal = /*#__PURE__*/function (_Component) {
  (0, _inherits2.default)(ExpenseTypeSelectionModal, _Component);

  var _super = _createSuper(ExpenseTypeSelectionModal);

  function ExpenseTypeSelectionModal(props) {
    var _this;

    (0, _classCallCheck2.default)(this, ExpenseTypeSelectionModal);
    _this = _super.call(this, props);

    _this.localeProcess = function () {
      _mkTranslate.default.getNameSpace('MK_ExpenseTypeSelectionModal').then(function (t) {
        _this.setState({
          t: t
        });
      });
    };

    _this.state = {
      sourceList: [],
      searchList: [],
      selectList: props.selectList || [],
      allSelected: false,
      searchKeyword: null,
      t: _mkTranslate.default.noop()
    };
    _this.onSearch = _this.onSearch.bind((0, _assertThisInitialized2.default)(_this));
    _this.clearSearch = _this.clearSearch.bind((0, _assertThisInitialized2.default)(_this));
    _this.closeSelf = _this.closeSelf.bind((0, _assertThisInitialized2.default)(_this));
    _this.unSelectItem = _this.unSelectItem.bind((0, _assertThisInitialized2.default)(_this));
    _this.clearAll = _this.clearAll.bind((0, _assertThisInitialized2.default)(_this));
    _this.onOutput = _this.onOutput.bind((0, _assertThisInitialized2.default)(_this));
    _this.fetchSourceList = _this.fetchSourceList.bind((0, _assertThisInitialized2.default)(_this));
    _this.fetchSearchList = _this.fetchSearchList.bind((0, _assertThisInitialized2.default)(_this));
    _this.onOk = _this.onOk.bind((0, _assertThisInitialized2.default)(_this));
    _this.preCheck = _this.preCheck.bind((0, _assertThisInitialized2.default)(_this));
    _this.scrollBottom = _this.scrollBottom.bind((0, _assertThisInitialized2.default)(_this));

    _this.localeProcess();

    return _this;
  }

  (0, _createClass2.default)(ExpenseTypeSelectionModal, [{
    key: "onSearch",
    value: function onSearch(value) {
      value = _lodash.default.trim(value);
      this.setState({
        searchKeyword: value
      });

      if (value) {
        this.fetchSearchList(value);
      } else {
        this.setState({
          searchList: []
        });
      }
    }
  }, {
    key: "clearSearch",
    value: function clearSearch() {
      if (this.searchRef) {
        var dom = _reactDom.default.findDOMNode(this.searchRef);

        var input = dom.getElementsByTagName('input')[0];
        input.value = '';
      }

      this.setState({
        searchKeyword: null,
        searchList: []
      });
    }
  }, {
    key: "unSelectItem",
    value: function unSelectItem(item) {
      var selectList = _lodash.default.clone(this.state.selectList);

      var idx = _lodash.default.findIndex(selectList, {
        expenseTypeCode: item.expenseTypeCode
      });

      if (idx !== -1) {
        selectList.splice(idx, 1);
      }

      this.setState({
        selectList: selectList
      });
    }
  }, {
    key: "clearAll",
    value: function clearAll() {
      this.setState({
        selectList: []
      });
    }
  }, {
    key: "closeSelf",
    value: function closeSelf() {
      var onCancel = this.props.onCancel;

      if (typeof onCancel === 'function') {
        onCancel();
      }
    }
  }, {
    key: "preCheck",
    value: function preCheck(selectList) {
      var maxSelectLength = this.props.maxSelectLength;
      var t = this.state.t;
      var valid = true;

      if (maxSelectLength > 0 && selectList.length > maxSelectLength) {
        _message2.default.warning(t('warningText', {
          n: maxSelectLength
        }));

        valid = false;
      }

      return valid;
    }
  }, {
    key: "onOutput",
    value: function onOutput(selectList) {
      this.setState({
        selectList: selectList
      });
      setTimeout(this.scrollBottom);
    }
  }, {
    key: "onOk",
    value: function onOk() {
      var selectList = this.state.selectList;
      var promise = this.props.promise;

      if (promise && typeof promise.resolve === 'function') {
        promise.resolve(selectList);
      }
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      this.fetchSourceList();
    }
  }, {
    key: "fetchSourceList",
    value: function fetchSourceList() {
      var _this2 = this;

      this.props.fetchExpenseTypes({
        pageId: EXPENSE_TYPE_PICKER.SOURCE_LIST
      }).then(function (data) {
        if (_utils.default.apiOK(data)) {
          var sourceList = data.data;
          var scope = _this2.props.scope;

          _lodash.default.forEach(sourceList, function (group) {
            group.data = _lodash.default.filter(group.data, function (item) {
              var retained = true;

              switch (scope) {
                case EXPENSE_TYPE_PICKER.SCOPE_ENABLED:
                  retained = item.enabled;
                  break;

                case EXPENSE_TYPE_PICKER.SCOPE_DISABLED:
                  retained = !item.enabled;
                  break;

                default:
                  break;
              }

              return retained;
            });
          });

          sourceList = _lodash.default.filter(sourceList, function (group) {
            return group.data && group.data.length;
          });

          _this2.setState({
            sourceList: sourceList
          });
        }
      });
    }
  }, {
    key: "fetchSearchList",
    value: function fetchSearchList(keyword) {
      var _this3 = this;

      this.props.searchExpenseTypes({
        expenseTypeName: keyword
      }, {
        pageId: EXPENSE_TYPE_PICKER.SEARCH_LIST
      }).then(function (data) {
        if (_utils.default.apiOK(data)) {
          var searchList = data.data;
          var scope = _this3.props.scope;

          _lodash.default.forEach(searchList, function (group) {
            group.data = _lodash.default.filter(group.data, function (item) {
              var retained = true;

              switch (scope) {
                case EXPENSE_TYPE_PICKER.SCOPE_ENABLED:
                  retained = item.enabled;
                  break;

                case EXPENSE_TYPE_PICKER.SCOPE_DISABLED:
                  retained = !item.enabled;
                  break;

                default:
                  break;
              }

              return retained;
            });
          });

          searchList = _lodash.default.filter(searchList, function (group) {
            return group.data && group.data.length;
          });

          _this3.setState({
            searchList: searchList
          });
        }
      });
    }
  }, {
    key: "scrollBottom",
    value: function scrollBottom() {
      if (this.selectListRef) {
        var dom = _reactDom.default.findDOMNode(this.selectListRef);

        dom.scrollTop = dom.scrollHeight;
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this4 = this;

      var _this$state = this.state,
          sourceList = _this$state.sourceList,
          searchList = _this$state.searchList,
          selectList = _this$state.selectList,
          searchKeyword = _this$state.searchKeyword,
          t = _this$state.t;
      var _this$props = this.props,
          maxSelectLength = _this$props.maxSelectLength,
          sourceListLoading = _this$props.sourceListLoading,
          searchListLoading = _this$props.searchListLoading,
          disabledValues = _this$props.disabledValues;
      return /*#__PURE__*/_react.default.createElement(_modal.default, (0, _extends2.default)({
        title: t('selectExpenseType')
      }, this.props, {
        onOk: this.onOk,
        destroyOnClose: true,
        maskClosable: false,
        keyboard: false,
        className: 'expense-type-select',
        visible: true,
        cancelButtonProps: {
          type: 'info',
          size: 'large'
        }
      }), /*#__PURE__*/_react.default.createElement("div", {
        className: 'content'
      }, /*#__PURE__*/_react.default.createElement("div", {
        className: 'left'
      }, /*#__PURE__*/_react.default.createElement("div", {
        className: 'search-box'
      }, /*#__PURE__*/_react.default.createElement(Search, {
        placeholder: t('placeholder'),
        ref: function ref(_ref) {
          _this4.searchRef = _ref;
        },
        onSearch: this.onSearch
      }), searchKeyword ? /*#__PURE__*/_react.default.createElement("span", {
        className: 'fm fm-cross',
        onClick: this.clearSearch
      }) : null), searchKeyword ? /*#__PURE__*/_react.default.createElement("div", {
        className: 'search-list'
      }, /*#__PURE__*/_react.default.createElement(_ExpenseTypeList.default, {
        loading: searchListLoading,
        onPreCheck: this.preCheck,
        disabledValues: disabledValues,
        sourceList: searchList,
        selectList: selectList,
        onOutput: this.onOutput
      })) : /*#__PURE__*/_react.default.createElement("div", {
        className: 'source-list'
      }, /*#__PURE__*/_react.default.createElement(_ExpenseTypeList.default, {
        loading: sourceListLoading,
        onPreCheck: this.preCheck,
        disabledValues: disabledValues,
        sourceList: sourceList,
        selectList: selectList,
        onOutput: this.onOutput
      }))), /*#__PURE__*/_react.default.createElement("div", {
        className: 'right'
      }, /*#__PURE__*/_react.default.createElement("div", {
        className: 'status-bar'
      }, /*#__PURE__*/_react.default.createElement(_reactI18next.Trans, {
        i18nKey: "MK_ExpenseTypeSelectionModal:Selected",
        count: selectList.length
      }, /*#__PURE__*/_react.default.createElement("span", {
        className: 'bar-label'
      }, "\u5DF2\u9009\uFF1A"), /*#__PURE__*/_react.default.createElement("span", {
        className: 'dep-count'
      }, "\u8D39\u7528\u7C7B\u578B ", /*#__PURE__*/_react.default.createElement("span", {
        className: 'strong'
      }, selectList.length))), /*#__PURE__*/_react.default.createElement("span", {
        className: 'clear-all'
      }, /*#__PURE__*/_react.default.createElement("span", {
        className: 'btn',
        onClick: this.clearAll
      }, t('Clear')))), maxSelectLength > 0 ? /*#__PURE__*/_react.default.createElement(_alert.default, {
        message: /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_reactI18next.Trans, {
          i18nKey: "MK_ExpenseTypeSelectionModal:maxLength",
          maxSelectLength: maxSelectLength
        }, "\u6700\u591A\u53EA\u80FD\u9009\u62E9", /*#__PURE__*/_react.default.createElement("span", {
          className: 'strong'
        }, {
          maxSelectLength: maxSelectLength
        }), "\u9879")),
        type: "warning"
      }) : null, /*#__PURE__*/_react.default.createElement(_list.default, {
        size: "small",
        dataSource: selectList,
        ref: function ref(_ref2) {
          _this4.selectListRef = _ref2;
        },
        renderItem: function renderItem(item) {
          return /*#__PURE__*/_react.default.createElement(_list.default.Item, {
            className: !item.enabled && typeof item.enabled === 'boolean' ? ' disabled' : '',
            key: item.expenseTypeCode
          }, /*#__PURE__*/_react.default.createElement("span", {
            className: 'item-name'
          }, /*#__PURE__*/_react.default.createElement("span", {
            className: 'fm fm-feetype-' + (item.iconCode || 'empty')
          }), /*#__PURE__*/_react.default.createElement("span", null, item.expenseTypeName)), /*#__PURE__*/_react.default.createElement("span", {
            className: 'fm fm-trash',
            onClick: function onClick(e) {
              e.stopPropagation();

              _this4.unSelectItem(item);
            }
          }));
        }
      }))));
    }
  }]);
  return ExpenseTypeSelectionModal;
}(_react.Component); // function stateMapProp({ app }) {
//     return {
//         sourceListLoading: app.loading[EXPENSE_TYPE_PICKER.SOURCE_LIST],
//         searchListLoading: app.loading[EXPENSE_TYPE_PICKER.SEARCH_LIST]
//     };
// }


var _default = ExpenseTypeSelectionModal;
exports.default = _default;