import React, {
    Component
} from 'react';
import {
    WeaTab,
    WeaLocaleProvider
} from 'ecCom';
import {
    observer
} from 'mobx-react';
import {
    Button
} from 'antd';
import AdvanceSearchFormInfo from './AdvanceSearchFormInfo';
import cloneDeep from 'lodash/cloneDeep';
const getLabel = WeaLocaleProvider.getLabel;

const calFormHeight = (groupLength, children) => {
    let childrenLength = 0;
    children.map(c => {
        if (c.colSpan != null) {
        childrenLength += c.colSpan == 2 ? 1 : 2;
        } else
        childrenLength += 1;
    })
    let height = (childrenLength / 2 + childrenLength % 2) * 52 + 10;
    if (groupLength > 1)
        height += groupLength * 45;
    if (height > 300)
        return 300;
    return height;
}

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

    componentWillReceiveProps(nextProps) {
        this.setState({
            showSearchAd: false,
        })
    }

    doSearch = () => {
        const {
            conditionForm,
            tabConfig,
            activeTabInfo,
        } = this.props;

        let tabInfo = tabConfig.tabs[activeTabInfo.activeTabIndex];
        tabInfo.doSearch(conditionForm.getFormParams());
        this.setState({
            showSearchAd: false
        });
    }

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

    doCancel = () => {
        this.setState({
            showSearchAd: false,
        });
    }

    getTabButtonsAd() {
        return [
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@h0rwb1@1`} type="primary" onClick={this.doSearch}>{getLabel(82529, '搜索')}</Button>),
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@qfvwa2@2`} type="ghost" onClick={this.doReset}>{getLabel(27088, '重置')}</Button>),
            (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@azojac@3`} type="ghost" onClick={this.doCancel}>{getLabel(32694, '取消')}</Button>)
        ]
    }

    renderForm = () => {
        const {
            conditionForm,
            conditionFormFields,
            itemRender
        } = this.props;
        const {
            isFormInit
        } = conditionForm;
        if (isFormInit)
            return <AdvanceSearchFormInfo ecId={`${this && this.props && this.props.ecId || ''}_AdvanceSearchFormInfo@goih39`} form={conditionForm} formFields={conditionFormFields} itemRender={itemRender}/>
        else
            return '';
    }

    initTab = (props) => {
        return React.cloneElement(<WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@lrdwmh`}/>, {
            ...props
        });
    }

    renderTabNav = () => {
        //data
        const {
            activeTabInfo,
            tabConfig,
            tabChangeHandle,
            tabBtnDef,
            conditionForm,
            conditionFormFields,
            advanceHeight,
            store
        } = this.props;

        let tabInfo = tabConfig.tabs[activeTabInfo.activeTabIndex];
        let tabsData = cloneDeep(tabConfig.tabs) || [];
        tabsData != null && tabsData.map(tab => {
            if (typeof(tab.title) == 'function')
                tab.title = tab.title();
            delete tab.topButtonDef;
            delete tab.tabButtonDef;
        });
        let tabProps = {
            type: 'editable-inline',
            datas: tabsData,
            keyParam: tabConfig.keyParam,
            selectedKey: tabConfig.activeTabKey,
            onChange: tabChangeHandle
        }
        tabBtnDef && Object.assign(tabProps, {
            buttons: tabBtnDef
        });
        const searchType = tabInfo.searchType || [];
        if (searchType.length > 0) {
            Object.assign(tabProps, {
                searchType: searchType,
                onSearch: (value) => {
                    if (searchType.indexOf('advanced') >= 0) {
                        tabInfo.doSearch(conditionForm.getFormParams());
                    } else {
                        tabInfo.doSearch({
                            [tabInfo.searchKey]: value
                        });
                    }
                }
            });
            if (searchType.indexOf('advanced') >= 0 && conditionForm != null && conditionForm.isFormInit) {
                const formParams = conditionForm.getFormParams();
                Object.assign(tabProps, {
                    searchsBaseValue: formParams[tabInfo.searchKey] || '',
                    showSearchAd: this.state.showSearchAd,
                    setShowSearchAd: (bool) => {
                        this.setState({
                            showSearchAd: bool
                        })
                    },
                    onSearchChange: (value) => conditionForm.updateFields({
                        [tabInfo.searchKey]: {
                            value
                        }
                    }, false),
                    buttonsAd: this.getTabButtonsAd(),
                    searchsAd: <div
                        onKeyDown={(e) =>{
                           if (e.keyCode == 13 && e.target.tagName === "INPUT") {
                            tabInfo.doSearch(conditionForm.getFormParams());
                            this.setState({
                                showSearchAd: false
                            })
                           } 
                        }}
                    >{this.renderForm()}</div>
                });

                Object.assign(tabProps, {
                    //advanceHeight: calFormHeight(conditionFormFields.length, _.keys(formParams).length)
                    advanceHeight: advanceHeight ? advanceHeight : calFormHeight(conditionFormFields.length, conditionForm.fieldArr)
                });
            }
        }
        tabConfig.onTabEdit && Object.assign(tabProps, {
            onEdit: tabConfig.onTabEdit
        });

        return this.initTab(tabProps);
    }

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

    render() {
        const {
            tabConfig
        } = this.props;
        return (
            <div style={{width: '100%', height: '100%'}}>
                {tabConfig.tabs.length > 0 && this.renderTabNav()}
                {tabConfig.tabs.length > 0 && this.renderTabContent()}
            </div>
        );
    }
}