import React from 'react'
import { Select,Input,InputNumber,Button,DatePicker } from 'antd';

import moment from 'moment';


const Option = Select.Option;
const text = [
    'BINARY',

    'CHAR',
    'GEOMETRY',
    'GEOMETRYCOLLECTION',
    'JSON',
    'LINESTRING',
    'LONGBLOB',
    'LONGTEXT',
    'MEDIUMBLOB',
    'MEDIUMINT',
    'MEDIUMTEXT',
    'MULTILINESTRING',
    'MULTIPOINT',
    'MULTIPOLYGON',
    'POINT',
    'POLYGON',
    'REAL',
    'DECIMAL',
    'ENUM',
    'SET',
    'TEXT',
    'TINYBLOB',
    'TIBYTEXT',
    'VARBINARY',
    'VARCHAR',
  ];
  const number = ['BIGINT', 'DOUBLE', 'FLOAT', 'INT', 'INTEGER', 'NUMERIC', 'SMALLINT', 'TINYINT'];
  const data = ['DATE', 'DATETIME', 'TIME', 'TIMESTAMP', 'YEAR'];

export default class QueryItem extends React.Component {
    constructor(props) {
        super(props);
        const value = props.value || {};
        this.state = {
            stringX:value.stringX,
            string:value.string,
            disabled:value.disabled||false
        };
    }

    componentWillReceiveProps(nextProps) {
        // Should be a controlled component.
        if ('value' in nextProps) {
            const value = nextProps.value;
            this.setState(value);
        }
    }

    triggerChange = (changedValue) => {
        // Should provide an event to pass value to Form.
        const onChange = this.props.onChange;
        if (onChange) {
            onChange(Object.assign({}, this.state, changedValue));
        }
    };

    changeNumber=(e)=>{

        if (!('value' in this.props)) {
            this.setState({ string:e});
        }
        this.triggerChange({ string:e});
    };
    changeStringX=(e)=>{
        var disabled = false

        if(e=="IS NOT NULL"||e=="IS NULL"){
            disabled=true;

        }
        if (!('value' in this.props)) {
            this.setState({ stringX:e ,disabled});
        }

        this.triggerChange({ stringX:e ,disabled});
    };
    changeString=(e)=>{

        if (!('value' in this.props)) {
            this.setState({ string:e.target.value });
        }
        this.triggerChange({ string:e.target.value });
    };
    changeDate=(date)=>{

        if (!('value' in this.props)) {
            this.setState({ string:date.format("YYYY-MM-DD HH:mm:ss")});
        }
        this.triggerChange({ string:date.format("YYYY-MM-DD HH:mm:ss") });
    };
    render() {
        const{obj} = this.props;
        const {string,stringX,disabled} =this.state;
        if(obj.options && obj.options.length>0){
           return(<div> <Select onChange={this.changeStringX}
                                value={stringX||"="}
                                style={{width:100}}>
             <Option value="=" key={'='}>
               等于
             </Option>
             <Option value="<>" key={'<>'}>
               不等于
             </Option>
             <Option value="IS NOT NULL" key={'IS NOT NULL'}>
               不为空
             </Option>
             <Option value="IS NULL" key={'IS NULL'}>
               为空
             </Option>
            </Select>
           {disabled?"": <span style={{padding: '0px 10px'}}>
            <Select onChange={this.changeNumber}
                    value={string}
                    style={{width:200}}>
                {obj.options.map((r)=><Option key={r.v}
                                              value={r.v}>
                  {r.l}
                </Option>)}

                </Select>
             </span>}
             <Button type="danger" onClick={this.props.deleteQuery}>删除</Button>

            </div>)
        }
        if(text.includes(obj.type)){
        return (
            <div>
            <Select onChange={this.changeStringX}
                    value={stringX||"="}
                    style={{width:100}}>
                <Option value="=" key={'='}>
                  等于
                </Option>
                <Option value="!=" key={'!='}>
                  不等于
                </Option>
                <Option value="like" key={'link'}>
                  像
                </Option>
                <Option value="IS NOT NULL"
                        key={'IS NOT NULL'}
                >
                  不为空
                </Option>
                <Option value="IS NULL"
                        key={'IS NULL'}
                >
                  为空
                </Option>
            </Select>
            {disabled?"": <span style={{padding: '0px 10px'}}>
                <Input onChange={this.changeString}
                       placeholder="请输入"
                       value={string}
                       style={{width:200,}}
            />
              </span>}
              <Button type="danger" onClick={this.props.deleteQuery}>删除</Button>

                 </div>)

         }else if(number.includes(obj.type)){
            return ( <div> <Select onChange={this.changeStringX}
                                   value={stringX||"="}
                                   style={{width:100}}>
              <Option value="=" key={'='}>
                等于
              </Option>
              <Option value="<>" key={'<>'}>
                不等于
              </Option>
              <Option value=">" key={'>'}>
                大于
              </Option>
              <Option value=">=" key={'>='}>
                大于等于
              </Option>
              <Option value="<" key={'<'}>
                小于
              </Option>
              <Option value="<=" key={'<='}>
                小于等于
              </Option>
              <Option value="IS NOT NULL" key={'IS NOT NULL'}>
                不为空
              </Option>
              <Option value="IS NULL" key={'IS NULL'}>
                为空
              </Option>
            </Select>
            {disabled?"": <span style={{padding: '0px 10px'}}>
            <InputNumber onChange={this.changeNumber}
                         placeholder="请输入"
                         value={string}
                         style={{width:200}}
            />
              </span>}
              <Button type="danger" onClick={this.props.deleteQuery}>删除</Button>
            </div>)
         }else if(obj.type === "BIT"){
            return ( <div>
              <Select onChange={this.changeStringX}
                     value={stringX||"="}
                      style={{width:100}}>
                <Option value="=" key={'='}>
                  等于
                </Option>
                </Select>
                {disabled?"":  <span style={{padding: '0px 10px'}}>
                <Select onChange={this.changeNumber}
                        value={string}
                        style={{width:200}}
                >
                <Option value={true}
                        key={'true'}
                >
                  是
                </Option>
                <Option value={false}
                        key={'false'}
                >
                  否
                </Option>
                </Select>
              </span>}
              <Button type="danger" onClick={this.props.deleteQuery}>删除</Button>
            </div>)
        }else if(data.includes(obj.type)){
            return(<div>
              <Select onChange={this.changeStringX}
                      value={stringX||"="}
                      style={{width:100}}>
                <Option value="=" key={'='}>
                  等于
                </Option>
                <Option value="<>" key={'<>'}>
                  不等于
                </Option>
                <Option value=">" key={'>'}>
                  大于
                </Option>
                <Option value=">=" key={'>='}>
                  大于等于
                </Option>
                <Option value="<" key={'<'}>
                  小于
                </Option>
                <Option value="<=" key={'<='}>
                  小于等于
                </Option>
                <Option value="IS NOT NULL" key={'IS NOT NULL'}>
                  不为空
                </Option>
                <Option value="IS NULL" key={'IS NULL'}>
                  为空
                </Option>
            </Select>
            {disabled?"": <span style={{padding: '0px 10px'}}>
              <DatePicker onChange={this.changeDate}
                        showTime
                        format="YYYY-MM-DD HH:mm:ss"
                          allowClear={false}
                          style={{width:200}}
                          value={string?moment(string):null}
              />
              </span>}
              <Button type="danger" onClick={this.props.deleteQuery}>删除</Button>
                </div>)

        }else{
            return (<span>暂无法处理</span>)
         }


    }
}
