import React, {
	Component
} from 'react';
import { observer } from 'mobx-react';
import { toJS } from 'mobx';
import {
    WeaDialog,
	WeaTransfer,
    WeaSelect,
    WeaInputSearch,
    WeaLocaleProvider
} from 'ecCom';
import {Spin} from 'antd';
import {cloneDeep} from 'lodash';
const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class FieldSetting extends Component {
	constructor(props) {
        super(props);
        this.state = {
            options: [
                {
                    key: "0",
                    selected: true,
                    showname: ""
                },{
                    key: "1",
                    selected: false,
                    showname: ""
                }
            ],
            keyFieldOptions: [
                {
                    key: "1",
                    selected: true,
                    showname: ""
                },{
                    key: "2",
                    selected: false,
                    showname: ""
                },{
                    key: "3",
                    selected: false,
                    showname: ""
                }
            ],
            t: new Date().getTime()
        }
    }

    renderItem = (item) => {
        const {
            store
        } = this.props;
        const {_setRealPath, _realPath, _keyfield, _setKeyField} = store;
        //departmentid 部门 subcompanyid1 分部
        if(['departmentid', 'subcompanyid1'].indexOf(item.id) > -1){
            let options = cloneDeep(this.state.options);
            options[0].showname = item.id === 'departmentid' ? getLabel('18916',"仅本部门") : getLabel('18919',"仅本分部");
            options[1].showname = item.id === 'departmentid' ? getLabel('388381',"部门全路径") : getLabel('388382',"分部全路径");
            return (
                <div className='item'>
                    <div className='left'>
                        <div className='info'>{item.name}</div>
                        <div className='info info-module'>{item.gName}</div>
                    </div>
                    <div className='right'>
                        <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@n0pgyp`} options={options} value={item.id === 'departmentid' ? _realPath.depRealPath : _realPath.subCompRealPath} onChange={v => {_setRealPath(item.id === 'departmentid', v);this.setState({t: new Date().getTime()})}}/>
                    </div>
                </div>
            )
        }else if(item.id === 'managerid'){
            let options = cloneDeep(this.state.keyFieldOptions);
            options[0].showname = getLabel('714',"编号");
            options[1].showname = getLabel('412',"登录名");
            options[2].showname = getLabel('25034',"姓名");
            return (
                <div className='item'>
                    <div className='left'>
                        <div className='info'>{item.name}</div>
                        <div className='info info-module'>{item.gName}</div>
                    </div>
                    <div className='right'>
                        <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@4syqpd`} options={options} value={_keyfield} onChange={_setKeyField}/>
                    </div>
                </div>
            )
        }
        return (
            <div className='item'>
                <div className='name'>{item.name}</div>
                <div className='name name-module'>{item.gName}</div>
            </div>
        )
    }

	render() {
        const {t} = this.state;
		const {
            store
        } = this.props;
        const {
            refreshTransfer,
            getDialogBtn,
            getTransferData,
            selectOptions,
            _setSelectedGroup,
            _getSelectedGroup,
            _filterLeft,
            _filterRight,
            _searchField,
            _onTransChange,
            fieldSettingEditDialogParams,
            _selectedKeys,
        } = store;
        const {buttons, menus} = getDialogBtn('fieldSettingEdit');
        const transferProps = {
            height: 425,
            data: getTransferData(),
            leftHeader: (
                <div className='header'>
                    <div className='title text-elli'>{getLabel(83302, '待选')}</div>
                    <div className='options'>
                        <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@oqsvqw`} options={selectOptions} onChange={v => {_setSelectedGroup(v);this.setState({t: new Date().getTime()})}}/>
                    </div>
                    <div className='search'>
                        <WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@0wupbx`} onSearchChange={v => _searchField(v)} onSearch={v => _searchField(v)}/>
                    </div>
                </div>
            ),
            rightHeader: (
                <div className='header'>
                    <div className='title text-elli'>{getLabel(83303, '已选')}</div>
                    <div className='search'>
                        <WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@v75emq`} onSearchChange={v => _searchField(v, false)} onSearch={v => _searchField(v, false)} />
                    </div>
                </div>
            ),
            renderItem: this.renderItem,
            filterLeft: (items) => {
                const groupInfo = _getSelectedGroup();
                items = items.filter((item) => {
                    if(groupInfo.key === '0'){
                        return (_filterLeft === '' ? true : (item.name.indexOf(_filterLeft) != -1));
                    }else{
                        return item.gName === groupInfo.showname && (_filterLeft === '' ? true : (item.name.indexOf(_filterLeft) != -1));
                    }
                })
                return items;
            },
            filterRight: (items) => {
                items = items.filter((item) => {
                    return _filterRight === '' ? true : (item.name.indexOf(_filterRight) != -1);
                })
                return items;
            },
            onChange: _onTransChange,
            selectedKeys: _selectedKeys
        }
       

		return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@8daakn`} {...fieldSettingEditDialogParams} buttons={buttons} moreBtn={{datas: menus}}>
                <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@n4t6lf`} spinning={this.props.store.spinning}>
                    <WeaTransfer ecId={`${this && this.props && this.props.ecId || ''}_WeaTransfer@7l2rp4`} {...transferProps}/>
                </Spin>
            </WeaDialog>
		)
	}
}