import React from "react";
import {
  Form,
  Table,
  Button,
  Spin,
  message,
  Input,
  Modal,
  Popconfirm,
  Col,
  Row,
  Alert
} from "antd";
import ajax from "jquery/src/ajax/xhr.js";
import $ from "jquery/src/ajax";

const ContactPerson = React.createClass({
  getInitialState() {
    return {
      newContacts:[],
      nameModal: "",
      mobileModal: "",
      emailModal: "",
      qqModal: "",
      wechatModal: "",
      departmentModal: "",
      positionModal: "",
      fixedTelModal:"",
      loading: false,
      addcontactModul:false,
      ContactsLists: [
        {
          title: "姓名",
          dataIndex: "name",
          key: "name",
          render: (text, record, index) => {
            if(record.id) return <div>{text}</div> 
          }
        },
        {
          title: "联系人部门",
          dataIndex: "department",
          key: "department",
          render: (text, record, index) => {
            if(record.id) return <div>{text}</div> 
          }
        },
        {
          title: "联系人职务",
          dataIndex: "position",
          key: "position",
          render: (text, record, index) => {
            if(record.id) return <div>{text}</div>
          }
        },
        {
          title: "主要联系人",
          dataIndex: "major",
          width: 100,
          key: "major",
          render: text => {
            return text == 1 ? "是" : "否";
          }
        },
        {
          title: "地区",
          dataIndex: "cityName",
          key: "cityName",
          render: (text, record, index) => {
          if(record.id) return <div>{text}</div>
          }
        },
        {
          title: "手机号码",
          dataIndex: "mobile",
          key: "mobile",
          render: (text, record, index) => {
            if(record.id) return <div>{text}</div> 
          }
        },
        {
          title: "座机",
          dataIndex: "fixedTel",
          key: "fixedTel",
          render: (text, record, index) => {
            if(record.id) return <div>{text}</div> 
          }
        },
        {
          title: "微信",
          dataIndex: "wechat",
          key: "wechat",
          render: (text, record, index) => {
            if(record.id) return <div>{text}</div> 
          }
        },
        {
          title: "联系人QQ",
          dataIndex: "qq",
          key: "qq",
          render: (text, record, index) => {
            if(record.id) return <div>{text}</div> 
          }
        },
        {
          title: "电子邮箱",
          dataIndex: "email",
          key: "email",
          render: (text, record, index) => {
            if(record.id) return <div>{text}</div> 
          }
        },
        {
          title: "更新时间",
          dataIndex: "createTimes",
          key: "createTimes",
          render: (text, record, index) => {
            if(record.id) return <div>{text}</div> 
          }
        },
        {
          title: "跟进人",
          dataIndex: "aname",
          key: "aname",
          render: (text, record, index) => {
            if(record.id) return <div>{text}</div> 
          }
        },
        {
          title: "操作",
          dataIndex: "dels",
          key: "dels",
          render: (text, record, index) => {
            return (
              <div>
                {adminData.isSuperAdmin || !record.id? (
                  <Popconfirm
                    title="是否删除?"
                    onConfirm={e => {
                      this.confirmDelet(record);
                    }}
                    okText="删除"
                    cancelText="不删除"
                  >
                    <Button
                      style={{
                        marginRight: "10px",
                        color: "#ffffff",
                        background: "#f00",
                        border: "none"
                      }}
                    >
                      删除
                    </Button>
                  </Popconfirm>
                ) : (
                  ""
                )}
                {record.major!=1 ? (
                  <Button
                    style={{
                      marginRight: "10px",
                      color: "#ffffff",
                      background: "green",
                      border: "none"
                    }}
                    onClick={e => {
                      e.stopPropagation(), this.mainContact(record);
                    }}
                  >
                    设为主要联系人
                  </Button>
                ) : (
                  ""
                )}
              </div>
            );
          }
        }
      ]
    };
  },
  //tab2删除
  confirmDelet(e) {
    this.setState({
      loading: true
    });
    if (e.id) {
      $.ajax({
        method: "get",
        dataType: "json",
        crossDomain: false,
        url: globalConfig.context + "/api/admin/customer/deleteOneContact",
        data: {
          ocbId: e.id //删除的ID
        }
      }).done(
        function(data) {
          if (!data.error.length) {
            message.success("删除成功！");
            this.setState({
              loading: false
            });
          } else {
            message.warning(data.error[0].message);
          }
          this.contactLists();
        }.bind(this)
      );
    } else {
      this.contactLists();
    }
  },
  //选择主要联系人
  mainContact(record) {
    this.setState({
    	loading: true
    });
    $.ajax({
    	method: "get",
    	dataType: "json",
    	crossDomain: false,
    	url: globalConfig.context + "/api/admin/customer/updateMainContact",
    	data: {
    		uid:this.props.data.id,
    		ocbId: record.id
    	}
    }).done(function(data) {
    	if(!data.error.length) {
    		message.success('设为主要联系人成功！');
    		this.setState({
    			loading: false,
    		});
    	} else {
    		message.warning(data.error[0].message);
    	};
    	this.contactLists();
    }.bind(this));
    this.state.contactList.forEach(item => {
      item.major = 0;
    });
    record.major = 1;
    // console.log(record);
    this.setState({
      contactList: this.state.contactList
    });
  },
  //tab2获取联系人详情
  contactLists(ids) {
    this.setState({
      loading: true
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/customer/findCustomerContacts",
      data: {
        uid: ids || this.props.data.id //名称1
      },
      success: function(data) {
        let theArr = [];
        if (data.error.length || data.data.list == "") {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          }
        } else {
          for (let i = 0; i < data.data.length; i++) {
            let thisdata = data.data[i];
            theArr.push({
              key: i,
              id: thisdata.id,
              name: thisdata.name,
              mobile: thisdata.mobile,
              email: thisdata.email,
              qq: thisdata.qq,
              wechat: thisdata.wechat,
              department: thisdata.department,
              position: thisdata.position,
              major: thisdata.major,
              createTimes:thisdata.createTimes,
              fixedTel:thisdata.fixedTel,
              aname:thisdata.aname,
              cityName:thisdata.provinceName+thisdata.cityName+thisdata.areaName
            });
          }
        }
        this.setState({
          contactList: theArr
        });
      }.bind(this)
    }).always(
      function() {
        this.setState({
          loading: false
        });
      }.bind(this)
    );
  },
  //新增
  //tab2新增联系人
  addcontact() {
    this.setState({
      addcontactModul: true
    });
  },
  // 取消新增
  addcontactModulcancel(){
    this.setState({
      addcontactModul: false,
      nameModal: "",
      mobileModal: "",
      emailModal: "",
      qqModal: "",
      wechatModal: "",
      departmentModal: "",
      positionModal: "",
      fixedTelModal:"",
    });
  },
  //tab2联系人保存
  contactSave(e) {
    e.preventDefault();
    if(this.state.nameModal.length==0){
        message.error('请填写姓名');
      return
    }
    if (/.*[\u4e00-\u9fa5]+.*$/.test(this.state.nameModal)) {
    } else {
      message.error("请填写正确的姓名，且至少包含一个汉字");
      return;
    }
    if (this.state.mobileModal.length != 11) {
      message.error("请填写正确的手机号码");
      return;
    }
    if (this.state.departmentModal.length == 0) {
      message.error("请填写部门");
      return;
    }
    if (/.*[\u4e00-\u9fa5]+.*$/.test(this.state.departmentModal)) {
    } else {
      message.error("请填写正确的部门，且至少包含一个汉字");
      return;
    }
    if (this.state.positionModal.length == 0) {
      message.error("请填写职位");
      return;
    }
    if (/.*[\u4e00-\u9fa5]+.*$/.test(this.state.positionModal)) {
    } else {
      message.error("请填写正确的职位，且至少包含一个汉字");
      return;
    }
    this.setState({
      loading: true
    });
    $.ajax({
      url: globalConfig.context + "/api/admin/customer/addOneContact",
      method: "post",
      data: {
        uid: this.props.data.id,
        name: this.state.nameModal,
        mobile: this.state.mobileModal,
        email: this.state.emailModal,
        qq:this.state.qqModal,
        wechat: this.state.wechatModal,
        department: this.state.departmentModal,
        position: this.state.positionModal,
        fixedTel:this.state.fixedTelModal,
      }
    }).done(
      function(data) {
        this.setState({
          loading: false
        });
        if (!data.error.length) {
          message.success("保存成功！");
          // this.props.closeDetail(false, true);
          this.setState({
            addcontactModul: false,
            nameModal: "",
            mobileModal: "",
            emailModal: "",
            qqModal: "",
            wechatModal: "",
            departmentModal: "",
            positionModal: "",
            fixedTelModal:"",
          });
          this.contactLists()
        } else {
          message.warning(data.error[0].message);
        }
      }.bind(this)
    );
  },
  componentWillMount() {
    this.contactLists(this.props.data.id);
  },
  detailsModal() {
    this.props.closeDetail(false, false);
  },
  componentWillReceiveProps(nextProps) {
    if (nextProps.data.id && nextProps.contactState) {
      this.contactLists(nextProps.data.id);
    }
  },
  render() {
    return (
      <div>
        <div className="clearfix">
          <Alert message="注：已保存信息不可修改，可新增正确的信息并设置为主要联系人" banner />
          <span
            style={{
              fontSize: 14,
              fontWeight: "bold",
              marginTop: 20,
              display: "inline-block",
            }}
          >
            公司名称：{this.props.name}
          </span>
          <Button
            className="ContactsList"
            type="primary"
            onClick={this.addcontact}
          >
            新增联系人
          </Button>
        </div>
        <div className="clearfix">
          <Spin spinning={this.state.loading}>
            <Form
              layout="horizontal"
              id="demand-form"
              onSubmit={this.contactSave}
            >
              <Table
                size="middle"
                pagination={false}
                columns={this.state.ContactsLists}
                dataSource={this.state.contactList}
              />
              {/* <Col span={24} offset={9} style={{ marginTop: "15px" }}>
                <Button type="primary" htmlType="submit">
                  保存
                </Button>
                <Button
                  type="ghost"
                  onClick={this.detailsModal}
                  style={{ marginLeft: "100px" }}
                >
                  取消
                </Button>
              </Col> */}
            </Form>
          </Spin>
        </div>
        {/* 新增联系人 */}
        <Modal
              footer=''
              width='800px'
              title="新增联系人"
              visible={this.state.addcontactModul}
              onOk={this.contactSave}
              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 required="required"
                              onChange={(e) => {this.setState({ nameModal: e.target.value }) }} />
                      </Col>
                      <Col span={2} style={{ marginLeft: '50px' }}><span style={{color:'red'}}>*</span>手机：</Col>
                      <Col span={8}>
                          <Input required="required"
                              onChange={(e) => { this.setState({ mobileModal: e.target.value }) }} />
                      </Col>
                  </Row>
                  <Row style={{ marginTop: '20px' ,paddingLeft:'50px'}}>
                  <Col span={2}><span style={{color:'red'}}>*</span>部门：</Col>
                  <Col span={8}>
                      <Input  required="required"
                          onChange={(e) => { this.setState({ departmentModal: e.target.value }) }} />
                      </Col>
                      <Col span={2} style={{ marginLeft: '50px' }}><span style={{color:'red'}}>*</span>职位：</Col>
                      <Col span={8}>
                          <Input required="required"
                              onChange={(e) => { this.setState({ positionModal: e.target.value }) }} />
                      </Col>
                  </Row>
                  <Row style={{ marginTop: '20px',paddingLeft:'50px' }}>
                      <Col span={2}>微信：</Col>
                        <Col span={8}>
                          <Input 
                              onChange={(e) => { this.setState({ wechatModal: e.target.value }) }} />
                      </Col>
                      <Col span={2} style={{ marginLeft: '50px' }}>Q Q：</Col>
                      <Col span={8}>
                          <Input
                              onChange={(e) => { this.setState({ qqModal: e.target.value }) }} />
                      </Col>
                  </Row>	
                  <Row style={{ marginTop: '20px',paddingLeft:'50px' }}>						                       
                      <Col span={2}>邮箱：</Col>
                      <Col span={8}>
                          <Input 
                              onChange={(e) => { this.setState({ emailModal: 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' ,marginBottom:'50px'}}>
                    <Button className="set-submit" type="primary" htmlType="submit"  id="change_keep" style={{marginLeft:'60px'}} onClick={this.contactSave}>保存</Button>
                    <Button className="set-submit" type="ghost" onClick={this.addcontactModulcancel} id='change_rem'>取消</Button>
                  </Row>
                </Spin>
            </Form>   
			    </Modal>
      </div>
    );
  }
});
export default ContactPerson;
