import React from 'react'
import {Button} from "antd";

import {WeaLocaleProvider,WeaCheckbox,WeaDialog,WeaTextarea,WeaSearchGroup,WeaFormItem} from "ecCom";
import isEqual from "lodash/isEqual";

const getLabel = WeaLocaleProvider.getLabel;

export default class LdapFilter extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: props.checkValue || '0',
            filter: props.filterValue || '',
            visible: false
        }
    }

    componentDidMount() {
        const { checkValue, filterValue } = this.props;
        this.setState({
            value: checkValue || '0',
            filter: filterValue || ''
        });
    }
    componentWillReceiveProps(nextProps) {
        const { checkValue, filterValue } = this.props;
        const nextCheckValue = nextProps.checkValue;
        const nextFilterValue = nextProps.filterValue;

        if (!isEqual(checkValue, nextCheckValue) && nextCheckValue) {
            this.setState({checkValue: nextCheckValue });
        }
        if (!isEqual(filterValue, nextFilterValue) && filterValue) {
            this.setState({filterValue:nextFilterValue });
        }
    }

    render() {
        const { checkKey = '',filterKey = '', type = '' ,title = ''} = this.props;
        const { value,filter,visible } = this.state;

        let disabled = !(value && value=='1');
        let submit = !(filter && filter!='');

        return (<nobr>
                    <WeaCheckbox ecId={`${this && this.props && this.props.ecId || ''}_WeaCheckbox@pe1dyo`} fieldName={checkKey} value={value} display='switch' onChange={(value)=>{
                        this.setState({value:value});
                        this.props.onChange && typeof(this.props.onChange) == "function"
                        && this.props.onChange({[filterKey]:filter},checkKey,value);

                    }}></WeaCheckbox>

                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@0s8kmo`} type="primary" disabled={disabled} size="small" onClick={() => {this.setState({visible:true});}}>{getLabel(384164,'条件设置')}</Button>

                    <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@bru9c6`} title={title} onCancel={()=> {this.setState({visible:false});}}
                               visible={visible}
                               style={{width: 700, height: 150}}
                               hasScroll
                               buttons={[
                                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@qxsskp@integrationLdapLdapFilterOk`} type="primary" disabled={submit} onClick={() => {
                                        this.setState({visible:false});
                                        this.props.onChange && typeof(this.props.onChange) == "function"
                                        && this.props.onChange({[checkKey]:value},filterKey,filter);

                                    }}>{getLabel(83446, '确定')}</Button>,
                                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@2p147b@integrationLdapLdapFilterCancel`} type="ghost" onClick={() => {this.setState({visible:false});}}>{getLabel(31129, '取消')}</Button>,
                                ]}
                    >
                        <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@x1ecfi`} center needTigger={false} showGroup={true}>
                            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@m11efr`}
                                label={getLabel(32299,'同步条件')}
                                labelCol={{span: 6}}
                                wrapperCol={{span: 18}}
                            >
                                <WeaTextarea ecId={`${this && this.props && this.props.ecId || ''}_WeaTextarea@3v8plu`}
                                    value={filter}
                                    filedName={filterKey}
                                    viewAttr={3}
                                    minRows={5}
                                    onChange={(value)=>{
                                        this.setState({filter:value});
                                    }}
                                />
                            </WeaFormItem>
                        </WeaSearchGroup>
                    </WeaDialog>
                </nobr>);
    }
}