import {
	observer
} from 'mobx-react';
import {
	WeaTransfer,
	WeaInputSearch,
	WeaSelect
} from 'ecCom';
import {
	toJS
} from 'mobx';
import isEmpty from 'lodash/isEmpty'
import {
    Spin
} from 'antd'

@observer
export default class Customization extends React.Component {
	constructor(props) {
		super(props);
	}

	rightHeader = () => {
    

		const {
			store
		} = this.props, {
			transfer,
			inputSearchStyle,
			search,
			customTemplates,
			templates,
			searchTemplateId,
			customTemplateId
		} = store, {
			transferRightIptVal,
		} = transfer;
        return (
            <div className="trasfer-header">
                <span>已选</span>
                <WeaInputSearch
                    style={inputSearchStyle}
                    value={transferRightIptVal}
                    onSearchChange={store.updateTransferRightptVal}
                />
               <WeaSelect
                    style={store.selectStyle}
                    options={search ? templates : customTemplates}
                    value={search ? searchTemplateId : customTemplateId}
                    onChange={v => store.getTemplateSelectKeys(v)}
                /> 
            </div>
        )
    }


	render() {
		const {
			store
		} = this.props, {
			TRANSFER,
			transfer,
			leftHeader,
			rightHeader,
			searchDialog,
			search
		} = store, {
			transferDatas,
			transferKeys
		} = transfer;


		return (
			<div className='customization' style={{ padding: 20 }}>
				{
					!searchDialog.loading  ? <WeaTransfer
					{...TRANSFER}
					data={toJS(transferDatas)}
					selectedKeys={toJS(transferKeys)}
					leftHeader={leftHeader}
					rightHeader={rightHeader}
				/> :  <div className='hrm-loading-center-small' style={{ top: '25%' }}>
				<Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@lbktzb`} spinning={searchDialog.loading}></Spin>
			</div>
				}
				
			</div>
		);
	}
}