"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.HeadCellFilterDropDown = void 0;
var tslib_1 = require("tslib");
var react_1 = tslib_1.__importDefault(require("react"));
var api_1 = require("../../utils/api");
var icons_1 = require("../../components/icons");
var Overlay_1 = tslib_1.__importDefault(require("../../components/Overlay"));
var PopOver_1 = tslib_1.__importDefault(require("../../components/PopOver"));
var react_dom_1 = require("react-dom");
var Checkbox_1 = tslib_1.__importDefault(require("../../components/Checkbox"));
var xor_1 = tslib_1.__importDefault(require("lodash/xor"));
var Select_1 = require("../../components/Select");
var HeadCellFilterDropDown = /** @class */ (function (_super) {
    tslib_1.__extends(HeadCellFilterDropDown, _super);
    function HeadCellFilterDropDown(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            isOpened: false,
            filterOptions: []
        };
        _this.sourceInvalid = false;
        _this.open = _this.open.bind(_this);
        _this.close = _this.close.bind(_this);
        _this.handleClick = _this.handleClick.bind(_this);
        _this.handleCheck = _this.handleCheck.bind(_this);
        return _this;
    }
    HeadCellFilterDropDown.prototype.componentDidMount = function () {
        var filterable = this.props.filterable;
        if (filterable.source) {
            this.fetchOptions();
        }
        else if (filterable.options.length > 0) {
            this.setState({
                filterOptions: this.alterOptions(filterable.options)
            });
        }
    };
    HeadCellFilterDropDown.prototype.componentWillReceiveProps = function (nextProps) {
        var props = this.props;
        if (props.name !== nextProps.name ||
            props.filterable !== nextProps.filterable ||
            props.data !== nextProps.data) {
            if (nextProps.filterable.source) {
                this.sourceInvalid = api_1.isApiOutdated(props.filterable.source, nextProps.filterable.source, props.data, nextProps.data);
            }
            else if (nextProps.filterable.options) {
                this.setState({
                    filterOptions: this.alterOptions(nextProps.filterable.options || [])
                });
            }
        }
    };
    HeadCellFilterDropDown.prototype.componentDidUpdate = function (prevProps, prevState) {
        var name = this.props.name;
        if (this.props.data[name] !== prevProps.data[name] &&
            this.props.filterable.source &&
            prevState.filterOptions !== this.props.filterOptions) {
            this.setState({
                filterOptions: this.alterOptions(this.state.filterOptions)
            });
        }
        this.sourceInvalid && this.fetchOptions();
    };
    HeadCellFilterDropDown.prototype.fetchOptions = function () {
        var _this = this;
        var _a = this.props, env = _a.env, filterable = _a.filterable, data = _a.data;
        if (!api_1.isEffectiveApi(filterable.source, data)) {
            return;
        }
        var api = api_1.normalizeApi(filterable.source);
        api.cache = 3000; // 开启 3s 缓存，因为固顶位置渲染1次会额外多次请求。
        env.fetcher(api, data).then(function (ret) {
            var options = (ret.data && ret.data.options) || [];
            _this.setState({
                filterOptions: ret && ret.data && _this.alterOptions(options)
            });
        });
    };
    HeadCellFilterDropDown.prototype.alterOptions = function (options) {
        var _a = this.props, data = _a.data, filterable = _a.filterable, name = _a.name;
        var filterValue = data && typeof data[name] !== 'undefined' ? data[name] : '';
        options = Select_1.normalizeOptions(options);
        if (filterable.multiple) {
            options = options.map(function (option) { return (tslib_1.__assign(tslib_1.__assign({}, option), { selected: filterValue.split(',').indexOf(option.value) > -1 })); });
        }
        else {
            options = options.map(function (option) { return (tslib_1.__assign(tslib_1.__assign({}, option), { selected: option.value === filterValue })); });
        }
        return options;
    };
    HeadCellFilterDropDown.prototype.handleClickOutside = function () {
        this.close();
    };
    HeadCellFilterDropDown.prototype.open = function () {
        this.setState({
            isOpened: true
        });
    };
    HeadCellFilterDropDown.prototype.close = function () {
        this.setState({
            isOpened: false
        });
    };
    HeadCellFilterDropDown.prototype.handleClick = function (value) {
        var _a;
        var _b = this.props, onQuery = _b.onQuery, name = _b.name;
        onQuery((_a = {},
            _a[name] = value,
            _a));
        this.close();
    };
    HeadCellFilterDropDown.prototype.handleCheck = function (value) {
        var _a;
        var _b = this.props, data = _b.data, name = _b.name, onQuery = _b.onQuery;
        var query;
        if (data[name] && data[name] === value) {
            query = '';
        }
        else {
            query =
                (data[name] && xor_1.default(data[name].split(','), [value]).join(',')) || value;
        }
        onQuery((_a = {},
            _a[name] = query,
            _a));
    };
    HeadCellFilterDropDown.prototype.handleReset = function () {
        var _a;
        var _b = this.props, name = _b.name, onQuery = _b.onQuery;
        onQuery((_a = {},
            _a[name] = undefined,
            _a));
        this.close();
    };
    HeadCellFilterDropDown.prototype.render = function () {
        var _this = this;
        var _a = this.state, isOpened = _a.isOpened, filterOptions = _a.filterOptions;
        var _b = this.props, data = _b.data, name = _b.name, filterable = _b.filterable, popOverContainer = _b.popOverContainer, ns = _b.classPrefix, cx = _b.classnames, __ = _b.translate;
        return (react_1.default.createElement("span", { className: cx(ns + "TableCell-filterBtn", typeof data[name] !== 'undefined' ? 'is-active' : '') },
            react_1.default.createElement("span", { onClick: this.open },
                react_1.default.createElement(icons_1.Icon, { icon: "column-filter", className: "icon" })),
            isOpened ? (react_1.default.createElement(Overlay_1.default, { container: popOverContainer || (function () { return react_dom_1.findDOMNode(_this); }), placement: "left-bottom-left-top right-bottom-right-top", target: popOverContainer ? function () { return react_dom_1.findDOMNode(_this).parentNode; } : null, show: true },
                react_1.default.createElement(PopOver_1.default, { classPrefix: ns, onHide: this.close, className: cx(ns + "TableCell-filterPopOver", filterable.className), overlay: true }, filterOptions && filterOptions.length > 0 ? (react_1.default.createElement("ul", { className: cx('DropDown-menu') },
                    !filterable.multiple
                        ? filterOptions.map(function (option, index) { return (react_1.default.createElement("li", { key: index, className: cx({
                                'is-selected': option.selected
                            }), onClick: _this.handleClick.bind(_this, option.value) }, option.label)); })
                        : filterOptions.map(function (option, index) { return (react_1.default.createElement("li", { key: index },
                            react_1.default.createElement(Checkbox_1.default, { classPrefix: ns, onChange: _this.handleCheck.bind(_this, option.value), checked: option.selected }, option.label))); }),
                    react_1.default.createElement("li", { key: "DropDown-menu-reset", onClick: this.handleReset.bind(this) }, __('重置')))) : null))) : null));
    };
    return HeadCellFilterDropDown;
}(react_1.default.Component));
exports.HeadCellFilterDropDown = HeadCellFilterDropDown;
//# sourceMappingURL=./renderers/Table/HeadCellFilterDropdown.js.map
