/**
 * amis-ui v6.14.0-beta.1
 * Copyright 2018-2025 fex
 */

import { __extends, __awaiter, __generator, __assign, __decorate, __metadata } from 'tslib';
import React__default from 'react';
import { eachTree, findTree, autobind, themeable, localeable } from 'amis-core';
import ResultBox from './ResultBox.js';
import Sortable from 'sortablejs';
import PopUp from './PopUp.js';
import InputBox from './InputBox.js';
import { Icon } from './icons.js';
import debounce from 'lodash/debounce';
import Checkbox from './Checkbox.js';
import { value2array, optionValueCompare } from './Select.js';
import Spinner from './Spinner.js';
import flatten from 'lodash/flatten';

/**
 * @file 移动端人员、部门、角色、岗位选择
 * @author fex
 */
var defaultIcons = [
    'user-default-department',
    'user-default-role',
    'user-default-post'
];
var UserSelect = /** @class */ (function (_super) {
    __extends(UserSelect, _super);
    function UserSelect(props) {
        var _this = _super.call(this, props) || this;
        _this.unmounted = false;
        _this.lazySearch = debounce(function (text) {
            (function (text) { return __awaiter(_this, void 0, void 0, function () {
                var onSearch, result;
                var _this = this;
                return __generator(this, function (_a) {
                    switch (_a.label) {
                        case 0:
                            onSearch = this.props.onSearch;
                            return [4 /*yield*/, onSearch(text, function (cancelExecutor) { return (_this.cancelSearch = cancelExecutor); })];
                        case 1:
                            result = _a.sent();
                            if (this.unmounted) {
                                return [2 /*return*/];
                            }
                            if (!Array.isArray(result)) {
                                throw new Error('onSearch 需要返回数组');
                            }
                            this.setState({
                                searchList: result,
                                searchLoading: false
                            });
                            return [2 /*return*/];
                    }
                });
            }); })(text).catch(function (e) {
                _this.setState({ searchLoading: false });
                console.error(e);
            });
        }, 250, {
            trailing: true,
            leading: false
        });
        _this.state = {
            isOpened: false,
            isSelectOpened: false,
            inputValue: '',
            options: _this.props.options || [],
            breadList: [],
            searchList: [],
            tempSelection: [],
            selection: props.selection || [],
            isSearch: false,
            searchLoading: false,
            isEdit: false
        };
        return _this;
    }
    UserSelect.prototype.componentDidMount = function () { };
    UserSelect.prototype.componentDidUpdate = function (prevProps) {
        var _a;
        var _b = this.props, options = _b.options, value = _b.value;
        if (prevProps.options !== options) {
            if (options &&
                options.length &&
                options[0].leftOptions &&
                Array.isArray(options[0].children)) {
                var leftOptions = options[0].leftOptions;
                this.setState({
                    options: leftOptions
                });
            }
            else {
                // 部门选择
                this.setState({
                    options: options
                });
            }
        }
        if (JSON.stringify(value) !== JSON.stringify(prevProps.value) ||
            (JSON.stringify(options) !== JSON.stringify(prevProps.options) &&
                ((_a = prevProps.options) === null || _a === void 0 ? void 0 : _a.length))) {
            var selection = value2array(value, this.props);
            this.setState({
                selection: selection
            });
        }
    };
    UserSelect.prototype.componentWillUnmount = function () {
        this.unmounted = true;
    };
    UserSelect.prototype.onClose = function () {
        this.setState({
            isOpened: false,
            isSearch: false,
            inputValue: '',
            searchList: [],
            searchLoading: false
        });
    };
    UserSelect.prototype.handleSearch = function (text) {
        var _this = this;
        if (text) {
            this.setState({
                isSearch: true,
                searchLoading: true,
                inputValue: text
            }, function () {
                // 如果有取消搜索，先取消掉。
                _this.cancelSearch && _this.cancelSearch();
                _this.lazySearch(text);
            });
        }
        else {
            this.handleSeachCancel();
        }
    };
    UserSelect.prototype.handleSeachCancel = function () {
        this.setState({
            isSearch: false,
            searchLoading: false,
            inputValue: ''
        });
    };
    UserSelect.prototype.swapSelectPosition = function (oldIndex, newIndex) {
        var tempSelection = this.state.tempSelection;
        tempSelection.splice(newIndex, 0, tempSelection.splice(oldIndex, 1)[0]);
        this.setState({ tempSelection: tempSelection });
    };
    UserSelect.prototype.dragRef = function (ref) {
        if (ref) {
            this.initDragging();
        }
    };
    UserSelect.prototype.initDragging = function () {
        var _this = this;
        var ns = this.props.classPrefix;
        this.sortable = new Sortable(document.querySelector(".".concat(ns, "UserSelect-checkContent")), {
            group: "UserSelect-checkContent",
            animation: 150,
            handle: ".".concat(ns, "UserSelect-dragBar"),
            ghostClass: "".concat(ns, "UserSelect--dragging"),
            onEnd: function (e) {
                if (!_this.state.isEdit || e.newIndex === e.oldIndex) {
                    return;
                }
                var parent = e.to;
                if (e.oldIndex < parent.childNodes.length - 1) {
                    parent.insertBefore(e.item, parent.childNodes[e.oldIndex > e.newIndex ? e.oldIndex + 1 : e.oldIndex]);
                }
                else {
                    parent.appendChild(e.item);
                }
                _this.swapSelectPosition(e.oldIndex, e.newIndex);
            }
        });
    };
    UserSelect.prototype.destroyDragging = function () {
        this.sortable && this.sortable.destroy();
    };
    UserSelect.prototype.onOpen = function () {
        var selection = this.props.selection;
        this.setState({
            isOpened: true,
            selection: selection || []
        });
    };
    UserSelect.prototype.handleBack = function () {
        this.setState({
            isOpened: false,
            inputValue: '',
            isSearch: false,
            searchList: [],
            selection: [],
            breadList: []
        });
    };
    UserSelect.prototype.handleExpand = function (option) {
        var _a;
        return __awaiter(this, void 0, void 0, function () {
            var _b, deferLoad, isRef, isDep, deferParam, res, res, breadList;
            return __generator(this, function (_c) {
                switch (_c.label) {
                    case 0:
                        _b = this.props, deferLoad = _b.deferLoad, isRef = _b.isRef, isDep = _b.isDep;
                        if (!(!option.isLoaded || (!isRef && isDep && !((_a = option.children) === null || _a === void 0 ? void 0 : _a.length)))) return [3 /*break*/, 4];
                        option.isLoaded = true;
                        deferParam = option.deferApi ? { deferApi: option.deferApi } : {};
                        if (!isRef) return [3 /*break*/, 2];
                        return [4 /*yield*/, Promise.all([
                                deferLoad(option, false, deferParam)
                                // deferLoad({...option, ref: option.value}, true, deferParam)
                            ])];
                    case 1:
                        res = _c.sent();
                        option.children = flatten(res);
                        return [3 /*break*/, 4];
                    case 2:
                        if (!option.deferApi) return [3 /*break*/, 4];
                        return [4 /*yield*/, deferLoad(option, false, deferParam)];
                    case 3:
                        res = _c.sent();
                        option.children = res || [];
                        _c.label = 4;
                    case 4:
                        breadList = this.state.breadList;
                        breadList.push(option);
                        this.setState({
                            breadList: breadList
                        });
                        return [2 /*return*/];
                }
            });
        });
    };
    UserSelect.prototype.handleSelectChange = function (option, isReplace) {
        var _a = this.props, multiple = _a.multiple, onChange = _a.onChange, _b = _a.valueField, valueField = _b === void 0 ? 'value' : _b, controlled = _a.controlled;
        if (controlled) {
            onChange(option);
            return;
        }
        var selection = this.state.selection.slice();
        // 直接替换的option 肯定是数组
        if (isReplace) {
            selection = option;
            // ResultBox 删除场景
            onChange(selection);
        }
        else {
            var selectionVals = selection.map(function (option) { return option[valueField]; });
            var pos = selectionVals.indexOf(option[valueField]);
            if (pos !== -1) {
                selection.splice(selection.indexOf(option), 1);
            }
            else {
                if (multiple) {
                    selection.push(option);
                }
                else {
                    selection = [option];
                }
            }
        }
        // onChange(multiple ? selection : selection?.[0]);
        this.setState({
            selection: selection
        });
        return false;
    };
    UserSelect.prototype.handleSubmit = function () {
        var _a = this.props, onChange = _a.onChange, multiple = _a.multiple;
        var selection = this.state.selection;
        var value = multiple ? selection : selection === null || selection === void 0 ? void 0 : selection[0];
        onChange(value);
        this.handleBack();
    };
    UserSelect.prototype.onDelete = function (option, isTemp) {
        if (isTemp === void 0) { isTemp = false; }
        var _a = this.props, _b = _a.valueField, valueField = _b === void 0 ? 'value' : _b, controlled = _a.controlled, onChange = _a.onChange;
        var _c = this.state, tempSelection = _c.tempSelection, selection = _c.selection;
        var _selection = isTemp ? tempSelection : selection;
        _selection = _selection.filter(function (item) { return item[valueField] !== option[valueField]; });
        if (isTemp) {
            this.setState({ tempSelection: _selection });
        }
        else {
            if (controlled) {
                onChange(option, false, true);
            }
            else {
                this.setState({ selection: _selection });
            }
        }
    };
    UserSelect.prototype.handleBreadChange = function (option, index) {
        var breadList = this.state.breadList.slice(0, index);
        this.setState({
            breadList: breadList
        });
    };
    UserSelect.prototype.handleSort = function () {
        var _a;
        var controlled = this.props.controlled;
        this.setState({
            isSelectOpened: true,
            isEdit: true,
            tempSelection: controlled
                ? ((_a = this.props.selection) === null || _a === void 0 ? void 0 : _a.slice()) || []
                : this.state.selection.slice()
        });
    };
    UserSelect.prototype.handleEdit = function () {
        var _a = this.props, multiple = _a.multiple, onChange = _a.onChange, controlled = _a.controlled;
        var _b = this.state, isEdit = _b.isEdit, tempSelection = _b.tempSelection;
        if (isEdit) {
            if (controlled) {
                onChange(multiple ? tempSelection : tempSelection === null || tempSelection === void 0 ? void 0 : tempSelection[0], true);
                this.setState({
                    isSelectOpened: false,
                    isEdit: false
                });
                return;
            }
            else {
                this.setState({
                    isSelectOpened: false,
                    isEdit: false,
                    selection: tempSelection
                });
            }
        }
        else {
            this.setState({
                isEdit: true
            });
        }
    };
    UserSelect.prototype.handleClear = function () {
        this.setState({ tempSelection: [] });
    };
    UserSelect.prototype.getResult = function () {
        var _a, _b;
        var _c = this.props, _d = _c.valueField, valueField = _d === void 0 ? 'value' : _d, _e = _c.labelField, labelField = _e === void 0 ? 'label' : _e, _f = _c.options, options = _f === void 0 ? [] : _f;
        var _selection = ((_a = this.props.selection) === null || _a === void 0 ? void 0 : _a.concat()) || [];
        if (Array.isArray((_b = options === null || options === void 0 ? void 0 : options[0]) === null || _b === void 0 ? void 0 : _b.leftOptions)) {
            eachTree(options[0].leftOptions, function (item) {
                var index = _selection.findIndex(function (item2) { return item2[valueField] === item[valueField]; });
                if (!!~index) {
                    _selection.splice(index, 1, __assign(__assign({}, _selection[index]), { label: item[labelField] }));
                }
            });
        }
        eachTree(options, function (item) {
            var index = _selection.findIndex(function (item2) { return item2[valueField] === item[valueField]; });
            if (!!~index) {
                _selection.splice(index, 1, __assign(__assign({}, _selection[index]), { label: item[labelField] }));
            }
        });
        return _selection;
    };
    UserSelect.prototype.renderIcon = function (option, isSelect) {
        var _a;
        var _b = this.props, _c = _b.labelField, labelField = _c === void 0 ? 'label' : _c, cx = _b.classnames, isRef = _b.isRef;
        var isSearch = this.state.isSearch;
        if (!option.icon) {
            if (option.isRef || ((isSearch || isSelect) && isRef)) {
                return (React__default.createElement("span", { className: cx('UserSelect-text-userPic') }, (_a = option[labelField]) === null || _a === void 0 ? void 0 : _a.slice(0, 1)));
            }
            else {
                // 没有icon默认返回部门图标
                return (React__default.createElement("span", { className: cx('icon', 'UserSelect-icon-box', 'department') },
                    React__default.createElement(Icon, { icon: "department", className: "icon" })));
            }
        }
        // 支持角色、岗位等图标配置
        var IconHtml;
        switch (option.icon) {
            case 'user-default-department':
                IconHtml = (React__default.createElement("span", { className: cx('icon', 'UserSelect-icon-box', 'department') },
                    React__default.createElement(Icon, { icon: "department", className: "icon" })));
                break;
            case 'user-default-role':
                IconHtml = (React__default.createElement("span", { className: cx('icon', 'UserSelect-icon-box', 'role') },
                    React__default.createElement(Icon, { icon: "role", className: "icon" })));
                break;
            case 'user-default-post':
                IconHtml = (React__default.createElement("span", { className: cx('icon', 'UserSelect-icon-box', 'post') },
                    React__default.createElement(Icon, { icon: "post", className: "icon" })));
                break;
            case '':
                IconHtml = (React__default.createElement("span", { className: cx('UserSelect-text-userPic') }, option[labelField].slice(0, 1)));
                break;
            default:
                IconHtml = (React__default.createElement("img", { src: option.icon, className: cx('UserSelect-userPic') }));
        }
        return IconHtml;
    };
    UserSelect.prototype.renderList = function (options, key, isSearch) {
        var _this = this;
        if (options === void 0) { options = []; }
        var _a = this.props, cx = _a.classnames, _b = _a.valueField, valueField = _b === void 0 ? 'value' : _b; _a.labelField; var isDep = _a.isDep, isRef = _a.isRef, __ = _a.translate, controlled = _a.controlled, displayFields = _a.displayFields, isTab = _a.isTab, multiple = _a.multiple, _d = _a.deferField, deferField = _d === void 0 ? 'defer' : _d;
        var selection = controlled
            ? this.props.selection || []
            : this.state.selection;
        var checkValues = selection.map(function (item) { return item[valueField]; });
        return options.length ? (React__default.createElement("div", { className: cx('UserSelect-memberList-box'), key: key },
            React__default.createElement("ul", { className: cx("UserSelect-memberList"), key: key }, options.map(function (option, index) {
                var _a, _b;
                var hasChildren = (isRef && !option.isRef) ||
                    (isDep && (option[deferField] || ((_a = option.children) === null || _a === void 0 ? void 0 : _a.length)));
                var checkVisible = (isDep && isRef) ||
                    (isRef && option.isRef) ||
                    (isDep && !isRef) ||
                    isSearch;
                var userIcon = _this.renderIcon(option);
                var displays = option.type === 'user' && displayFields
                    ? displayFields
                    : ['label'];
                var avatar = displays.find(function (i) { return i === 'avatar'; });
                var first = ((_b = option.label) === null || _b === void 0 ? void 0 : _b.substring(0, 1).toLocaleUpperCase()) || 'A';
                var restFiedls = displays.filter(function (i) { return i !== 'avatar'; });
                if (option.type === 'post') {
                    restFiedls.push('desc');
                }
                return (React__default.createElement("li", { key: index, className: restFiedls.length === 2 ? cx("UserSelect-h2") : '' },
                    (isTab || multiple) && checkVisible ? (React__default.createElement(Checkbox, { size: "sm", checked: checkValues.includes(option[valueField]), label: '', onChange: function () { return _this.handleSelectChange(option); } })) : null,
                    React__default.createElement("span", { className: cx('UserSelect-memberName'), onClick: function () {
                            return checkVisible
                                ? _this.handleSelectChange(option)
                                : hasChildren && _this.handleExpand(option);
                        } },
                        !avatar &&
                            userIcon &&
                            (isDep || defaultIcons.includes(option.icon)) ? (React__default.createElement("span", { className: cx('UserSelect-userPic-box') }, userIcon)) : null,
                        !option.isRef ? (React__default.createElement("span", { className: cx('UserSelect-label') }, option.label)) : null,
                        avatar && option.isRef ? (option.avatar ? (React__default.createElement("img", { className: "option-avatar-img ".concat(restFiedls.length === 2 ? 'avatar-2' : ''), src: option.avatar })) : (React__default.createElement("span", { className: "option-avatar-txt ".concat(restFiedls.length === 2 ? 'avatar-2' : '') }, first))) : null,
                        option.isRef ? (React__default.createElement("div", { className: "option-fields" }, restFiedls.map(function (key) { return (React__default.createElement("span", { className: cx('option-item'), key: key }, option[key])); }))) : null),
                    !isSearch && hasChildren ? (React__default.createElement("span", { className: cx("UserSelect-more"), onClick: function () { return _this.handleExpand(option); } },
                        React__default.createElement(Icon, { icon: "caret", className: "icon" }))) : null));
            })))) : (React__default.createElement("div", { className: cx("UserSelect-noRecord") },
            __('placeholder.noOption'),
            "~"));
    };
    UserSelect.prototype.renderselectList = function (options) {
        var _this = this;
        if (options === void 0) { options = []; }
        var _a = this.props, cx = _a.classnames, _b = _a.labelField, labelField = _b === void 0 ? 'label' : _b, _c = _a.valueField, valueField = _c === void 0 ? 'value' : _c, displayFields = _a.displayFields, isDep = _a.isDep, __ = _a.translate;
        var isEdit = this.state.isEdit;
        return options.length ? (React__default.createElement("div", { className: cx('UserSelect-selection-wrap') },
            React__default.createElement("ul", { className: cx("UserSelect-selection", "UserSelect-checkContent"), ref: this.dragRef }, options.map(function (option, index) {
                var _a;
                var userIcon = _this.renderIcon(option, true);
                var options = _this.state.options;
                var originOption = findTree(options, function (item) { return item[valueField] === option[valueField]; });
                var displays = option.type === 'user' && displayFields
                    ? displayFields
                    : ['label'];
                var avatar = displays.find(function (i) { return i === 'avatar'; });
                var first = ((_a = option.label) === null || _a === void 0 ? void 0 : _a.substring(0, 1).toLocaleUpperCase()) || 'A';
                var restFiedls = displays.filter(function (i) { return i !== 'avatar'; });
                if (option.type === 'post') {
                    restFiedls.push('desc');
                }
                return (React__default.createElement("li", { key: index, className: restFiedls.length === 2 ? cx("UserSelect-h2") : '' },
                    isEdit ? (React__default.createElement("span", { className: cx("UserSelect-del"), onClick: function () { return _this.onDelete(option, true); } },
                        React__default.createElement(Icon, { icon: "user-remove", className: "icon" }))) : null,
                    React__default.createElement("span", { className: cx("UserSelect-memberName") },
                        !avatar &&
                            userIcon &&
                            (isDep || defaultIcons.includes(option.icon)) ? (React__default.createElement("span", { className: cx('UserSelect-userPic-box') }, userIcon)) : null,
                        !option.isRef ? (labelField === 'avatar' ? (option[labelField] ? (React__default.createElement("img", { className: cx('UserSelect-avatar-img'), src: option[labelField], alt: "" })) : (React__default.createElement("span", { className: cx('UserSelect-avatar-text') }, option[valueField].slice(0, 1).toLocaleUpperCase()))) : (React__default.createElement("span", { className: cx('UserSelect-label') }, originOption
                            ? originOption[labelField]
                            : option[labelField]))) : null,
                        avatar && option.isRef ? (option.avatar ? (React__default.createElement("img", { className: "option-avatar-img ".concat(restFiedls.length === 2 ? 'avatar-2' : ''), src: option.avatar })) : (React__default.createElement("span", { className: "option-avatar-txt ".concat(restFiedls.length === 2 ? 'avatar-2' : '') }, first))) : null,
                        option.isRef ? (React__default.createElement("div", { className: "option-fields" }, restFiedls.map(function (key) { return (React__default.createElement("span", { className: cx('option-item'), key: key }, option[key])); }))) : null),
                    isEdit ? (React__default.createElement("a", { className: cx('UserSelect-dragBar') },
                        React__default.createElement(Icon, { icon: "drag-bar", className: cx('icon') }))) : null));
            })))) : (React__default.createElement("div", { className: cx("UserSelect-noRecord") },
            __('placeholder.noOption'),
            "~"));
    };
    UserSelect.prototype.renderContent = function () {
        var _this = this;
        var _a = this.props, navTitle = _a.navTitle, showNav = _a.showNav, searchable = _a.searchable, searchPlaceholder = _a.searchPlaceholder, controlled = _a.controlled, _b = _a.labelField, labelField = _b === void 0 ? 'label' : _b, _c = _a.valueField, valueField = _c === void 0 ? 'value' : _c, cx = _a.classnames, multiple = _a.multiple, __ = _a.translate, loadingConfig = _a.loadingConfig, mobileUI = _a.mobileUI;
        var _d = this.state, breadList = _d.breadList, options = _d.options, isSearch = _d.isSearch, searchList = _d.searchList, searchLoading = _d.searchLoading;
        var selection = controlled ? this.props.selection : this.state.selection;
        return (React__default.createElement("div", { className: cx("UserSelect-wrap") },
            showNav ? (React__default.createElement("div", { className: cx('UserSelect-navbar') },
                React__default.createElement("span", { className: "left-arrow-box", onClick: this.handleBack },
                    React__default.createElement(Icon, { icon: "left-arrow", className: "icon" })),
                React__default.createElement("div", { className: cx('UserSelect-navbar-title') }, navTitle))) : null,
            searchable ? (React__default.createElement("div", { className: cx('UserSelect-searchBox') },
                React__default.createElement(InputBox, { className: cx("UserSelect-search"), value: this.state.inputValue, onChange: this.handleSearch, placeholder: searchPlaceholder, clearable: false, mobileUI: mobileUI }, this.state.isSearch ? (React__default.createElement("a", { onClick: this.handleSeachCancel },
                    React__default.createElement(Icon, { icon: "close", className: "icon" }))) : (React__default.createElement(Icon, { icon: "search", className: "icon" }))))) : null,
            breadList.length ? (React__default.createElement("div", { className: cx('UserSelect-breadcrumb') }, breadList
                .map(function (item, index) { return (React__default.createElement("span", { className: cx('UserSelect-breadcrumb-item'), key: index, onClick: function () { return _this.handleBreadChange(item, index); } }, item.label)); })
                .reduce(function (prev, curr, index) { return [
                prev,
                React__default.createElement(Icon, { icon: "caret", className: cx('UserSelect-breadcrumb-separator', 'icon'), key: "separator-".concat(index) }),
                curr
            ]; }))) : null,
            (selection === null || selection === void 0 ? void 0 : selection.length) ? (React__default.createElement("div", { className: cx("UserSelect-resultBox") },
                React__default.createElement("div", { className: cx("UserSelect-resultBox-shadow") }),
                React__default.createElement("ul", { className: cx("UserSelect-selectList") }, selection.map(function (item, index) {
                    var originOption = findTree(options, function (op) { return op[valueField] === item[valueField]; });
                    return (React__default.createElement("li", { key: index, className: cx('UserSelect-selectList-item') },
                        labelField === 'avatar' ? (item[labelField] ? (React__default.createElement("img", { className: cx('UserSelect-avatar-img'), src: item[labelField], alt: "" })) : (React__default.createElement("span", { className: cx('UserSelect-avatar-text') }, item[valueField].slice(0, 1).toLocaleUpperCase()))) : (React__default.createElement("span", null, originOption
                            ? originOption[labelField]
                            : item[labelField])),
                        React__default.createElement("span", { className: cx('UserSelect-selectList-item-closeBox'), onClick: function () { return _this.onDelete(item); } },
                            React__default.createElement(Icon, { icon: "close", className: "icon" }))));
                })),
                multiple ? (React__default.createElement("span", { className: cx('UserSelect-selectSort-box'), onClick: this.handleSort },
                    React__default.createElement(Icon, { icon: "menu", className: cx('UserSelect-selectSort', 'icon') }))) : null)) : null,
            isSearch ? (searchLoading ? (React__default.createElement("div", { className: cx("UserSelect-searchLoadingBox") },
                React__default.createElement(Spinner, { loadingConfig: loadingConfig }))) : (React__default.createElement("div", { className: cx('UserSelect-searchResult') }, this.renderList(searchList, -1, true)))) : (React__default.createElement("div", { className: cx("UserSelect-contentBox") },
                React__default.createElement("div", { className: cx("UserSelect-scroll"), style: {
                        width: 100 * (breadList.length + 1) + 'vw',
                        left: -breadList.length * 100 + 'vw'
                    } },
                    this.renderList(options),
                    breadList.map(function (option, index) {
                        var treeOption = findTree(options, optionValueCompare(option[valueField], valueField || 'value'));
                        var children = treeOption.children;
                        var hasChildren = Array.isArray(children) && children;
                        return hasChildren ? (_this.renderList(children, option[valueField])) : (React__default.createElement("div", { className: cx("UserSelect-spinnerBox"), key: index },
                            React__default.createElement(Spinner, { loadingConfig: loadingConfig })));
                    })))),
            !controlled ? (React__default.createElement("div", { className: cx('UserSelect-footer') },
                React__default.createElement("button", { type: "button", className: cx('Button Button--md Button--primary'), onClick: this.handleSubmit }, __('UserSelect.sure')))) : null));
    };
    UserSelect.prototype.render = function () {
        var _this = this;
        var _a = this.props, cx = _a.classnames, __ = _a.translate, _b = _a.placeholder, placeholder = _b === void 0 ? '请选择' : _b, showResultBox = _a.showResultBox, _c = _a.labelField, labelField = _c === void 0 ? 'label' : _c, _d = _a.valueField, valueField = _d === void 0 ? 'value' : _d, disabled = _a.disabled, mobileUI = _a.mobileUI;
        var _e = this.state, isOpened = _e.isOpened, isEdit = _e.isEdit, isSelectOpened = _e.isSelectOpened;
        return (React__default.createElement("div", { className: cx('UserSelect') },
            showResultBox ? (React__default.createElement(ResultBox, { className: cx('UserSelect-input', isOpened ? 'is-active' : ''), allowInput: false, result: this.getResult(), disabled: disabled, itemRender: function (option) {
                    if (labelField !== 'avatar') {
                        return (React__default.createElement("span", null, "".concat(option.scopeLabel || '').concat(option.label)));
                    }
                    else {
                        if (option[labelField]) {
                            return (React__default.createElement("img", { className: cx('UserSelect-avatar-img'), src: option[labelField], alt: "" }));
                        }
                        return (React__default.createElement("span", { className: cx('UserSelect-avatar-text') }, option[valueField].slice(0, 1).toLocaleUpperCase()));
                    }
                }, onResultChange: function (value) { return _this.handleSelectChange(value, true); }, onResultClick: this.onOpen, placeholder: placeholder, mobileUI: mobileUI })) : null,
            showResultBox ? (React__default.createElement(PopUp, { isShow: isOpened, className: cx("UserSelect-popup"), onHide: this.onClose, showClose: false }, this.renderContent())) : (this.renderContent()),
            React__default.createElement(PopUp, { isShow: isSelectOpened, className: cx("UserSelect-selectPopup"), onHide: function () {
                    return _this.setState({
                        isSelectOpened: false,
                        isEdit: false
                    });
                }, showClose: false },
                React__default.createElement("div", { className: cx('UserSelect-selectBody') },
                    React__default.createElement("div", { className: cx('UserSelect-navbar') },
                        React__default.createElement("span", { className: "left-arrow-box", onClick: function () {
                                return _this.setState({
                                    isSelectOpened: false,
                                    isEdit: false
                                });
                            } },
                            React__default.createElement(Icon, { icon: "left-arrow", className: "icon" })),
                        React__default.createElement("div", { className: cx('UserSelect-navbar-title') }, __('UserSelect.resultSort')),
                        React__default.createElement("span", { className: cx('UserSelect-navbar-btnEdit'), onClick: this.handleEdit }, isEdit ? __('UserSelect.save') : __('UserSelect.edit'))),
                    React__default.createElement("div", { className: cx('UserSelect-selectList-box') },
                        React__default.createElement("div", { className: cx('UserSelect-select-head') },
                            React__default.createElement("span", { className: cx('UserSelect-select-head-text') }, __('UserSelect.selected')),
                            isEdit ? (React__default.createElement("span", { className: cx('UserSelect-select-head-btnClear'), onClick: this.handleClear }, __('UserSelect.clear'))) : null),
                        this.renderselectList(this.state.tempSelection))))));
    };
    UserSelect.defaultProps = {
        showResultBox: true,
        labelField: 'label',
        valueField: 'value',
        deferField: 'defer'
    };
    __decorate([
        autobind,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", []),
        __metadata("design:returntype", void 0)
    ], UserSelect.prototype, "onClose", null);
    __decorate([
        autobind,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", [String]),
        __metadata("design:returntype", void 0)
    ], UserSelect.prototype, "handleSearch", null);
    __decorate([
        autobind,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", []),
        __metadata("design:returntype", void 0)
    ], UserSelect.prototype, "handleSeachCancel", null);
    __decorate([
        autobind,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", [Object]),
        __metadata("design:returntype", void 0)
    ], UserSelect.prototype, "dragRef", null);
    __decorate([
        autobind,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", []),
        __metadata("design:returntype", void 0)
    ], UserSelect.prototype, "onOpen", null);
    __decorate([
        autobind,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", []),
        __metadata("design:returntype", void 0)
    ], UserSelect.prototype, "handleBack", null);
    __decorate([
        autobind,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", [Object]),
        __metadata("design:returntype", Promise)
    ], UserSelect.prototype, "handleExpand", null);
    __decorate([
        autobind,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", [Object, Boolean]),
        __metadata("design:returntype", void 0)
    ], UserSelect.prototype, "handleSelectChange", null);
    __decorate([
        autobind,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", []),
        __metadata("design:returntype", void 0)
    ], UserSelect.prototype, "handleSubmit", null);
    __decorate([
        autobind,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", [Object, Boolean]),
        __metadata("design:returntype", void 0)
    ], UserSelect.prototype, "onDelete", null);
    __decorate([
        autobind,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", [Object, Number]),
        __metadata("design:returntype", void 0)
    ], UserSelect.prototype, "handleBreadChange", null);
    __decorate([
        autobind,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", []),
        __metadata("design:returntype", void 0)
    ], UserSelect.prototype, "handleSort", null);
    __decorate([
        autobind,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", []),
        __metadata("design:returntype", void 0)
    ], UserSelect.prototype, "handleEdit", null);
    __decorate([
        autobind,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", []),
        __metadata("design:returntype", void 0)
    ], UserSelect.prototype, "handleClear", null);
    __decorate([
        autobind,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", []),
        __metadata("design:returntype", void 0)
    ], UserSelect.prototype, "getResult", null);
    return UserSelect;
}(React__default.Component));
var UserSelect$1 = themeable(localeable(UserSelect));

export { UserSelect, UserSelect$1 as default };
