import React from 'react';

import Validator from '../index';

import Message from '../../message/index';
import Input from '../../input/index';

export default class demoMsg extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      msgEl: null
    };

    this.showErrMsg1 = this.showErrMsg1.bind(this);
    this.showErrMsg2 = this.showErrMsg2.bind(this);
  }

  showErrMsg1(data) {
    console.log(data);

    if (data.isValid) {
      Message.success('校验通过');
    } else {
      Message.alert(data.msgs[0]);
    }
  }

  showErrMsg2(data) {
    console.log(data);

    this.setState({
      msgEl: data.msgEl
    });
  }

  render() {
    return (
      <Validator>
        <Input
          name="field1"
          placeholder="用Message组件弹出信息"
          data-required
          data-placer={this.showErrMsg1}
          data-patterns={[{
            key: 'email',
            msg: '请输入邮箱地址'
          }]}
        />

        <div style={{ marginTop: 20 }}>
          <span>我把校验信息放前面: {this.state.msgEl}</span>
          <Input
            name="field2"
            data-required
            data-placer={this.showErrMsg2}
            data-patterns={[{
              key: 'email',
              msg: '请输入邮箱地址'
            }]}
          />
        </div>
      </Validator>
    );
  }
}