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(),
            dh: 520
        }
    }

    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@22orqa`} 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@5kx3tt`} 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,
            showGroup,
            getDialogBtn,
            getTransferData,
            selectOptions,
            setSelectedGroup,
            getSelectedGroup,
            filterLeft,
            filterRight,
            searchField,
            onTransChange,
            formTarget,
            fieldSettingDialogParams,
            selectedKeys,
            templates,
            selectedTemplate,
            loadTemplateFields
        } = store;
        let templateList = [];
        if(templates && templates.length > 0){
            templateList.push(
                {
                    key: '-1',
                    selected: false,
                    showname: ''
                }
            )
            templates.map((data, index) => {
                templateList.push(
                    {
                        key: index.toString(),
                        selected: false,
                        showname: data.name
                    }
                )
            })
        }
        const {buttons, menus} = getDialogBtn('fieldSetting');
        const transferProps = {
            height: this.state.dh - 100,
            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@oy3boo`} 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@zas683`} onSearchChange={v => searchField(v)} onSearch={v => searchField(v)}/>
                    </div>
                </div>
            ),
            rightHeader: (
                <div className='header'>
                    <div className='title text-elli'>{getLabel(83303, '已选')}</div>
                    <div className='options'>
                        <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@0ykjzr`} options={templateList} value={selectedTemplate} onChange={v => {loadTemplateFields(v);this.setState({t: new Date().getTime()})}}/>
                    </div>
                    <div className='search'>
                        <WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@zupnvg`} 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
        }
        const {
            saveForm,
            saveFormFields
        } = formTarget;

		return (
            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@kuv990`} {...fieldSettingDialogParams} onChangeHeight={(h) => this.setState({dh: h})} buttons={buttons} moreBtn={{datas: menus}}>
                <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@p3us5q`} spinning={this.props.store.spinning}>
                    <WeaTransfer ecId={`${this && this.props && this.props.ecId || ''}_WeaTransfer@xlikc8`} {...transferProps}/>
                </Spin>
            </WeaDialog>
		)
	}
}