"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Options_1 = require("./Options");
var cx = require("classnames");
var Button_1 = require("../../components/Button");
var find = require("lodash/find");
var helper_1 = require("../../utils/helper");
var findIndex = require("lodash/findIndex");
;
;
var PickerControl = /** @class */ (function (_super) {
    tslib_1.__extends(PickerControl, _super);
    function PickerControl(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            isOpened: false,
            schema: _this.buildSchema(_this.props)
        };
        _this.open = _this.open.bind(_this);
        _this.close = _this.close.bind(_this);
        _this.handleModalConfirm = _this.handleModalConfirm.bind(_this);
        _this.renderBody = _this.renderBody.bind(_this);
        return _this;
    }
    PickerControl.prototype.componentWillReceiveProps = function (nextProps) {
        var props = this.props;
        if (helper_1.anyChanged([
            'pickerSchema',
            'multiple',
            'source'
        ], props, nextProps)) {
            this.setState({
                schema: this.buildSchema(nextProps)
            });
        }
    };
    PickerControl.prototype.buildSchema = function (props) {
        return tslib_1.__assign({}, props.pickerSchema, { type: 'crud', pickerMode: true, syncLocation: false, api: props.source, keepItemSelectionOnPageChange: true, valueField: props.valueField, labelField: props.labelField, checkOnItemClick: true, 
            // 不支持批量操作，会乱套
            bulkActions: props.multiple ? props.pickerSchema.bulkActions : [] });
    };
    PickerControl.prototype.open = function () {
        this.setState({
            isOpened: true
        });
    };
    PickerControl.prototype.close = function () {
        this.setState({
            isOpened: false
        });
    };
    PickerControl.prototype.handleModalConfirm = function (values, action, ctx, components) {
        var _a = this.props, joinValues = _a.joinValues, extractValue = _a.extractValue, valueField = _a.valueField, delimiter = _a.delimiter, setOptions = _a.setOptions, options = _a.options, onChange = _a.onChange, multiple = _a.multiple;
        var idx = findIndex(components, function (item) { return item.props.type === "crud"; });
        var items = values[idx].items;
        var value = items;
        if (joinValues) {
            value = items.map(function (item) { return item[valueField || 'value']; }).join(delimiter || ',');
        }
        else if (extractValue) {
            value = multiple ? items.map(function (item) { return item[valueField || 'value']; }) : (items[0] && items[0][valueField || 'value'] || '');
        }
        else {
            value = multiple ? items : items[0];
        }
        var additionalOptions = [];
        items.forEach(function (item) {
            if (!find(options, function (option) { return item[valueField || 'value'] == option[valueField || 'value']; })) {
                additionalOptions.push(item);
            }
        });
        additionalOptions.length && setOptions(options.concat(additionalOptions));
        onChange(value);
        this.close();
    };
    PickerControl.prototype.removeItem = function (index) {
        var _a = this.props, selectedOptions = _a.selectedOptions, joinValues = _a.joinValues, extractValue = _a.extractValue, delimiter = _a.delimiter, valueField = _a.valueField, onChange = _a.onChange, multiple = _a.multiple;
        var items = selectedOptions.concat();
        items.splice(index, 1);
        var value = items;
        if (joinValues) {
            value = items.map(function (item) { return item[valueField || 'value']; }).join(delimiter || ',');
        }
        else if (extractValue) {
            value = multiple ? items.map(function (item) { return item[valueField || 'value']; }) : (items[0] && items[0][valueField || 'value'] || '');
        }
        else {
            value = multiple ? items : items[0];
        }
        // if (joinValues) {
        //     value = items.map((item: any) => item[valueField || 'value']).join(delimiter || ',');
        // } else if (extractValue) {
        //     value = items.map((item: any) => item[valueField || 'value']);
        // } else if (!multiple) {
        //     value = value[0];
        // }
        onChange(value);
    };
    PickerControl.prototype.renderValues = function () {
        var _this = this;
        var _a = this.props, ns = _a.classPrefix, selectedOptions = _a.selectedOptions, labelField = _a.labelField, disabled = _a.disabled;
        return (React.createElement("div", { className: ns + "Picker-values" }, selectedOptions.map(function (item, index) { return (React.createElement("div", { key: index, className: cx(ns + "Picker-value", {
                'is-disabled': disabled
            }) },
            React.createElement("span", { "data-tooltip": "\u5220\u9664", "data-position": "bottom", className: ns + "Picker-valueIcon", onClick: _this.removeItem.bind(_this, index) }, "\u00D7"),
            React.createElement("span", { className: ns + "Picker-valueLabel" }, item[labelField || 'label']))); })));
    };
    PickerControl.prototype.renderBody = function () {
        var _a = this.props, render = _a.render, selectedOptions = _a.selectedOptions, options = _a.options, multiple = _a.multiple, valueField = _a.valueField;
        return render('modal-body', this.state.schema, {
            value: selectedOptions,
            valueField: valueField,
            options: options,
            multiple: multiple
        });
    };
    PickerControl.prototype.render = function () {
        var _a = this.props, className = _a.className, ns = _a.classPrefix, disabled = _a.disabled, render = _a.render, modalMode = _a.modalMode, pickerSchema = _a.pickerSchema, source = _a.source, size = _a.size, env = _a.env;
        return (React.createElement("div", { className: cx(ns + "PickerControl", className) },
            React.createElement("div", { className: ns + "Picker" },
                this.renderValues(),
                React.createElement(Button_1.default, { classPrefix: ns, className: ns + "Picker-pickBtn", tooltip: "\u70B9\u51FB\u9009\u62E9", tooltipContainer: env && env.getModalContainer ? env.getModalContainer() : undefined, level: "link", size: "sm", disabled: disabled, onClick: this.open, iconOnly: true },
                    React.createElement("i", { className: "fa fa-crosshairs" })),
                render('modal', {
                    title: '请选择',
                    size: size,
                    type: modalMode,
                    body: {
                        children: this.renderBody
                    }
                }, {
                    key: 'modal',
                    lazyRender: !!source,
                    onConfirm: this.handleModalConfirm,
                    onClose: this.close,
                    show: this.state.isOpened
                }))));
    };
    PickerControl.propsList = [
        "modalMode",
        "pickerSchema",
        "labelField",
        "onChange",
        "options",
        "value",
        "inline",
        "multiple"
    ];
    PickerControl.defaultProps = {
        modalMode: 'dialog',
        multiple: false,
        pickerSchema: {
            mode: 'list',
            listItem: {
                title: '${label}'
            }
        }
    };
    return PickerControl;
}(React.PureComponent));
exports.default = PickerControl;
var PickerControlRenderer = /** @class */ (function (_super) {
    tslib_1.__extends(PickerControlRenderer, _super);
    function PickerControlRenderer() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    PickerControlRenderer = tslib_1.__decorate([
        Options_1.OptionsControl({
            type: 'picker',
            autoLoadOptionsFromSource: false,
            sizeMutable: false
        })
    ], PickerControlRenderer);
    return PickerControlRenderer;
}(PickerControl));
exports.PickerControlRenderer = PickerControlRenderer;
;
//# sourceMappingURL=./renderers/Form/Picker.js.map
