import React from 'react';
import ReactDOM from 'react-dom';
import FormGroup from 'react-bootstrap/lib/FormGroup';
import ControlLabel from 'react-bootstrap/lib/ControlLabel';
import Col from 'react-bootstrap/lib/Col';
import FormControl from 'react-bootstrap/lib/FormControl';
import Overlay from 'react-bootstrap/lib/Overlay';
import Tooltip from 'react-bootstrap/lib/Tooltip';

const styles = {
  root: {
    position: 'relative',
  },
  required: {
    fontSize: 24,
    verticalAlign: 'top',
    lineHeight: '28px',
    color: '#a94442'
  }
};

export default class ReduxTextTwoField extends React.Component {
  static propTypes = {
    meta: React.PropTypes.object,
    input: React.PropTypes.object,
    type: React.PropTypes.string,
    label: React.PropTypes.string,
    required: React.PropTypes.bool,
  };

  constructor(props) {
    super(props);
  }

  render() {
    const { meta, input, type, label, required, ...others } = this.props;
    const error = meta.touched && meta.error;
    const sharedProps = {
      show: !!error,
      container: this,
      target: () => ReactDOM.findDOMNode(this.refs[input.name])
    };
    console.log({...input});
    const tooltip = require('../../../components/Form/ToolTip.scss');
    return (
      <div style={styles.root}>
        <FormGroup controlId={input.name} >
          <FormGroup>
            <Col componentClass={ControlLabel} sm={3}>
              <span style={styles.required}>{required && '* '}</span>{label}：
            </Col>
            <Col componentClass={ControlLabel} sm={2}>
              定位版:
            </Col>
            <Col sm={2} ref="people1" >
              <FormControl ref="ti" placeholder="人数" />
            </Col>
            <Col sm={2} ref="num1" >
              <FormControl placeholder="金额" />
            </Col>
          </FormGroup>
          <FormGroup>
            <Col componentClass={ControlLabel} sm={3} />
            <Col componentClass={ControlLabel} sm={2}>
              商务版:
            </Col>
            <Col sm={2} ref="people2" >
              <FormControl placeholder="人数" />
            </Col>
            <Col sm={2} ref="num2" >
              <FormControl placeholder="金额" />
            </Col>
          </FormGroup>
          <FormGroup>
            <Col componentClass={ControlLabel} sm={3} />
            <Col componentClass={ControlLabel} sm={2}>
              商贸版:
            </Col>
            <Col sm={2} ref="people3" >
              <FormControl placeholder="人数" />
            </Col>
            <Col sm={2} ref="num3" >
              <FormControl placeholder="金额" />
            </Col>
          </FormGroup>
          <FormGroup>
            <Col componentClass={ControlLabel} sm={3} />
            <Col componentClass={ControlLabel} sm={2}>
              DMS:
            </Col>
            <Col sm={2} ref="people4" >
              <FormControl placeholder="人数" />
            </Col>
            <Col sm={2} ref="num4" >
              <FormControl placeholder="金额" />
            </Col>
          </FormGroup>
          <FormGroup>
            <Col componentClass={ControlLabel} sm={3} />
            <Col componentClass={ControlLabel} sm={2}>
              定制版:
            </Col>
            <Col sm={2} ref="people5" >
              <FormControl placeholder="人数" />
            </Col>
            <Col sm={2} ref="num5" >
              <FormControl placeholder="金额" />
            </Col>
          </FormGroup>
          <FormGroup>
            <Col componentClass={ControlLabel} sm={3} />
            <Col componentClass={ControlLabel} sm={2}>
              旺店365:
            </Col>
            <Col sm={2} ref="people6" >
              <FormControl placeholder="人数" />
            </Col>
            <Col sm={2} ref="num6" >
              <FormControl placeholder="金额" />
            </Col>
          </FormGroup>

        </FormGroup>
        {sharedProps.show && <Overlay {...sharedProps} placement="right">
          <Tooltip className={tooltip.tip} id={input.name}>{error}</Tooltip>
        </Overlay>}
      </div>
    );
  }
}
