import React from 'react'
import {Row,Button,Col} from "antd";
import { WeaLocaleProvider,WeaInput,WeaSelect } from 'ecCom';
import isEqual from "lodash/isEqual";
import {toJS} from 'mobx';
import {inject, observer} from 'mobx-react';

const getLabel = WeaLocaleProvider.getLabel;

@inject('ldapStore')
@observer
export default class InputSelect extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: props.value || '',
            inputType: props.inputType || 'select',
            selectConfig: props.selectConfig || {},
            inputConfig: props.inputConfig || {},
            isMust: props.isMust || false

        }
    }

    componentDidMount() {
        const { value,inputType,selectConfig,inputConfig,isMust } = this.props;
        this.setState({
            value: value || '',
            inputType: inputType || 'select',
            selectConfig: selectConfig || {},
            inputConfig: inputConfig || {},
            isMust: isMust || false

        });
    }
    componentWillReceiveProps(nextProps) {
        const { value } = this.props;
        const nextValue = nextProps.value;

        const selectConfig = nextProps.selectConfig;
        const inputConfig = nextProps.inputConfig;

        if (!isEqual(value, nextValue) && nextValue) {
            this.setState({value: nextValue});
        }
        this.setState({
            selectConfig: selectConfig || {},
            inputConfig: inputConfig || {}
        });
    }

    buttonClick = (inputType,key) => {
        this.setState({
            inputType,
            value: '',
            isMust: false
        });
        this.props.onChange && typeof(this.props.onChange) == "function" && this.props.onChange("",key);
    }

    render(){

        const { fieldsName = '',isInput = false, showName = '', customInterface=false} = this.props;
        const { value,inputType, isMust} = toJS(this.state);

        let {selectConfig, inputConfig} = toJS(this.state);

        if(isMust){
            return (<Row ecId={`${this && this.props && this.props.ecId || ''}_Row@mev6to`}>{showName}</Row>);
        } else if(isInput || inputType == 'input'){
            inputConfig.value = value;
            return (<nobr style={{"width":"100%"}}>
                    <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@5xtzug`}
                        {...inputConfig}
                        style={{"width":"75%"}}
                        onChange={value => {
                            this.setState({ value ,isMust:false});
                            this.props.onChange && typeof(this.props.onChange) == "function" && this.props.onChange(value,fieldsName);
                        }}
                    />
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@c8bb7b`} style={{marginLeft:10}} type="primary" disabled={isInput} size="small"
                            onClick={() => {this.buttonClick('select',fieldsName);}}>{getLabel(83725, '切换')}</Button>
                </nobr>);
        } else if(!selectConfig || !selectConfig.options || !selectConfig.options.length || selectConfig.options.length == 0){
            inputConfig.value = value;
            return (<nobr style={{"width":"100%"}}>
                <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@dam0xq`}
                    {...inputConfig}
                    style={{"width":"75%"}}
                    onChange={value => {
                        this.setState({ value ,isMust:false});
                        this.props.onChange && typeof(this.props.onChange) == "function" && this.props.onChange(value,fieldsName);
                    }}
                />
            </nobr>);
        }else{
            selectConfig.value = value;
            return (<nobr style={{"width":"100%"}}>
                <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@dqyiz9`}
                    {...selectConfig}
                    style={{"width":"75%"}}
                    onChange={(value, k)=> {
                        this.setState({value,isMust:false});
                        this.props.onChange && typeof(this.props.onChange) == "function" && this.props.onChange(value,fieldsName);
                    }}
                />
                <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@iqupjv`} disabled={customInterface} style={{marginLeft:10}} type="primary" size="small"
                        onClick={() => {this.buttonClick('input',fieldsName)}}>{getLabel(83725, '切换')}</Button>
            </nobr>);
        }
    }
}