import React, { Component } from 'react';
import { Col, Row, Icon } from 'antd';

class Feedback extends Component { // eslint-disable-line react/prefer-stateless-function
  state = {
    content: '',
    email: '',
    phone: '',
    buttonDisabled: false,
  };

  constructor(props, context) {
    super(props, context);
  }

  handleContentChange(e) {
    this.setState({ content: e.target.value });
  }

  handleEmailChange(e) {
    this.setState({ email: e.target.value });
  }

  handlePhoneChange(e) {
    this.setState({ phone: e.target.value });
  }

  handleSubmit() {
    if(this.state.content == '') {
      errorNotice('请填写反馈内容', 2);
      return;
    }

    $phone = $.trim(this.state.phone);
    $email = $.trim(this.state.email);

    if($phone.length && $email.length) {
      errorNotice('邮箱/电话必须填写至少一项', 2)
      return false
    }

    if($phone && !/^1[3|4|5|7|8][0-9]\d{8}$/.test($phone) {
      errorNotice('请输入正确的手机号码', 2)
      return false
    }

    const pattern = /^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))$/i
    if ($email && !pattern.test($email)) {
      errorNotice('请输入正确的邮箱', 2)
      return false
    }

    this.setState({ buttonDisabled: true });

    const promise = $.ajax({
      type: 'POST',
      url: '/api/feedbacks',
      dataType: 'json',
      data: {
        content: this.state.content,
        email: this.state.email,
        phone: this.state.phone,
      }
    });

    promise.done((res) => {
      globalHandleResponse(res, () => {
        successNotice('谢谢您的提交，我们会尽快处理~', 3, ()=> {
          window.location.href = '/mobile/help/about';
        }, ()=> {
          this.setState({ buttonDisabled: false });
        });
      }, () => {
        this.setState( { buttonDisabled: false });
      });
    }).fail((err) => {
      this.setState( { buttonDisabled: false });
    });
  }

  render() {
    return (
      <Row>
        <Row className="title">
          <Col span="22" offset="1">
            <p>反馈问题</p>
          </Col>
        </Row>
        <Row class="feedback">
          <Col span="22" offset="1">
            <textarea
              placeholder="您可以将使用中的问题或对功能的需求反馈给我们~"
              onChange= {this.handleContentChange} />
          </Col>
        </Row>
        <Row className="info" type="flex" align="middle">
          <Col span="5" offset="1">
            <p>联系邮箱</p>
          </Col>
          <Col span="17">
            <input type="text" value="" onChange={this.handleEmailChange} />
          </Col>
        </Row>
        <Row className="info" type="flex" align="middle">
          <Col span="5" offset="1">
            <p>联系电话</p>
          </Col>
          <Col span="17">
            <input type="text" value="" onChange={this.handlePhoneChange} />
          </Col>
        </Row>
        <Row className="notice">
          <p>注：联系方式填写任意一项即可</p>
        </Row>
        <Row className="submit">
          <Col span="22" offset="1">
            <button
              onClick={this.handleSubmit}
              className={this.state.buttonDisabled? 'ik-disabled': ''}>
              立即提交</button>
          </Col>
        </Row>
        <Row className="consult">
          <p>
            爱客进销存咨询电话
            <a href="tel:400-867-1101">400-867-1101</a>
          </p>
        </Row>
      </Row>
    );
  }

}

export default Feedback;
