import React from 'react';
import { Modal, message, layout, Spin, Input, Button, Form, Row, Col, Radio, Select } from 'antd';
import ajax from 'jquery/src/ajax/xhr.js';
import $ from 'jquery/src/ajax';
const FormItem = Form.Item;

const AddContact = React.createClass({
  getInitialState() {
    return {
      addcontactModul: false,
      major: 0,
    }
  },
  addcontactModulOK() {
    this.setState({
      addcontactModul: false
    })
    this.props.closeFollow(true, true)
  },
  addcontactModulcancel() {
    this.setState({
      addcontactModul: false
    })
    this.props.closeFollow(false, false)
  },
  //新增联系人保存函数
  submitcontactman(e) {
    e.preventDefault();
    if (/.*[\u4e00-\u9fa5]+.*$/.test(this.state.newname)) {
    } else {
      message.error("请填写正确的姓名，且至少包含一个汉字");
      return;
    };
    // if (this.state.newmobile.length != 11) {
    //   message.error('请填写正确的手机号码');
    //   return
    // }
    if (!(/^1[3-9]\d{9}$/.test(this.state.newmobile))) {
      message.error('请填写正确的手机号码');
      return
    }
    if (/.*[\u4e00-\u9fa5]+.*$/.test(this.state.newdepatrment)) {
    } else {
      message.error("请填写正确的部门，且至少包含一个汉字");
      return;
    };
    if (/.*[\u4e00-\u9fa5]+.*$/.test(this.state.newposition)) {
    } else {
      message.error("请填写正确的职位，且至少包含一个汉字");
      return;
    };
    this.setState({
      loading: true
    })
    $.ajax({
      method: "post",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/customer/addOneContact",
      data: {
        uid: this.state.uid,
        name: this.state.newname,
        mobile: this.state.newmobile,
        email: this.state.newemail,
        fixedTel: this.state.fixedTelModal,
        major: this.state.major,
        wechat: this.state.newwechat,
        department: this.state.newdepatrment,
        position: this.state.newposition,
        sex: this.state.newsex,
        qq: this.state.newqq
      },
      success: function (data) {
        if (!data.error.length) {
          message.success('添加成功')
          this.addcontactModulOK()
          this.setState({
            loading: false,
          })
        } else {
          message.warning(data.error[0].message);
        };
      }.bind(this)
    });
  },
  componentWillReceiveProps(nextProps) {
    if (nextProps.addcontactModul && nextProps.uids) {
      this.setState({
        newsex: undefined,
        newname: '',
        newmobile: '',
        newwechat: '',
        newqq: '',
        newdepatrment: '',
        newposition: '',
        newemail: '',
        fixedTelModal: '',
        major: 0,
        addcontactModul: true,
        uid: nextProps.uids,
        loading: false
      })
    };
  },
  render() {
    const maList = !this.props.isLimit
      ? [<Select.Option value={1}>是</Select.Option>, <Select.Option value={0}>否</Select.Option>]
      : [<Select.Option value={0}>否</Select.Option>]
    return (
      <div>
        <Modal
          maskClosable={false}
          footer=""
          width="800px"
          title="新增联系人"
          visible={this.state.addcontactModul}
          onCancel={this.addcontactModulcancel}
        >
          <Form
            layout="horizontal"
            onSubmit={this.submitcontactman}
            id="demand-form"
          >
            <Spin spinning={this.state.loading}>
              <Row style={{ paddingLeft: "50px" }}>
                <Col span={2}>
                  <span style={{ color: "red" }}>*</span>姓名：
                </Col>
                <Col span={8}>
                  <Input
                    value={this.state.newname}
                    required="required"
                    onChange={(e) => {
                      this.setState({ newname: e.target.value });
                    }}
                  />
                </Col>
                <Col span={2} style={{ marginLeft: "50px" }}>
                  <span style={{ color: "red" }}>*</span>手机：
                </Col>
                <Col span={8}>
                  <Input
                    value={this.state.newmobile}
                    required="required"
                    onChange={(e) => {
                      this.setState({ newmobile: e.target.value });
                    }}
                  />
                </Col>
              </Row>
              <Row style={{ marginTop: "20px", paddingLeft: "50px" }}>
                <Col span={2}>
                  <span style={{ color: "red" }}>*</span>部门：
                </Col>
                <Col span={8}>
                  <Input
                    value={this.state.newdepatrment}
                    required="required"
                    onChange={(e) => {
                      this.setState({ newdepatrment: e.target.value });
                    }}
                  />
                </Col>
                <Col span={2} style={{ marginLeft: "50px" }}>
                  <span style={{ color: "red" }}>*</span>职位：
                </Col>
                <Col span={8}>
                  <Input
                    value={this.state.newposition}
                    required="required"
                    onChange={(e) => {
                      this.setState({ newposition: e.target.value });
                    }}
                  />
                </Col>
              </Row>
              <Row style={{ marginTop: "20px", paddingLeft: "50px" }}>
                <Col span={2}>微信：</Col>
                <Col span={8}>
                  <Input
                    value={this.state.newwechat}
                    onChange={(e) => {
                      this.setState({ newwechat: e.target.value });
                    }}
                  />
                </Col>
                <Col span={2} style={{ marginLeft: "50px" }}>
                  Q Q：
                </Col>
                <Col span={8}>
                  <Input
                    value={this.state.newqq}
                    onChange={(e) => {
                      this.setState({ newqq: e.target.value });
                    }}
                  />
                </Col>
              </Row>
              <Row style={{ marginTop: '20px', paddingLeft: '50px' }}>
                <Col span={2}>邮箱：</Col>
                <Col span={8}>
                  <Input
                    onChange={(e) => { this.setState({ newemail: e.target.value }) }} />
                </Col>
                <Col span={2} style={{ marginLeft: '50px' }}>座机：</Col>
                <Col span={8}>
                  <Input
                    onChange={(e) => { this.setState({ fixedTelModal: e.target.value }) }} />
                </Col>
              </Row>
              <Row style={{ marginTop: '20px', paddingLeft: '50px' }}>
                <Col span={2}><span style={{ whiteSpace: 'nowrap', marginLeft: '-36px' }}>主要联系人：</span></Col>
                <Col span={8}>
                  <Select value={this.state.major} onChange={(e) => { this.setState({ major: e }) }}>
                    {maList}
                  </Select>
                </Col>
                <Col span={2} style={{ marginLeft: "50px" }}><span>性别：</span></Col>
                <Col span={8}>
                  <Radio.Group
                    value={this.state.newsex}
                    onChange={(e) => {
                      this.setState({ newsex: e.target.value });
                    }}
                  >
                    <Radio value="男">男</Radio>
                    <Radio value="女">女</Radio>
                  </Radio.Group>
                </Col>
              </Row>
              <Row
                style={{
                  marginTop: "20px",
                  paddingLeft: "50px",
                  marginBottom: "50px",
                }}
              >
                <Button
                  className="set-submit"
                  type="primary"
                  htmlType="submit"
                  id="change_keep"
                  style={{ marginLeft: "60px" }}
                >
                  保存
                </Button>
                <Button
                  className="set-submit"
                  type="ghost"
                  onClick={this.addcontactModulcancel}
                  id="change_rem"
                >
                  取消
                </Button>
              </Row>
            </Spin>
          </Form>
        </Modal>
      </div>
    );
  }
})
export default AddContact;