import React from "react";
import {
  Table,
  Button,
  Spin,
  message,
  Popconfirm,
  Alert,
} from "antd";
import $ from "jquery/src/ajax";
import EnterpriseNameChange from '../../../../../../../component/common/enterpriseNameChange';
import AddContact from "../../../signCustomer/followDetail/addContact";

const ContactPerson = React.createClass({
  getInitialState() {
    return {
      major:0,
      loading: false,
      addcontactModul:false,
      enterpriseName:'',
      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
    });
  },
  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.state.enterpriseName ? this.state.enterpriseName :  this.props.name}
            <EnterpriseNameChange
                type='modify'
                changeOtherInfor
                style={{marginLeft:'20px'}}
                enterpriseId={this.props.data.uid}
                enterpriseName={this.props.name}
                data={this.props.data}
                onChangeSuccess={(value)=>{
                  this.setState({
                    enterpriseName:value
                  })
            }}/>
          </span>
          <Button
            className="ContactsList"
            type="primary"
            onClick={this.addcontact}
          >
            新增联系人
          </Button>
        </div>
        <div className="clearfix">
          <Spin spinning={this.state.loading}>
            <Table
                pagination={false}
                columns={this.state.ContactsLists}
                dataSource={this.state.contactList}
            />
          </Spin>
        </div>
        {/* 新增联系人 */}
        <AddContact
            addcontactModul={this.state.addcontactModul}
            uids={this.props.data.id}
            closeFollow={()=>{
              this.setState({
                addcontactModul:false
              },()=>{
                this.contactLists()
              })
            }}
        />
      </div>
    );
  }
});
export default ContactPerson;
