import React from 'react';
import { WeaTop, WeaLeftTree } from 'ecCom';
import { toJS } from 'mobx';
import { observer } from 'mobx-react';
import { WeaLocaleProvider } from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class TreeList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            searchValue: ""
        }
    }

    componentWillReceiveProps(nextProps) {

        if (this.props.key !== nextProps.key) {
            this.setState({
                searchValue: ""
            })
        }
    }
    render() {
        const { store, title } = this.props;
        return (
            <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@czdg1p`}
            title={title}
            icon={<i className='icon-coms-project' />}
            iconBgcolor='#217346'
        >
                <div style={{ height: "100%",overflow:"hidden" }}>
                    <WeaLeftTree ecId={`${this && this.props && this.props.ecId || ''}_WeaLeftTree@inxez2`} 
                        searchLabel={getLabel('21979',"全部类型")}
                        datas={toJS(store.treeDatas)}
                        selectedKeys={[store.selectedTreeKey]}
                        counts={store.treeCount}
                        countsType={store.treeCountType}
                        searchValue={this.state.searchValue}
                        onSearchChange={v => {
                            this.setState({
                                searchValue: v
                            })
                        }}
                        onSearchLabelClick ={()=>{
                            //alert("你点击了全部类型")
                            store.getTreeList();
                        }}
                        onSelect={(key,topTabCount,countsType)=>{
                            store.setSelectedTreeKey(key);
                            store.setPrjTypeId({prjtype: topTabCount.keyid});
                        }} 
                     />
                </div>
            </WeaTop>
        )
    }
}