import React, {
    Component
} from 'react';
import {
    WeaTab,
    WeaSearchGroup,
    WeaInput,
    WeaFormItem
} from 'ecCom';
import {
    WeaSwitch
} from 'comsMobx'
import {
    observer
} from 'mobx-react';
import {
    Button
} from 'antd';
import * as mobx from 'mobx';
const toJS = mobx.toJS;

export default class Tabs extends Component {
    constructor(props) {
        super(props);
        this.state = {
            showSearchAd: false
        };
    }

    doSearch = () => {
        const {
            store
        } = this.props;
        const {
            conditionForm,
            doSearch
        } = store;
        doSearch(conditionForm.getFormParams());
        this.setState({
            showSearchAd: false
        });
    }

    doReset = () => {
        const {
            store
        } = this.props;
        const {
            conditionForm
        } = store;
        conditionForm.resetForm();
    }

    doCancel = () => {
        const {
            store
        } = this.props;
        const {
            conditionForm
        } = store;
        conditionForm.resetForm();
        this.setState({
            showSearchAd: false
        });
    }

    getTabButtonsAd() {
        return [
            (<Button type="primary" onClick={this.doSearch}>搜索</Button>),
            (<Button type="ghost" onClick={this.doReset}>重置</Button>),
            (<Button type="ghost" onClick={this.doCancel}>取消</Button>)
        ]
    }

    rednerFormItem = (conditionForm, conditionFormFields) => {
        const fields = toJS(conditionFormFields);
        if (fields.length === 0 || !this.state.showSearchAd)
            return [];
        else {
            let arr = [];
            fields.map(c => {
                let _arr = [];
                c.items.map((field, index) => {
                    _arr.push({
                        com: (
                            <WeaFormItem
                                label={`${field.label}`}
                                labelCol={{span: `${field.labelcol}`}}
                                error={conditionForm.getError(field)}
                                wrapperCol={{span: `${field.fieldcol}`}}
                            >
                                <WeaSwitch fieldConfig={field} form={conditionForm}/>
                            </WeaFormItem>
                        ),
                        colSpan: 1
                    })
                })
                arr.push(<WeaSearchGroup needTigger={true} title={c.title} showGroup={c.defaultshow} items={_arr} col={2} fontSize={13}/>);
            })
            return arr;
        }
    }

    renderTabNav = () => {
        const {
            tabConfig,
            defaultActiveIndex,
            tabBtnDef,
            store
        } = this.props;
        const {
            conditionForm,
            conditionFormFields,
            doSearch,
            searchKey,
            onTabEdit
        } = store;
        let searchsAd = this.rednerFormItem(conditionForm, conditionFormFields);
        const tabIndex = tabConfig.tabs.length < defaultActiveIndex ? 0 : defaultActiveIndex;

        return (
            <WeaTab
                type='editable-inline'
                datas={tabConfig.tabs}
                buttons={tabBtnDef}
                keyParam={tabConfig.keyParam}
                onChange={tabConfig.tabChangeHandle}
                selectedKey={tabIndex}
                searchType={tabConfig.tabs[tabIndex].searchType}
                showSearchAd={this.state.showSearchAd}
                setShowSearchAd={bool=>{
                    this.setState({
                        showSearchAd: bool
                    })
                }}
                buttonsAd={this.getTabButtonsAd()}
                searchsAd={searchsAd}
                onSearch={value => {
                    doSearch({[searchKey]: value})
                  }}
                onEdit={onTabEdit}
            />
        )
    }

    renderTabContent = () => {
        const {
            defaultActiveIndex,
            children,
            rightMenu,
            store
        } = this.props;
        if (Array.isArray(children)) {
            return React.cloneElement(children[defaultActiveIndex], {
                rightMenu,
                defaultActiveIndex,
                store
            });
        } else {
            return React.cloneElement(children, {
                rightMenu,
                defaultActiveIndex,
                store
            });
        }
    }

    render() {
        return (
            <div>
                {this.renderTabNav()}
                {this.renderTabContent()}
            </div>
        );
    }
}