"use strict";

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

var _tslib = require("tslib");

var _consoleComponents = require("@alicloud/console-components");

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

var _balloon = _interopRequireDefault(require("../balloon"));

var _balloonIcon = _interopRequireDefault(require("../balloon/balloonIcon"));

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

var FormItem = _consoleComponents.Form.Item;
;

var Filter =
/** @class */
function (_super) {
  (0, _tslib.__extends)(Filter, _super);

  function Filter(props) {
    var _this = _super.call(this, props) || this;

    _this.toggleExpanded = function () {
      var expanded = !_this.state.expanded;

      if (typeof _this.props.onExpand === 'function') {
        _this.props.onExpand(expanded);
      }

      _this.setState({
        expanded: expanded
      });
    };

    _this.proxyOnChange = function (v, reset, onChange, other) {
      if (v !== false && !v && reset) {
        reset();
      }

      if (onChange) {
        onChange(v, other);
      }
    };

    _this.returnIcons = function (icons) {
      return icons.map(function (ic, index) {
        if (ic.custom) {
          return ic.custom;
        } else {
          var image = ic.image,
              onClick = ic.onClick,
              type = ic.type,
              color = ic.color,
              size = ic.size,
              rest = (0, _tslib.__rest)(ic, ["image", "onClick", "type", "color", "size"]);
          return /*#__PURE__*/_react["default"].createElement("div", {
            className: "iconBox",
            key: 'lp-filter-icons' + index,
            onClick: onClick
          }, image ? /*#__PURE__*/_react["default"].createElement(_balloon["default"], (0, _tslib.__assign)({
            trigger: image,
            offset: [15, 0]
          }, rest)) : /*#__PURE__*/_react["default"].createElement(_balloonIcon["default"], (0, _tslib.__assign)({
            iconType: type ? type : 'attachment',
            iconColor: color ? color : '#c1c1c1',
            iconSize: size ? size : 'small',
            offset: [15, 0]
          }, rest)));
        }
      });
    };

    _this.field = new _consoleComponents.Field(_this);
    _this.state = {
      expanded: _this.props.expandByDefault || false
    };
    return _this;
  }

  Filter.prototype.renderForm = function (formSource, expanded) {
    var _this = this;

    return formSource && formSource.map(function (item, index) {
      var label = item.label;
      var RenderComponent;
      var props = {};
      var style = {};

      if (item.type == 'button' && index === 0) {
        //如果第一个是按钮把一个格按钮变成蓝色作为主按钮
        props = (0, _tslib.__assign)((0, _tslib.__assign)({}, item.props), {
          type: 'primary'
        });
      } else {
        props = (0, _tslib.__assign)({}, item.props);
      }

      if (expanded) {
        var fieldOptions = _this.field.init(item.name, item.options);

        props = (0, _tslib.__assign)((0, _tslib.__assign)({}, props), fieldOptions);
      }

      switch (item.type) {
        case 'button':
          RenderComponent = _consoleComponents.Button;
          props['children'] = label;
          break;

        case 'select':
          RenderComponent = _consoleComponents.Select;
          props['placeholder'] = label;
          props['style'] = props.style ? props.style : {
            width: 160
          };
          var selectChange_1 = props.onChange;
          delete props.onChange;
          ;

          props['onChange'] = function (value, actionType, item) {
            _this.proxyOnChange(value, props.reset, selectChange_1, {
              value: value,
              actionType: actionType,
              item: item
            });
          };

          props['hasClear'] = props.hasClear === false ? false : true;
          break;

        case 'search':
          RenderComponent = _consoleComponents.Search;
          props['style'] = props.style ? props.style : {
            width: 285
          };
          var searchChange_1 = props.onChange;
          delete props.onChange;
          ;

          props['onChange'] = function (v) {
            _this.proxyOnChange(v, props.reset, searchChange_1, undefined);
          };

          props['placeholder'] = label;
          props['hasClear'] = props.hasClear === false ? false : true;
          break;

        case 'input':
          RenderComponent = _consoleComponents.Input;
          var inputId_1 = "filter_id_" + Math.random();
          props['id'] = inputId_1;
          props['style'] = props.style ? props.style : {
            width: 285
          };
          props['placeholder'] = label;
          var inputChange_1 = props.onChange;
          delete props.onChange;
          ;

          props['onChange'] = function (v) {
            _this.proxyOnChange(v, props.reset, inputChange_1, undefined);
          };

          props['hasClear'] = props.hasClear === false ? false : true;
          var onSearch_1 = props.onSearch;
          delete props.onSearch;

          if (!_this.state.expanded) {
            props['innerAfter'] = /*#__PURE__*/_react["default"].createElement(_consoleComponents.Icon, {
              type: "search",
              size: "xs",
              onClick: function onClick() {
                var dom = document.getElementById(inputId_1);
                !props.disabled && onSearch_1 && onSearch_1(dom.getAttribute("value"));
              },
              className: "lp-filter-input-search"
            });
          }

          break;

        case 'custom':
          if (typeof item.template === 'function') {
            RenderComponent = item.template;
          } else {
            return /*#__PURE__*/_react["default"].createElement(FormItem, {
              key: item.label + item.name,
              style: style
            }, item.template);
          }

          break;

        default:
          RenderComponent = null;
      }

      if (RenderComponent) {
        return /*#__PURE__*/_react["default"].createElement(FormItem, {
          key: item.label,
          style: style
        }, /*#__PURE__*/_react["default"].createElement(RenderComponent, (0, _tslib.__assign)({}, props)));
      } else {
        return null;
      }
    });
  };

  Filter.prototype.renderExpandBtn = function (expanded) {
    return /*#__PURE__*/_react["default"].createElement(_consoleComponents.Button, {
      text: true,
      onClick: this.toggleExpanded
    }, expanded ? '普通查询' : '高级查询');
  };

  Filter.prototype.renderBtns = function () {
    var _this = this;

    return /*#__PURE__*/_react["default"].createElement("div", {
      className: "lp-filter-form-btn"
    }, /*#__PURE__*/_react["default"].createElement(_consoleComponents.Button, {
      type: "primary",
      onClick: function onClick() {
        _this.props.onFilter && _this.props.onFilter(_this.field.getValues());
      }
    }, this.props.filterText), /*#__PURE__*/_react["default"].createElement(_consoleComponents.Button, {
      type: "normal",
      onClick: function onClick() {
        _this.field.reset();

        _this.props.onReset && _this.props.onReset();
      }
    }, this.props.resetText));
  };

  Filter.prototype.render = function () {
    var _a = this.props,
        source = _a.source,
        extraSource = _a.extraSource,
        Icons = _a.Icons;
    var expanded = this.state.expanded;
    var hadExtends = extraSource && extraSource.length > 0;
    var haveIcons = Icons && Icons.length > 0;
    return /*#__PURE__*/_react["default"].createElement("div", {
      className: "lp-filter-form"
    }, /*#__PURE__*/_react["default"].createElement(_consoleComponents.Form, {
      inline: true,
      field: this.field
    }, this.renderForm(source, expanded), expanded ? this.renderForm(extraSource, expanded) : null, hadExtends && expanded ? this.renderBtns() : null), /*#__PURE__*/_react["default"].createElement("div", {
      className: "right"
    }, hadExtends ? this.renderExpandBtn(expanded) : null, haveIcons ? this.returnIcons(Icons) : null));
  };

  return Filter;
}(_react["default"].Component);

var _default = Filter;
exports["default"] = _default;
Filter.defaultProps = {
  expandByDefault: false,
  filterText: '查询',
  resetText: '重置'
};