import React from 'react';
import {
  Button, Cascader, Modal, Input, Select, Tag,
  Spin, Table, Tabs, Form, Col, message, Tooltip, AutoComplete
} from 'antd';
import $ from 'jquery/src/ajax';
import { ShowModal } from '../../../../tools.js'
import { areaSelect, citySelect, provinceList } from '@/NewDicProvinceList';
import ShowModalDiv from "@/showModal.jsx";
import ZhuanjiaoDetail from "@/zhuanjiaoDetail.jsx";
import Detaile from './detail.jsx';
import { ChooseList } from "../../../order/orderNew/chooseList";
import EnterpriseNameChange from "../../../../common/enterpriseNameChange";
import TextArea from "antd/es/input/TextArea";
import ImgList from '../../../../common/imgList/index.js';

const confirm = Modal.confirm;

const { TabPane } = Tabs
const QueryCustomer = React.createClass({
  //
  loadData(pageNo, apiUrl) {
    if (!this.state.nameSearch) {
      return
    }
    
    // 新需求 除湖南和内蒙古外 不让其他省操作
    if (adminData.province != "21" && adminData.province != "11" && adminData.province != "2") {
      return
    }
    this.setState({
      visitModul: false,
      loading: true,
      modalVisible: false,
    });
    let api = apiUrl ? apiUrl : this.props.ApiUrl;
    $.ajax({
      method: "post",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + api,
      data: {
        pageNo: pageNo || 1,
        pageSize: this.state.pagination.pageSize,
        name: this.state.nameSearch,
        departmentId: this.state.departmenttSearch,
        aid: this.state.theTypes,
      },
      success: function (data) {
        ShowModal(this);
        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.list.length; i++) {
            let thisdata = data.data.list[i];
            let diqu =
              (thisdata.province == null ? "" : thisdata.province) +
              (thisdata.city == null ? "" : "-" + thisdata.city) +
              (thisdata.area == null ? "" : "-" + thisdata.area);
            thisdata.key = i;
            thisdata.id = thisdata.uid;
            thisdata.signBills = thisdata.signBills;
            thisdata.createTime = thisdata.createTime && thisdata.createTime.split(" ")[0];
            thisdata.locationProvince = diqu;
            thisdata.myUser = thisdata.myUser;
            theArr.push(thisdata);
          }
          this.state.pagination.current = data.data.pageNo;
          this.state.pagination.total = data.data.totalCount;
        }
        if (data.data && data.data.list && !data.data.list.length) {
          this.state.pagination.current = 0;
          this.state.pagination.total = 0;
        }
        this.setState({
          dataSource: theArr,
          pagination: this.state.pagination,
          selectedRowKeys: [],
          ispage: data.data.pageNo,
        });
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },
  //部门
  departmentList() {
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/organization/selectSuperId",
      data: {},
      success: function (data) {
        let thedata = data.data;
        let theArr = [];
        if (!thedata) {
          if (data.error && data.error.length) {
            message.warning(data.error[0].message);
          }
          thedata = {};
        } else {
          thedata.map(function (item, index) {
            theArr.push({
              key: index,
              name: item.name,
              id: item.id,
            });
          });
        }
        this.setState({
          departmentArr: theArr,
        });
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },
  //
  getInitialState() {
    return {
      verification: false,
      businessScope: [],
      cooperationProjects: [],
      selectCooperationProjects: [],

      addressSearch: [],
      dataSource: [],
      zhuanjiaoVisible: false,
      zhuanjiaoData: [],
      loading: false,
      departmentArr: [],
      selectedRowKeys: [],
      selectedRowKey: [],
      selectedRows: [],
      pagination: {
        defaultCurrent: 1,
        defaultPageSize: 10,
        showQuickJumper: true,
        pageSize: 10,
        onChange: function (page) {
          this.loadData(page);
        }.bind(this),
        showTotal: function (total) {
          return "共" + total + "条数据";
        },
      },
      columns: [
        {
          title: "客户名称",
          dataIndex: "name",
          key: "name",
          render: (text, record) => {
            return (
              <span style={{ display: 'flex', alignItems: 'flex-start' }}>
                {record.channel === 1 ? <div style={{
                  whiteSpace: 'nowrap',
                  background: '#ef7207',
                  color: '#FFF',
                  padding: '1px 7px',
                  borderRadius: '5px',
                  fontSize: '12px',
                  display: 'inline-block',
                  marginRight: '10px'
                }}>
                  外联
                </div> : null}
                <Tooltip title={text}>
                  <div>{text}</div>
                </Tooltip>
              </span>
            )
          }
        },
        {
          title: "统一社会信用代码",
          dataIndex: "orgCode",
          key: "orgCode",
        },
        {
          title: "共享类型",
          dataIndex: "shareType",
          key: "shareType",
          //0-私有 1-公共 2 签单
          render: (text, record) => {
            return (
              <span>
                {
                  text === '0' ? '私有' :
                    text === '1' ? '公共' :
                      text === '2' ? '签单' :
                        text === '3' ? '外联' :
                          text === '4' ? '渠道' :
                            text === '5' ? '线索' : ''
                }
                {/* {
                  record.newChannel == "1"
                    ? "渠道" : ""
                } */}
              </span>
            )
          }
        },
        {
          title: "地区",
          dataIndex: "locationProvince",
          key: "locationProvince",
        },
        {
          title: "创建时间",
          dataIndex: "createTime",
          key: "createTime",
          width: 80,
        },
        {
          title: "客户所属人",
          dataIndex: "adminName",
          key: "adminName",
        },
        {
          title: "资料所属人",
          dataIndex: "informationMaintainer",
          key: "informationMaintainer",
        },
        {
          title: "操作",
          dataIndex: "abc",
          key: "abc",
          render: (text, record) => {
            return (
              <div>
                <Button
                  disabled={record.signBills === 0}
                  onClick={(e) => {
                    e.stopPropagation(), this.seeDetail(record);
                  }}
                  // type="primary"
                  style={{ border: 0, marginRight: 10, color: "#fff", background: record.signBills === 0 ? "#58A3FF" : "green" }}
                >
                  {record.signBills === 0 ? '暂未签单' : '已签，查看详细'}
                </Button>
                <Button
                  onClick={(e) => {
                    e.stopPropagation(), this.zhuanjiaoLog(record);
                  }}
                  type="primary"
                >
                  查看转交记录
                </Button>
                <EnterpriseNameChange
                  type='journal'
                  style={{ marginLeft: 10 }}
                  data={record}
                  enterpriseId={record.uid} />
                {record.shareType === '1' &&
                  <Button style={{ marginLeft: 10 }} onClick={(e) => {
                    e.stopPropagation();
                    if (record.newChannel == 1) {
                      this.rTips(record)
                    } else {
                      this.receive(record)
                    }
                    // let _this = this;
                    // confirm({
                    //   title: '提醒！',
                    //   content: '确定要领取此客户吗？',
                    //   onOk() {
                    //     _this.receive(record);
                    //   },
                    //   onCancel() { },
                    // });
                  }} type="primary">领取</Button>
                }
              </div>
            );
          },
        },
      ],
      natureOptions: [{
        value: 1,
        label: "政府机构"
      }, {
        value: 2,
        label: "科研院所"
      }, {
        value: 3,
        label: "高等院校"
      }, {
        value: 4,
        label: "社会团体"
      }, {
        value: 5,
        label: "企业",
        children: [{
          value: 1,
          label: "国企",
          children: [{
            value: 1,
            label: "上市公司",
          }, {
            value: 0,
            label: "非上市公司",
          }]
        }, {
          value: 2,
          label: "央企",
          children: [{
            value: 1,
            label: "上市公司",
          }, {
            value: 0,
            label: "非上市公司",
          }]
        }, {
          value: 3,
          label: "私企",
          children: [{
            value: 1,
            label: "上市公司",
          }, {
            value: 0,
            label: "非上市公司",
          }]
        }, {
          value: 4,
          label: "合资企业（含港澳台）",
          children: [{
            value: 1,
            label: "上市公司",
          }, {
            value: 0,
            label: "非上市公司",
          }]
        }, {
          value: 5,
          label: "外资控股",
          children: [{
            value: 1,
            label: "上市公司",
          }, {
            value: 0,
            label: "非上市公司",
          }]
        }]
      }, {
        value: 0,
        label: "其他组织"
      }],

      fileList: []
    };
  },

  handleClose(removedTag) {
    let businessScope = this.state.businessScope.filter(tag => { return tag !== removedTag });
    this.setState({ businessScope });
  },
  handleCloseCooperation(removedTag) {
    let selectCooperationProjects = this.state.selectCooperationProjects.filter(tag => { return tag.value !== removedTag.value });
    this.setState({ selectCooperationProjects });
  },
  showInput() {
    let str = this.state.businessScope.join('/')
    this.setState({
      inputVisible: true,
      inputValue: str
    });
  },
  handleInputConfirm() {
    let inputValue = this.state.inputValue;
    let arr = inputValue.split('/');
    let lv = true;
    for (let i of arr) {
      if (!i.replace(/\s+/g, '')) {
        message.warning("请填写关键词且不为空");
        return;
      }
      if (i.length > 16) {
        message.warning('单个标签字数不能超过16个字符')
        lv = false;
        return;
      }
    }
    if (lv) {
      arr = Array.from(new Set(arr));
      arr = arr.filter(v => v);
      this.setState({
        businessScope: arr,
        inputVisible: false,
        inputValue: '',
      });
    }
  },
  //加载(自动补全)
  // supervisor(value) {
  //   console.log(value)
  //   $.ajax({
  //     method: "get",
  //     dataType: "json",
  //     crossDomain: false,
  //     url: globalConfig.context + '/api/admin/order/getBusinessProjectByName',
  //     data: {
  //       businessName: value
  //     },
  //     success: function (data) {
  //       let thedata = data.data;
  //       console.log(data)
  //       if (data.error.length === 0) {
  //         this.setState({
  //           cooperationProjects: thedata,
  //         });
  //       } else {
  //         message.warning(data.error[0].message);
  //       }
  //     }.bind(this),
  //   }).always(
  //     function () {

  //     }.bind(this)
  //   );
  // },
  onSelect(value) {
    let arr = this.state.cooperationProjects.filter(v => v.id === value);
    let arr1 = this.state.selectCooperationProjects.filter(v => v.value === value);
    if (arr.length > 0) {
      if (arr1.length > 0) {
        message.warning('选项已存在');
      } else {
        this.state.selectCooperationProjects.push({
          label: arr[0].bname,
          value: arr[0].id,
        })
        this.setState({
          selectCooperationProjects: this.state.selectCooperationProjects
        })
      }
    }
  },
  // 查询客户补充完整
  receive(e) {
    this.setState({
      loading: true,
      selectedRowKeys: [],
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/customer/checkUser",
      data: {
        id: e.id || e.uid,
      }
    }).done(function (data) {
      if (!data.error.length) {
        let obj = data.data
        let selectCooperationProjects = !!obj.intendedProject ? obj.intendedProject.split(',') : []
        if (selectCooperationProjects.length > 0) {
          selectCooperationProjects = selectCooperationProjects.map((item) => {
            return { label: item }
          })
        }

        let nature = [];
        if (!!obj.nature) {
          nature.push(obj.nature);
        }
        if (!!obj.enterpriseNature) {
          nature.push(obj.enterpriseNature);
        }
        if (!!obj.listedNature) {
          nature.push(obj.listedNature);
        }

        this.setState({
          loading: false,
          verification: true,
          verificationMyUser: e.myUser,
          id: obj.id,
          name: obj.name,
          orgCode: obj.orgCode,
          ProvinceCity: [obj.province, obj.city, obj.area],
          // content: e.myUser == 1 ? obj.contacts : '',
          position: obj.position,
          // telnum: e.myUser == 1 ? obj.contactMobile : '',
          businessScope: !!obj.businessScope ? obj.businessScope.split(',') : [],
          selectCooperationProjects: selectCooperationProjects,
          level: obj.level,
          nature,
          natureOther: obj.natureOther,
          fileList: []
        });
      } else {
        message.warning(data.error[0].message);
      };
    }.bind(this));
  },

  // 补充客户并领取
  handleSubmit(e) {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      let re = new RegExp("^[\u4e00-\u9fa5]");
      // if (!re.test(values.name)) {
      //   message.warning('公司名称必须以汉字开头！')
      //   return
      // }
      // if (!re.test(values.name.charAt(values.name.length - 1))) {
      //   message.warning('公司名称必须以汉字结尾！')
      //   return
      // }
      if (values.name.length > 64) {
        message.warning('公司名称字数不超过64个！')
        return false;
      };
      let regu = /[`~!#$%^&*'_[\]+=<>?:"{}|~！#￥%……&*=-@-!{}|/《》？：“”【】、；;‘’，,.。、\s+]/g;
      if (regu.test(values.name)) {
        message.warning('公司名称不能存在特殊符号或空格!')
        return false;
      }
      if (!/^[A-Z0-9]{15}$|^[A-Z0-9]{17}$|^[A-Z0-9]{18}$|^[A-Z0-9]{20}$/.test(values.orgCode)) {
        message.warning('请输入正确的统一社会信用代码！')
        return
      }
      if (!!values.content && !/.*[\u4e00-\u9fa5]+.*$/.test(values.content)) {
        message.error("请填写正确的联系人，且至少包含一个汉字");
        return false;
      }
      if (!!values.position && !/.*[\u4e00-\u9fa5]+.*$/.test(values.position)) {
        message.error("请填写正确的职位，且至少包含一个汉字");
        return false;
      }
      if (!values.ProvinceCity[1]) {
        message.warning('请选择地区');
        return false;
      };
      if (!!values.content && values.content.length > 32) {
        message.warning('联系人字数不超过32个')
        return false;
      };
      if (!!values.telnum && values.telnum.length > 13) {
        message.warning('电话号码字数不超过13个')
        return false;
      };
      if (this.state.businessScope.length === 0) {
        message.warning('请选择主营产品')
        return false;
      }
      if (this.state.selectCooperationProjects.length === 0) {
        message.warning('请选择意向合作项目')
        return false;
      }
      if (!this.state.level && this.state.level != 0) {
        message.warning('请选择客户类型')
        return false;
      }
      if (!this.state.nature && this.state.nature != 0) {
        message.warning('请选择客户性质')
        return false;
      }
      if (this.state.nature == 0 && !this.state.natureOther) {
        message.warning('其他说明不能为空')
        return false;
      }
      if (!this.state.verificationMyUser && !this.state.fileList.length) {
        message.warning('请上传佐证资料')
        return false;
      }
      let arr = [];
      for (let i of this.state.selectCooperationProjects) {
        arr.push(i.label)
      }
      if (!err) {
        this.setState({
          loading: true
        });

        let enterpriseNature = undefined; // 企业性质 0=其他，1=国企，2=央企，3=私企，4=合资企业（含港澳台），5=外资控股
        let listedNature = undefined; // 上市 0=否，1=是
        if (this.state.nature.length >= 2) {
          enterpriseNature = this.state.nature[1];
        }
        if (this.state.nature.length >= 3) {
          listedNature = this.state.nature[2];
        }

        let fileSuccList = this.state.fileList.filter(item => item.response.data && !item.response.error.length);
        let materialUrlList = fileSuccList.map(item => {
          return item.response.data;
        });


        $.ajax({
          method: "POST",
          dataType: "json",
          crossDomain: false,
          url: globalConfig.context + '/api/admin/customer/updateAndReceiveCustomer',
          data: {
            id: this.state.id,
            orgCode: values.orgCode,
            contacts: values.content,
            contactMobile: values.telnum,
            societyTag: '0',                       //社会属性默认为 社会企业
            //source:values.customerSource,
            province: (values.ProvinceCity)[0],//省
            city: (values.ProvinceCity)[1],//市
            area: (values.ProvinceCity)[2],//区
            type: '1',
            intendedProject: arr.join(','),
            businessScope: this.state.businessScope.join(','),
            position: values.position,
            level: this.state.level,
            nature: this.state.nature[0],
            natureOther: this.state.natureOther,
            enterpriseNature,
            listedNature,
            materialUrl: materialUrlList.join(",")
          }
        }).done(function (data) {
          this.setState({
            loading: false
          });
          if (!data.error.length) {
            message.success('领取成功！');
            this.loadData(this.state.ispage);

            this.handleModalClose();
          } else {
            message.warning(data.error[0].message);
          }
        }.bind(this));
      }
    });
  },
  handleModalClose() {
    this.setState({
      verification: false,
      id: undefined,
      name: undefined,
      orgCode: undefined,
      ProvinceCity: [],
      content: undefined,
      position: undefined,
      telnum: undefined,
      businessScope: [],
      selectCooperationProjects: [],
      level: undefined,
      nature: undefined,
      natureOther: undefined,
    })
    this.props.form.resetFields();
  },
  rTips(e) {
    let _this = this;
    Modal.confirm({
      title: "温馨提示",
      content: "确认要领取此客户吗？",
      onOk() {
        _this.receiveNew(e)
      },
      onCancel() { },
    });
  },
  /*领取为私有渠道信息*/
  receiveNew(e) {
    this.setState({
      loading: true,
      selectedRowKeys: [],
    });
    $.ajax({
      method: "post",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/customer/receiveAsChannel",
      data: {
        uid: e.uid,
      }
    }).done(function (data) {
      if (!data.error.length) {
        message.success('领取成功!');
        this.setState({
          loading: false,
        })
      } else {
        message.warning(data.error[0].message);
      };
      this.loadData(this.state.ispage);
    }.bind(this));
  },
  receives(e) {
    this.setState({
      loading: true,
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/customer/receiveCustomer",
      data: {
        uid: e.id,
      }
    }).done(function (data) {
      this.setState({
        loading: false,
      });
      if (data.error.length === 0) {
        message.success(e.signBills == 1 ? '领取成功，请在【私有客户列表】中查询！' : '领取成功，请在【签单客户列表】中查询！');
        this.loadData(this.state.ispage);
      } else {
        message.warning(data.error[0].message);
      };
    }.bind(this));
  },
  //
  zhuanjiaoDetailCancel() {
    this.setState({
      zhuanjiaoVisible: false,
    });
  },
  //
  zhuanjiaoLog(record) {
    this.setState({
      zhuanjiaoVisible: true,
      zhuanjiaoId: record.id,
    });
  },
  //
  seeDetail(record) {
    this.setState({
      data: record,
      visitModul: true,
    });
  },
  //
  closeDesc(e) {
    this.state.visitModul = e;
  },
  //
  search() {
    this.loadData();
  },
  //
  reset() {
    this.setState({
      nameSearch: undefined,
      departmenttSearch: undefined,
      theTypes: undefined,
      auto: undefined,
      provinceSearch: undefined,
      addressSearch: [],
      dataSource: []
    })
    // this.loadData();
  },


  componentWillReceiveProps(nextProps) {
    if (nextProps.ApiUrl != this.props.ApiUrl) {
      this.state.nameSearch = "";
      this.state.provinceSearch = undefined;
      this.state.addressSearch = [];
      this.loadData(null, nextProps.ApiUrl);
    }
  },

  componentWillMount() {
    // this.departmentList();
    //城市
    let Province = [];
    provinceList.map(function (item) {
      var id = String(item.id);
      Province.push(
        <Select.Option value={id} key={item.name}>
          {item.name}
        </Select.Option>
      );
    });
    this.state.Provinces = Province;
    this.loadData();
  },
  //指定转交人自动补全
  supervisor(e) {
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/order/getBusinessProjectByName",
      data: {
        businessName: e,
      },
    }).done((data) => {
      console.log(data)
      let thedata = data.data || [];
      if (!thedata) {
        if (data.error && data.error.length) {
          message.warning(data.error[0].message);
        }
        thedata = {};
      }
      this.setState({
        cooperationProjects: thedata,
      });
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },
  //输入转交人输入框失去焦点是判断客户是否存在
  selectAuto(value, options) {
    this.setState({
      auto: value,
    });
  },
  blurChange(e) {
    let theType = "";
    let contactLists = this.state.customerArr || [];
    if (e) {
      contactLists.map(function (item) {
        if (item.name == e.toString()) {
          theType = item.id;
        }
      });
    }
    this.setState({
      theTypes: theType,
    });
  },
  //值改变时请求客户名称
  httpChange(e) {
    if (e.length >= 1) {
      this.supervisor(e);
    }
    this.setState({
      auto: e,
    });
  },
  changeList(arr) {
    const newArr = [];
    this.state.columns.forEach(item => {
      arr.forEach(val => {
        if (val === item.title) {
          newArr.push(item);
        }
      });
    });
    this.setState({
      changeList: newArr
    });
  },
  handleFileChange(info) {
    let fileList = info.fileList;
    this.setState({ fileList });
  },
  render() {
    let departmentArr = this.state.departmentArr || [];
    const intentionState = this.props.intentionState;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };
    const FormItem = Form.Item;
    const rowSelection = {
      selectedRowKeys: this.state.selectedRowKeys,
      onChange: (selectedRowKeys, selectedRows) => {
        this.setState({
          modalVisible: false,
          selectedRows: selectedRows.slice(-1),
          selectedRowKeys: selectedRowKeys.slice(-1),
        });
      },
      onSelect: (recordt, selected, selectedRows) => {
        this.setState({
          modalVisible: false,
          recordt: recordt.id,
        });
      },
    };
    const dataSources = this.state.customerArr || [];
    const options = dataSources.map((group) => (
      <Select.Option key={group.id} value={group.name}>
        {group.name}
      </Select.Option>
    ));
    const hasSelected = this.state.selectedRowKeys.length > 0;
    return (
      <div className="user-content">
        <ShowModalDiv ShowModal={this.state.showModal} onClose={() => { this.setState({ showModal: false }) }} />
        <div className="content-title" style={{ marginBottom: 10 }}>
          <span style={{ fontWeight: 900, fontSize: 16 }}>{!intentionState ? "单位客户查询" : "个人客户查询"}</span>
        </div>
        <Tabs defaultActiveKey="1" onChange={this.callback} className="test">
          <TabPane tab="搜索" key="1">
            <div className="user-search">
              <Input
                style={{ width: 240 }}
                placeholder="请输入精确客户全称或统一社会信用代码"
                value={this.state.nameSearch}
                onChange={(e) => {
                  this.setState({ nameSearch: e.target.value });
                }}
              />
              {/* <Select placeholder="选择部门"
                style={{ width: 150, marginRight: '10px', marginLeft: '10px' }}
                value={this.state.departmenttSearch}
                onChange={(e) => { this.setState({ departmenttSearch: e }) }}>
                {
                  departmentArr.map(function (item) {
                    return <Select.Option key={item.id} >{item.name}</Select.Option>
                  })
                }
              </Select> */}
              {/* <AutoComplete
                className="certain-category-search"
                dropdownClassName="certain-category-search-dropdown"
                dropdownMatchSelectWidth={false}
                dropdownStyle={{ width: 120 }}
                style={{ width: '120px' }}
                dataSource={options}
                placeholder="客户所有人姓名"
                value={this.state.auto}
                onChange={this.httpChange}
                filterOption={true}
                onBlur={this.blurChange}
                onSelect={this.selectAuto}
              >
                <Input />
              </AutoComplete> */}
              <Button type="primary" onClick={this.search}>搜索</Button>
              <Button onClick={this.reset}>重置</Button>
            </div>
          </TabPane>
          <TabPane tab="更改表格显示数据" key="2">
            <div style={{ marginLeft: 10 }}>
              <ChooseList
                columns={this.state.columns}
                changeFn={this.changeList}
                changeList={this.state.changeList}
                top={55}
                margin={11}
              />
            </div>
          </TabPane>
        </Tabs>
        <div className="patent-table">
          <Spin spinning={this.state.loading}>
            <Table
              size="middle"
              columns={
                this.state.changeList
                  ? this.state.changeList
                  : this.state.columns
              }
              dataSource={this.state.dataSource}
              rowSelection={rowSelection}
              pagination={this.state.pagination}
            />
          </Spin>
        </div>
        <Detaile
          visitModul={this.state.visitModul}
          data={this.state.data}
          detailApi={this.props.detailApi}
          closeDesc={this.closeDesc}
        />
        {this.state.zhuanjiaoVisible ? (
          <ZhuanjiaoDetail
            cancel={this.zhuanjiaoDetailCancel}
            visible={this.state.zhuanjiaoVisible}
            id={this.state.zhuanjiaoId}
          />
        ) : (
          ""
        )}
        <Modal maskClosable={false}
          visible={this.state.verification}
          onCancel={this.handleModalClose}
          width='600px'
          title='客户信息'
          footer={null}
          className="admin-desc-content">
          <Spin spinning={this.state.loading}>
            <div>
              <Form layout="horizontal" onSubmit={this.handleSubmit} id="demand-form">
                <Spin spinning={this.state.loading}>
                  <div>
                    <Col style={{ color: 'red', marginBottom: '10px' }} span={12} offset={6}>注意:请录入真实有效的客户信息</Col>
                    <div className="clearfix">
                      <FormItem className="mid-item"
                        {...formItemLayout}
                        label="公司名称" >
                        {getFieldDecorator('name', {
                          rules: [{ required: true, message: '此项为必填项!' }],
                          initialValue: this.state.name
                        })(
                          <Input placeholder="公司名称" disabled />
                          // <span style={{ display: 'flex', alignItems: 'center', position: 'relative' }}>
                          //   <Input placeholder="公司名称" value={this.state.name} />
                          //   {this.state.verification && <Icon type="check-circle" style={{
                          //     fontSize: 16,
                          //     color: '#30e031',
                          //     position: 'absolute',
                          //     right: '80px',
                          //   }} />}
                          //   <Button onClick={this.checkUserName} type="primary" style={{ marginLeft: '10px' }}>验证</Button>
                          // </span>
                        )}
                      </FormItem>
                    </div>
                    <div className="clearfix">
                      <FormItem
                        {...formItemLayout}
                        label="统一社会信用代码"
                      >
                        {getFieldDecorator('orgCode', {
                          rules: [{ required: true, message: '此项为必填项!' }],
                          initialValue: this.state.orgCode
                        })(
                          <Input placeholder="统一社会信用代码" />
                        )}
                      </FormItem>
                    </div>
                    <Col style={{ color: 'red', marginBottom: '10px' }} span={12} offset={6}>如,科德集团则填写91430105670766451M</Col>
                    <div className="clearfix">
                      <FormItem
                        {...formItemLayout}
                        label="省-市-区"
                      >
                        {getFieldDecorator('ProvinceCity', {
                          rules: [{ required: true, message: '此项为必填项!' }],
                          initialValue: this.state.ProvinceCity
                        })(
                          <Cascader options={areaSelect()} placeholder="选择城市" />
                        )}
                      </FormItem>
                    </div>
                    <div className="clearfix">
                      <FormItem className="mid-item"
                        {...formItemLayout}
                        label="联系人" >
                        {getFieldDecorator('content', {
                          rules: [{ required: this.state.verificationMyUser != 1, message: '此项为必填项!' }],
                          initialValue: this.state.content
                        })(
                          <Input placeholder="联系人姓名" />
                        )}
                      </FormItem>
                    </div>
                    <div className="clearfix">
                      <FormItem className="mid-item"
                        {...formItemLayout}
                        label="职位" >
                        {getFieldDecorator('position', {
                          rules: [{ required: this.state.verificationMyUser != 1, message: '此项为必填项!' }],
                          initialValue: this.state.position
                        })(
                          <Input placeholder="联系人职位" />
                        )}
                      </FormItem>
                    </div>
                    <div className="clearfix">
                      <FormItem className="mid-item"
                        {...formItemLayout}
                        label="联系电话" >
                        {getFieldDecorator('telnum', {
                          rules: [{ required: this.state.verificationMyUser != 1, message: '此项为必填项!' }],
                          initialValue: this.state.telnum
                        })(
                          <Input placeholder="请填写手机号,仅填座机号时,请后续补充手机号" />
                        )}
                      </FormItem>
                    </div>
                    <div className="clearfix">
                      <FormItem className="mid-item"
                        {...formItemLayout}
                        required
                        label="主营产品" >
                        <div>
                          {this.state.businessScope.map((tag, index) => {
                            const isLongTag = tag.length > 20;
                            const tagElem = (
                              <Tag closable key={tag} afterClose={() => this.handleClose(tag)}>
                                {isLongTag ? `${tag.slice(0, 20)}...` : tag}
                              </Tag>
                            );
                            return isLongTag ? <Tooltip title={tag} key={tag}>{tagElem}</Tooltip> : tagElem;
                          })}
                          {
                            !this.state.inputVisible &&
                            <Button
                              size="small"
                              type="primary"
                              onClick={this.showInput}>
                              + 新增主营产品
                            </Button>
                          }
                        </div>
                        {this.state.inputVisible && (<div>
                          <TextArea
                            style={{ width: '300px', height: '100px' }}
                            value={this.state.inputValue}
                            onChange={(e) => {
                              this.setState({
                                inputValue: e.target.value
                              })
                            }} />
                          <div style={{ color: '#f00' }}>提示：请用 / 符号隔开关键字</div>
                          <div>
                            <Button
                              size="small"
                              type="primary"
                              onClick={this.handleInputConfirm}>
                              确定
                            </Button>
                            <Button
                              size="small"
                              style={{ marginLeft: '5px' }}
                              onClick={() => {
                                this.setState({
                                  inputVisible: false,
                                  inputValue: ''
                                })
                              }}>
                              取消
                            </Button>
                          </div>
                        </div>)}
                      </FormItem>
                    </div>
                    <div className="clearfix">
                      <FormItem
                        className="mid-item"
                        {...formItemLayout}
                        required
                        label="意向合作项目" >
                        <div>
                          <div style={{ paddingBottom: this.state.selectCooperationProjects.length === 0 ? 0 : '10px' }}>
                            {this.state.selectCooperationProjects.map((tag, index) => {
                              console.log(tag)
                              const isLongTag = tag.label.length > 20;
                              const tagElem = (
                                <Tag closable key={tag.label} afterClose={() => this.handleCloseCooperation(tag)}>
                                  {isLongTag ? `${tag.label.slice(0, 20)}...` : tag.label}
                                </Tag>
                              );
                              return isLongTag ? <Tooltip title={tag.label} key={tag.label}>{tagElem}</Tooltip> : tagElem;
                            })}
                          </div>
                          <div>
                            <AutoComplete
                              style={{ width: 200 }}
                              onSearch={this.supervisor}
                              onSelect={this.onSelect}
                              placeholder="请输入关键字"
                            >
                              {
                                this.state.cooperationProjects.map(function (item) {
                                  return <Select.Option key={item.id} value={item.id}>{item.bname}</Select.Option>
                                })
                              }
                            </AutoComplete>
                          </div>
                        </div>
                      </FormItem>
                    </div>
                    <div className="clearfix">
                      <FormItem
                        className="mid-item"
                        {...formItemLayout}
                        required
                        label="客户类型" >
                        <Select
                          placeholder="请选择客户类型"
                          value={this.state.level}
                          onChange={(e) => {
                            this.setState({ level: e });
                          }}
                        >
                          <Option value={0}>一般客户（一年以上预签）</Option>
                          <Option value={1}>意向客户（半年内预签）</Option>
                          <Option value={2}>重点客户（一个月内预签）</Option>
                        </Select>
                      </FormItem>
                    </div>
                    <div className="clearfix">
                      <FormItem
                        className="mid-item"
                        {...formItemLayout}
                        required
                        label="客户性质" >
                        {/* <Select
                          placeholder="请选择客户性质"
                          value={this.state.nature}
                          onChange={(e) => {
                            this.setState({ nature: e });
                          }}
                        >
                          <Option value={1}>政府机构</Option>
                          <Option value={2}>科研院所</Option>
                          <Option value={3}>高等院校</Option>
                          <Option value={4}>国有企业</Option>
                          <Option value={5}>民营企业</Option>
                          <Option value={6}>社会团体</Option>
                          <Option value={0}>其他（请注明）</Option>
                        </Select> */}
                        <Cascader
                          options={this.state.natureOptions}
                          placeholder="请选择客户性质"
                          value={this.state.nature}
                          onChange={e => { this.setState({ nature: e }) }}
                        />
                      </FormItem>
                    </div>
                    {
                      this.state.nature && this.state.nature.length && this.state.nature[0] === 0 ?
                      <div className="clearfix">
                        <FormItem
                          className="mid-item"
                          {...formItemLayout}
                          required
                          label="其他说明" >
                          <Input
                            placeholder="其他说明"
                            value={this.state.natureOther}
                            onChange={e => {
                              this.setState({
                                natureOther: e.target.value
                              })
                            }}
                          />
                        </FormItem>
                      </div> : null
                    }


                    { !this.state.verificationMyUser && (
                      <FormItem
                        {...formItemLayout}
                        required
                        help="帮助文档"
                        label="佐证资料" >
                        <div className="clearfix">
                        <ImgList
                          uploadConfig={{
                            action: globalConfig.context + "/api/user/achievement/uploadTextFile",
                            data: { 'sign': 'achievement_maturity_text_file' },
                            multiple: true,
                            listType: "picture-card",
                          }}
                          onChange={(infor) => {
                            this.handleFileChange(infor)
                          }}
                          fileList={this.state.fileList}
                        />
                        </div>
                      </FormItem>
                    ) }

                     { !this.state.verificationMyUser && <Col style={{ color: 'red', marginBottom: '10px' }} span={12} offset={6}>
                      注：请上传客户信息截图、电话记录等录入凭证图片
                    </Col> }

                  </div>
                  <FormItem wrapperCol={{ span: 12, offset: 6 }}>
                    <Button type="primary" htmlType="submit" style={{}}>领取客户</Button>
                  </FormItem>
                </Spin>
              </Form >
            </div>
          </Spin>
        </Modal>
      </div>
    );
  },
});
export default Form.create({})(QueryCustomer);
