import React from 'react';
import BISelect from '@/ant_components/BISelect';
import { Spin } from 'antd';
import lodash from 'lodash';
import { getStrLeng } from '@/utils/utils';
import s from './index.less';
class AssociationSearch extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: undefined,
            data: [],
            fetching: false,
            fieldNames: this.props.fieldNames || { label: 'label', value: 'value' },
            initData: [],
            searchStr: '',
        };
        this.componentWillReceiveProps = (nextProps) => {
            if (JSON.stringify(nextProps.value) !== JSON.stringify(this.props.value)) {
                const vas = nextProps.value || undefined;
                let data = this.state.data;
                if (vas === undefined || vas === null) {
                    data = this.state.initData;
                }
                else if (typeof vas === 'object') {
                    if (!vas.label || !vas.label.length) {
                        data = this.state.initData;
                    }
                }
                this.setState({ value: this.formaterValue(vas), data });
                this.addValueOptions(vas);
            }
            if (JSON.stringify(nextProps.updateId) !== JSON.stringify(this.props.updateId)) {
                nextProps.updateId !== undefined && this.fetchData('', false, nextProps.updateId);
            }
        };
        this.fetchData = async (val, isDefault = false, id = undefined) => {
            let data = [];
            if (this.props.request) {
                this.setState({ fetching: true });
                const response = await this.props.request(val, id);
                if (response && response.data && response.success) {
                    const _data = Array.isArray(response.data) ? response.data : response.data.list;
                    data = Array.isArray(_data) ? _data : [];
                    data = this.formaterData(data);
                    if (isDefault) {
                        this.setState({ initData: data.slice() });
                    }
                }
            }
            else {
                data = Array.isArray(this.props.dataSource) ? this.props.dataSource : [];
                data = this.formaterData(data);
            }
            this.setState({ data, fetching: false });
            // this.addValueOptions(this.props.value);
        };
        this.onSearch = (val) => {
            this.setState({ searchStr: val });
            if (getStrLeng(val) >= 2) {
                this.fetchData(val);
            }
            else {
                this.setState({
                    data: this.state.initData,
                });
            }
        };
        this.onFocus = () => {
            if (this.props.initDataType === 'onfocus') {
                this.fetchData(this.state.searchStr, true);
            }
        };
        this.onBlur = () => {
            this.setState({ searchStr: '' });
        };
        this.formaterData = (data) => {
            if (this.props.fieldNames) {
                const { value, label } = this.props.fieldNames;
                return data.map((item) => ({
                    ...item,
                    value: typeof value === 'function' ? value(item) : item[value],
                    label: item[label],
                }));
            }
            else
                return data;
        };
        this.formaterValue = (item) => {
            if (!item)
                return item;
            if (this.props.fieldNames && item) {
                const { value, label } = this.props.fieldNames;
                if (Array.isArray(item)) {
                    return item.map((ls) => ({
                        value: ls.value || ls.value === 0 ? ls.value : ls[value],
                        key: ls.value || ls.value === 0 ? ls.value : ls[value],
                        label: ls.label || ls[label],
                    }));
                }
                else {
                    return {
                        value: item.value || item.value === 0 ? item.value : item[value],
                        key: item.value || item.value === 0 ? item.value : item[value],
                        label: item.label || item[label],
                    };
                }
            }
        };
        this.addValueOptions = (values) => {
            if (values === undefined)
                return values;
            const { data } = this.state;
            if (typeof values === 'object') {
                const newData = [];
                const valueArr = Array.isArray(values) ? values : [values];
                //显示旧数据
                [...valueArr, ...data].forEach((item) => {
                    newData.findIndex((ls) => ls.value == item.value) < 0 && newData.push(item);
                });
                this.setState({ data: newData });
            }
        };
        this.handleChange = (item) => {
            if (this.props.onChange) {
                if (Array.isArray(item)) {
                    const itemData = item.map((item) => {
                        return {
                            ...item,
                            value: item.key,
                            ...(this.state.data.find((ls) => ls.value === item.key) || {}),
                        };
                    });
                    this.props.onChange(itemData);
                }
                else {
                    if (item) {
                        this.props.onChange({
                            ...item,
                            value: item.key,
                            ...(this.state.data.find((ls) => ls.value === item.key) || {}),
                        });
                    }
                    else {
                        //集成清空操作
                        this.props.onChange(item);
                    }
                }
            }
        };
        this.fetchData = lodash.debounce(this.fetchData, 400);
    }
    componentDidMount() {
        const value = this.formaterValue(this.props.value);
        this.setState({ value: value || undefined });
        !this.props.initDataType && this.fetchData('', true);
    }
    render() {
        const { data, fetching, value } = this.state;
        const { selfCom } = this.props;
        return (React.createElement(React.Fragment, null,
            React.createElement(BISelect, Object.assign({ filterOption: false, suffixIcon: React.createElement("img", { className: s.suffixIcon, src: 'https://static.mttop.cn/admin/search.png' }) }, this.props, { value: value, showSearch: true, labelInValue: true, notFoundContent: fetching ? (React.createElement(Spin, { size: "small" })) : (React.createElement("span", { style: { fontSize: '12px' } }, "\u5BF9\u4E0D\u8D77,\u60A8\u67E5\u8BE2\u7684\u6570\u636E\u4E0D\u5B58\u5728\u6216\u5DF2\u88AB\u5220\u9664")), onSearch: this.onSearch, onChange: this.handleChange, onFocus: this.onFocus, onBlur: this.onBlur }), data.map((d) => (React.createElement(BISelect.Option, { key: d.value, value: d.value }, d.label)))),
            selfCom ? selfCom : null));
    }
}
export default AssociationSearch;