import React, { Fragment } from 'react';
import {
  Button, Cascader, Input, Select, Tag,
  Spin, Table, message, Form, Col, Tabs, Modal, Icon, AutoComplete, Upload
} from 'antd';
import ajax from 'jquery/src/ajax/xhr.js';
import $ from 'jquery/src/ajax';
import {areaSelect, citySelect, provinceList } from '@/NewDicProvinceList';
import { beforeUploadFile, ShowModal, onReplace } from '../../../../tools.js'
import { socialAttribute, customerSource } from '@/dataDic.js';
import Outbound from '../../NEW/components/outbound';
import ShowModalDiv from "@/showModal.jsx";
import { ChooseList } from "../../../order/orderNew/chooseList";
import TextArea from "antd/es/input/TextArea";
import ImgList from '../../../../common/imgList/index.js';



const QueryCustomer = React.createClass({
  loadData(pageNo, apiUrl) {
    // 新需求 除湖南和内蒙古外 不让其他省操作
    if (adminData.province != "21" && adminData.province != "11" || adminData.province != "2") {
      return
    }
    this.setState({
      loading: true,
      ispage: pageNo,
    });
    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,
        province: !this.state.addressSearch.length
          ? this.state.provinceSearch
          : this.state.addressSearch[0],
        city: !this.state.addressSearch.length
          ? ""
          : this.state.addressSearch[1],
        sort: this.state.sort
      },
      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];
            theArr.push({
              key: i,
              id: thisdata.uid,
              name: thisdata.name,
              contacts: thisdata.contacts,
              contactMobile: thisdata.contactMobile,
              signBills: thisdata.signBills,
              createTime:
                thisdata.createTime && thisdata.createTime.split(" ")[0],
              transferTime:
                thisdata.transferTime && thisdata.transferTime.split(" ")[0],
              locationProvince: thisdata.province
                ? (thisdata.province || '') + (thisdata.city ? "-" + thisdata.city : '') + (thisdata.area ? "-" + thisdata.area : '')
                : "--",
              myUser: thisdata.myUser
            });
          }
          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: [],
        });
      }.bind(this),
    }).always(
      function () {
        this.setState({
          loading: false,
        });
      }.bind(this)
    );
  },
  getInitialState() {
    return {
      verification: false,
      businessScope: [],
      cooperationProjects: [],
      selectCooperationProjects: [],

      sort: 0,
      addressSearch: [],
      dataSource: [],
      loading: false,
      selectedRowKeys: [],
      selectedRows: [],
      selectedData: [],
      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, index) =>
          onReplace(text)
      },
      {
        title: '地区',
        dataIndex: 'locationProvince',
        key: 'locationProvince',
      },
      // {
      // 	title: '联系人',
      // 	dataIndex: 'contacts',
      // 	key: 'contacts',
      // },{
      // 	title: '联系电话',
      // 	dataIndex: 'contactMobile',
      // 	key: 'contactss',
      // },
      {
        title: '创建时间',
        dataIndex: 'createTime',
        key: 'createTime',
      },
      {
        title: '转换时间',
        dataIndex: 'transferTime',
        key: 'transferTime',
        width: 500,
        render: (text, record) => {
          return <div>
            <span style={{ marginRight: 20 }}>{text}</span>
            {!this.props.intentionState &&
              <Outbound
                type="public"
                uid={record.id}
              />}
          </div>
        }
      },
      {
        title: '操作',
        dataIndex: 'abc',
        key: 'abc',
        width: 250,
        render: (text, record, index) => {
          return <div>
            <Button onClick={(e) => { e.stopPropagation(), this.receive(record) }} type="primary">领取</Button>
            <Button
              onClick={(e) => {
                e.stopPropagation(),
                  this.rTips(record)
              }}
              style={{ marginLeft: 10 }}
              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) {
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + '/api/admin/order/getBusinessProjectByName',
      data: {
        businessName: value
      },
      success: function (data) {
        let thedata = data.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));
  },

  /*单个领取（旧）*/
  receives(e) {
    this.setState({
      loading: true,
      selectedRowKeys: [],
    });
    $.ajax({
      method: "get",
      dataType: "json",
      crossDomain: false,
      url: globalConfig.context + "/api/admin/customer/receiveCustomer",
      data: {
        uid: e.id,
      }
    }).done(function (data) {
      if (!data.error.length) {
        message.success(e.signBills == 1 ? '领取成功！客户为签单客户，请在【签单单位客户】列表中查询' : '领取成功！客户为私有客户，请在【私有单位客户】列表中查询');
        this.setState({
          loading: false,
        });
      } else {
        message.warning(data.error[0].message);
      };
      this.loadData(this.state.ispage);
    }.bind(this));
  },
  rTips(e) {
    let _this = this;
    Modal.confirm({
      title: "温馨提示",
      content: (
        <span style={{ color: "red" }}>
          <p>名称中含“协会”“商会”等名称为渠道信息！</p>
          <p>您是否确定将客户信息，领取为“私有渠道”信息，领取后，该信息即成为渠道信息不可再修改！！！</p>
          <p>领取成功后，您可以通过：渠道管理-渠道列表-私有渠道，查询到此条信息</p>
        </span>
      ),
      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.id,
      }
    }).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));
  },
  closeDesc(e) {
    this.state.visitModul = e;
  },
  search() {
    this.loadData();
  },
  reset() {
    this.state.nameSearch = '';
    this.state.provinceSearch = undefined;
    this.state.addressSearch = [];
    this.state.sort = 0
    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() {
    //城市
    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();
  },
  changeList(arr) {
    const newArr = [];
    this.state.columns.forEach(item => {
      arr.forEach(val => {
        if (val === item.title) {
          newArr.push(item);
        }
      });
    });
    this.setState({
      changeList: newArr
    });
  },
  // 补充客户并领取
  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();
  },

  handleFileChange(info) {
    let fileList = info.fileList;
    this.setState({ fileList });
  },

  render() {
    const intentionState = this.props.intentionState;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };
    const FormItem = Form.Item;
    const { TabPane } = Tabs
    const rowSelection = {
      selectedRowKeys: this.state.selectedRowKeys,
      onChange: (selectedRowKeys, selectedRows) => {
        this.setState({
          selectedRows: selectedRows,
          selectedRowKeys: selectedRowKeys
        });
      },
      onSelect: (recordt, selected, selectedData) => {
        this.setState({
          selectedData: selectedData,
          recordt: recordt.id
        })
      },

    };
    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
                placeholder="客户名称"
                value={this.state.nameSearch}
                style={{ width: 150 }}
                onChange={(e) => {
                  this.setState({ nameSearch: e.target.value });
                }}
              />
              <Select
                placeholder="省"
                style={{ width: 80 }}
                value={this.state.provinceSearch}
                onChange={(e) => {
                  this.setState({ provinceSearch: e });
                }}
              >
                {this.state.Provinces}
              </Select>
              <span style={{ marginRight: "10px" }}>
                <Cascader
                  options={citySelect()}
                  value={this.state.addressSearch}
                  placeholder="选择城市"
                  onChange={(e, pre) => {
                    this.setState({ addressSearch: e });
                  }}
                />
              </span>
              <span>排序：</span>
              <Select style={{ width: 120 }} value={this.state.sort} onChange={e => { this.setState({ sort: e }) }} placeholder="选择排序">
                <Option value={0}>默认</Option>
                <Option value={1}>降序</Option>
                <Option value={2}>升序</Option>
              </Select>
              <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>
        <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) => {
                              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
                        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);
