/*
 * @Author: lusx 
 * @Date: 2020-03-02 14:51:29 
 * @Last Modified by: lusx
 * @Last Modified time: 2020-05-20 11:14:53
 */
import React from 'react';
import { Popover } from 'antd';
import {WeaTools} from 'ecCom';
import classnames from 'classnames';
import Content from "./content";
import { toJS } from "mobx";
import _ from "lodash";
import "./prjSelect.less";
import { WeaLocaleProvider } from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
const { ls } = WeaTools;
export default class PrjSelect extends React.Component {
    static defaultProps = {
        prefixCls: 'prj-select'
    };
    constructor() {
        super();
        this.state = { open: false, copyOPtions: {}, options: {} };
        this.total = 0;
    }
    componentDidMount() {
        const { value } = this.props;
        const prjdatas = toJS(ls.getJSONObj("prj_portal_datas"));
        const total = toJS(ls.getJSONObj("prj_portal_count"));
        this.total = total;
        const options = { menus: prjdatas, total: this.total };
        this.setState({ options });
    }

    render() {
        const { prefixCls, onChange, value, title } = this.props;
        let selected = title;
        const prjdatas = toJS(ls.getJSONObj("prj_portal_datas"));
        prjdatas.forEach(data=>{
            data.datas.length > 0 && data.datas.forEach(d=>{
                if(d.id == value) {
                    selected = d.name;
                    return false;
                }
            })
        })
        const { open, options } = this.state;
        const iconClass = classnames({
            'icon-jiantou-xia': !open,
            'icon-jiantou-shang': open
        });
        return (
            <Popover ecId={`${this && this.props && this.props.ecId || ''}_Popover@lxz0xu`}
                content={<Content ecId={`${this && this.props && this.props.ecId || ''}_Content@w8w0pp`} options={options} _inputChangeFun={this._inputChangeFun} _clearFun={this._clearFun} onChange={onChange} handleVisibleChange={this.handleVisibleChange} selectedKey={value} />}
                trigger="click"
                visible={open}
                arrowPointAtCenter
                onVisibleChange={this.handleVisibleChange}
            >
                <div className={`${prefixCls}-wraps`}>
                    <div className={`${prefixCls}-dropdown-select ${prefixCls}-project_select`}>
                        <span className={`${prefixCls}-dropdown-select-label`}>{getLabel('101','项目')}：</span>
                        <div className={`${prefixCls}-dropdown-select-selected-item`}>
                            <div className={`${prefixCls}-dropdown-select-selected-item-menu`} onClick={this.clickFun}>
                                <a>{selected}</a>
                            </div>
                            <span className={`${iconClass} icon iconfont`}></span>
                        </div>
                    </div>

                </div>
            </Popover>
        );
    }
    handleVisibleChange = (visible) => {
        this.setState({ open: visible });
    }
    clickFun = (ev) => {
        const oEvent = ev || event;
        oEvent.preventDefault();
        this.setState(pre => ({ open: !pre.open }));
    }
    _inputChangeFun = (ev) => {
        const oEvent = ev || event;
        oEvent.preventDefault();
        const prjdatas = toJS(ls.getJSONObj("prj_portal_datas"));
        const options = { menus: prjdatas, total: this.total };
        if (oEvent.target.value.length > 0) {
            let searchListDatas = { menus: [] };
            options.menus.map((m, index) => {
                let ff = m.datas.filter(i =>
                    i.name.includes(oEvent.target.value)
                )
                searchListDatas.menus[index] = { showname: m.showname, datas: ff, key: m.key };
            }
            )
            searchListDatas = Object.assign({ ...searchListDatas }, { total: this.total });
            this.setState({ options: searchListDatas })
        } else {
            this.setState({ options });
        }

    }

    _clearFun = () => {
        const prjdatas = toJS(ls.getJSONObj("prj_portal_datas"));
        const options = { menus: prjdatas, total: this.total };
        this.setState({ options });
    }

}