/*
 * @Author: lusx 
 * @Date: 2020-03-03 09:17:39 
 * @Last Modified by: lusx
 * @Last Modified time: 2020-04-24 16:50:30
 */
import React from "react";
import { Input, Menu } from "antd";
import { withRouter } from 'react-router';
import { WeaLocaleProvider } from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
@withRouter
export default class Content extends React.Component {
    static defaultProps = {
        //React.PureComponent
        prefixCls: 'prj-select',
        hasSearch: true,
        hasAll: true,
        notFoundContent: "无匹配项",
        goText: "查看所有项目"
    };
    constructor() {
        super();
        this.state = { value: '' }
    }
    componentWillUnmount() {
        this.setState({ value: '' })
    }
    render() {
        const { options, prefixCls, hasSearch , hasAll , _inputChangeFun, onChange, notFoundContent, goText, _clearFun, selectedKey } = this.props;
        // console.log("options--",options)
        const { value } = this.state;
        return (
            <div className={`${prefixCls}-filterable-menu`}>
                {hasSearch && <div className="search-input-wrapper input-area">
                    <div role="presentation" class="text-input ui-input ui-icon-input search-input search-input">
                        <span className="icon--fangdajing icon iconfont ui-icon icon-search ui-input-icon"></span>
                        <Input ecId={`${this && this.props && this.props.ecId || ''}_Input@gagg3s`} placeholder={getLabel('518317','搜索项目')} id={`${prefixCls}-input`} value={value} onChange={() => { _inputChangeFun(); this.inputChange() }} />
                        {value.length != 0 &&
                            <div className="search-input-clear-icon-wrapper" onClick={() =>{this.clearFun();_clearFun();}}>
                                <span className="icon-guanbi icon iconfont anticon-close-circle search-input-clear-icon"></span>
                            </div>
                        }
                    </div>
                </div>}
                <div className="menu-area">
                    <Menu ecId={`${this && this.props && this.props.ecId || ''}_Menu@bazxrn`} defaultSelectedKeys={[selectedKey]} style={{ width: 220 }} mode="horizontal" onClick={({ key }) => this._onChange({ key })}>
                        {
                            options.menus && options.menus.map(item => (
                                <Menu.ItemGroup ecId={`${this && this.props && this.props.ecId || ''}_MenuGroup@3k6i40@${item.key}`} key={item.key} title={item.showname} >
                                    {
                                        item.datas.length > 0 ? item.datas && item.datas.map(i => (
                                            <Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_MenuItem@66739j@${i.id}`} key={i.id} ><a>{i.name}</a></Menu.Item>
                                        )) : <Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_MenuItem@o6i25y`} key="noone"><a className={`${prefixCls}-noone`}>{notFoundContent}</a></Menu.Item>
                                    }
                                </Menu.ItemGroup>
                            ))
                        }
                    </Menu>
                    {hasAll && <a class="view-all" onClick={this.allFun}>
                        {getLabel('518319','查看所有项目')}({options.total})
                        <span className="icon--youjiantou icon iconfont"></span>
                    </a>}
                </div>
            </div>
        )
    }
    inputChange = (ev) => {
        const oEvent = ev || event;
        oEvent.preventDefault();
        this.setState({
            value: oEvent.target.value,
        });
    }
    clearFun = () => {
        this.setState({ value: '' })
    }
    _onChange = (id, ev) => {
        const { handleVisibleChange, _clearFun } = this.props;
        if (id.key === "noone") {
            handleVisibleChange(false);
            return false;
        }
        const oEvent = ev || event;
        oEvent.preventDefault();
        this.props.onChange(id.key)
        handleVisibleChange(false);
        _clearFun();
        this.setState({ value: '' });
    }
    allFun = () => {
        this.props.router.push({pathname: "/main/prj/portal"});
    }
}