index.js

import React, {Component} from 'react'
import {connect} from 'dva'
import share from '../../utils/share';
import styles from './AddUser.css'
import css from '../../routes/GovernorTraining/css.less'
import {Toast, InputItem, Picker,} from 'antd-mobile';
import DatePicker from "../../components/DatePicker";
import ConfirmPop from '../../components/Modal/confirmPop';
import shareHide from "../../utils/shareHide";
import {urlGetParams,getPlanInListWithCode,filterDate} from "../../utils/dataFilter";
import moment from 'moment';
moment.locale('zh-cn');

class AddUser extends Component {
  constructor(props) {
    super(props)
    this.state = {
      color:false,
      message:'',//提交至督训，确定
      labelList: ['医疗', '健康', '少儿', '意外', '温和', '严肃', '孝顺', '富有', '小康', '拮据'],
      addLabel:[],
      showLabelList:false,
      ageAry:[],
      provinceCitys:[],
      disabled:false,
      visible:false,
      submit:{
        title: '提示',
        content: '您是否确定添加该客户信息？',
        okText: '确认',
        cancelText: '取消',
      },
      matchs1:'',
      /* 客户信息*/
      id:null,
      name:"",
      sex:"0",    //1:女， 0：男
      age:"0",
      phone:"",
      maritalStatus:'',
      education:"",
      occupational:[],
      occupationalSelect:'',
      annualIncome:[],
      annualIncomeSelect:'',
      province:[],
      provinceSelect:'',
      address:"",
      regionData: [],
      reverseData:[],
      regionVal: '',
      asyncValue:[],
      product:[],
      productSelect:'',
      productCode:'',
      paymentList:[],
      payment:"",
      frequency:"",
      insuredAmount:"",
      birthday:'',
      loadingFlag:true,
    }
  }
  blur =()=>{
    let timer =  setTimeout(function(){
      // alert(1);
      if(document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA'){
        return
      }
      let result = 'pc';
      if(/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS
        result = 'ios'
      }else if(/(Android)/i.test(navigator.userAgent)) {  //判断Android
        result = 'android'
      }
      if( result = 'ios' ){
        document.querySelector('body').scrollIntoView();
      }
      clearTimeout(timer)
    },10)
  }
  hideModalConfirm = (v)=>{
    this.setState({
      visible:false,
    })
    // const isShare = localStorage.getItem('clientNeededInfoIsShare');
    const isShare = urlGetParams(window.location.href).isShare === '1' ? false : true;
    let that  = this;
    if (v === 'ok') {
      let aLabel = this.state.addLabel.toString();
      let cusManager = '';
      let address = window.location.href;
      const matchs = urlGetParams(window.location.href).id;
      if (matchs) {
        cusManager = matchs;
      }
      /* 确定 */
      this.props.dispatch({
        type:'addUser/addUser',
        payload:{
          "id":this.state.id||null,
          "name":this.state.name||'',
          "sex":this.state.sex,
          "age": this.state.birthday||"",
          // "birthday":this.state.birthday||'',
          "number":this.state.phone||'',
          "maritalStatus":this.state.maritalStatus||'',
          "education":this.state.education||'',
          "occupational":this.state.occupationalSelect||'',
          "annualIncome":this.state.annualIncomeSelect||'',
          "province":this.state.regionVal||'',
          //regionVal
          "address":this.state.address||'',
          "product":this.state.productSelect||'',
          "payment":this.state.payment===0?0:this.state.payment,
          "frequency":this.state.frequency||'',
          "insuredAmount":this.state.insuredAmount||"",
          'label': aLabel, //添加的label标签。
          "currentState":'0',//未提交状态
          "cusManager": cusManager==='' ? localStorage.getItem('id'):cusManager, //当前登录的经理id
        },
        callback() {
          !isShare && Toast.info('添加成功', 10000);
          isShare && that.props.history.replace('/myUser');
        },
        error(data){
          that.showToast(data.message)
        }
      })
    }
  }
  showToast=(val)=>{
    Toast.info(val,);
  }
  hideModalSubmit = (v)=>{
    this.setState({
      visible:false,
    })
    let that = this;
    if (v === 'ok') {
      let aLabel = this.state.addLabel.toString();
      /*提交至督训 */
      this.props.dispatch({
        type:'addUser/addUser',
        payload:{
          "id": this.state.id||null,
          "name":this.state.name||'',
          "sex":this.state.sex,
          "age":  this.state.birthday||"",
          "number":this.state.phone||'',
          // "birthday":this.state.birthday||'',
          "maritalStatus":this.state.maritalStatus||'',
          "education":this.state.education||'',
          "occupational":this.state.occupationalSelect||'',
          "annualIncome":this.state.annualIncomeSelect||'',
          "province": this.state.regionVal || '',
          "address":this.state.address||'',
          "product":this.state.productSelect,
          "payment":this.state.payment,
          "frequency":this.state.frequency||'',
          "insuredAmount":this.state.insuredAmount||"",
          'label': aLabel, //添加的label标签。
          "currentState":'3',//已提交状态
          "cusManager":localStorage.getItem('id'),
        },
        callback(){
          that.props.dispatch({
            type:'addUser/sendMaster',
            payload:{
              id:window.localStorage.getItem('superiorid'),
              customerName:window.localStorage.getItem('name')
            },
            callback(){
              that.props.history.push('/myUser')
            }
          })
        },
        error(data){
          that.showToast(data.message)
        }
      })
    }else{
    }
  }
  //获取产品列表
  getPlanList(){
    const storeItem = JSON.parse(localStorage.getItem('clientNeededInfo'));
    let that  =this;
    this.props.dispatch({
      type:'home/getPlanList',
      payload:{
        riskName:"",
        riskStatus:1,  //1 启用
      },
      callback(data){
        let ary = []
        for (var i = 0; i < data.length; i++) {
          ary.push({value:data[i].riskCode,label:data[i].riskName})
          that.setState({
            product:ary,
            productCode: (storeItem && storeItem.product) ? getPlanInListWithCode('label',storeItem.product,ary).value : '' ,
          })
        }
      },
    })
  }

  showModal = key => (e) => {
    e.preventDefault(); // 修复 Android 上点击穿透
    this.setState({
      [key]: true,
    });
  }
  onClose = key => (e) => {
    e.preventDefault();
    this.setState({
      [key]: false,
      initInsurance:true,
    });
  }
  /*  职业类型，所在省市，年收入  */
  Dictionaries = (params)=>{
    let that = this;
    this.props.dispatch({
      type:'addUser/Dictionaries',
      payload: params,
      callback(data){
        if(params.configType ==='jobType' ){
          let ary = []
          for (let i = 0; i < data.length; i++) {
            ary.push({value:data[i].configName,label:data[i].configName})
            that.setState({
              occupational:ary,
            })
          }
        }else if(params.configType ==='yearMoney'){
          let ary = []
          for (let i = 0; i < data.length; i++) {
            ary.push({value:data[i].configName,label:data[i].configName})
            that.setState({
              annualIncome:ary,
            })
          }
        }else if(params.configType ==='provinces'){
          let ary = []
          for (let i = 0; i < data.length; i++) {
            ary.push({value:data[i].configCode,label:data[i].configName})
            that.setState({
              province:ary,
            })
          }
        }else if(params.oyhers){
          let ary = []
          for (let i = 0; i < data.length; i++) {
            ary.push({value:data[i].configCode,label:data[i].configName})
            that.setState({
              provinceCitys:ary,
              modal15:true,
            })
          }
        }
      }
    })
  }
  setAgeRange() {
    let arr = [];
    for (let i = 0; i <= 100; i++){
      arr.push({ label:i+'岁',value:i})
    }
    return arr;
  }
  componentWillUnmount() {
    document.title = '';
  }
  componentWillMount(){
    Toast.loading('loading...',0);
    this.getPlanList();
  }
  componentDidMount() {

    const _this = this;
    let address = window.location.href;
    document.title = '客户信息';
    const matchs1 = urlGetParams(window.location.href).id
    if(matchs1){
        shareHide(false)
        let urlShare = "";
        if(urlGetParams(window.location.href).isShare){//处理多次转发参数问题
          urlShare = window.location.href;
        }else{
          urlShare = window.location.href + '&isShare=1';
        }
        share({
          decodeUrl: window.location.href.split('#')[0],
          title: '我是'+ localStorage.getItem('name')+'，您的保障待领取',
          desc: '您与保障之间的距离只差一步',
          shareUrl: urlShare,
          thumbnail: 'https://zmt.ihxlife.com/customer1.png'
        });
    }else {
      shareHide()
      const storeItem = JSON.parse(localStorage.getItem('clientNeededInfo'));
      if (storeItem) {
        _this.setState({
          "id": storeItem.id,
          "name": storeItem.name || '',
          "sex": storeItem.sex === '0' ? 0 : 1,
          "age": storeItem.age === '' ? 0 : storeItem.age,
          "birthday": storeItem.age === '' ? '' : storeItem.age,
          "phone": storeItem.number || '',
          "maritalStatus": storeItem.maritalStatus || '',
          "education": storeItem.education || '',
          "occupationalSelect": storeItem.occupational || '',
          "annualIncomeSelect": storeItem.annualIncome || '',
          "regionVal": storeItem.province || '',
          "address": storeItem.address,
          "productSelect": storeItem.product||'' ,
          "payment": storeItem.payment || '',
          "frequency": storeItem.frequency || '',
          "insuredAmount": storeItem.insuredAmount || "",
          addLabel: !storeItem.label ? [] : storeItem.label.split(','), //添加的label标签。
          "currentState": storeItem.currentState,
          cusManager: localStorage.getItem("id"),
        })
        if(storeItem.disabled1){
          _this.setState({
            disabled:true,
          })
        }
      }
    }
    let ageAry = []
    for (var i = 0; i < 101; i++) {
      ageAry.push({value:i,label:i})
    }
    this.setState({
      ageAry:ageAry,
      matchs1:matchs1,
    })
// 省市级联初始化
    let clientInfo = JSON.parse(localStorage.getItem("clientNeededInfo"));
    this.props.dispatch({
      type: "governortraining/getRegionList",
      payload: {
        configType: 'provinces',
        oyhers: 0
      },
      callback: (res) => {
        Toast.hide();
        if (res.status) {
          let { data } = res, arr = [];
          for (let i = 0, l = data.length; i < l; i++) {
            arr.push({
              label: data[i].configName,
              value: data[i].configCode,
              children: []
            })
          }
          this.setState({
            regionData: arr,
            loadingFlag:false
          }, () => {
            if (clientInfo) {
              const namearr = clientInfo.province.split(',');
              if (namearr.length) {
                let havedata = false;
                arr.forEach((element, i) => {
                  if (element.label==namearr[0]) {
                    havedata = true;//匹配到了有数据
                    console.log("6666666666666666666----->>>>",element)
                    _this.fillSecData(element.value, i, (list) => {
                      if (namearr[1]) {
                        list && list.forEach(el => {
                          if (el.configName === namearr[1]) {
                            _this.setState({
                              regionVal: element.label+','+el.configName,
                              asyncValue: [element.value, el.configCode]
                            })
                          }
                        });
                      } else {
                        _this.setState({
                          regionVal: element.label,
                          asyncValue: [element.value]
                        })
                      }
                    })
                  }
                });
                if(!havedata){//没有匹配到
                    _this.fillSecData(data[0].configCode, 0)
                }
              }
            } else {
              _this.fillSecData(data[0].configCode, 0)
            }
          })
        }
      }
    });
  }
  getDate=(date)=>{
    // let  date_value=date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
    let date_value = moment(date).format("YYYY-MM-DD");
    this.setState({
      birthday :date_value,
    })
  }
  handleDate1 = (val)=>{
    this.setState({birthday  : val});
  }
  reverseData(list) {
    let j = {};
    list.forEach((v) => {
      j[v.value] = { label: v.label };
      if (v.children && v.children.length) {
        j[v.value].children = {};
        v.children.forEach(val => {
          j[v.value].children[val.value] = val.label;
        })
      }
    })
    return j;
  }
  onRegionPickerChange(v) {
    const asyncValue = [...v];
    this.setState({
      asyncValue
    })
    if (this.state.regionData.length) {
      const { regionData } = this.state;
      for (let i = 0, l = regionData.length; i < l; i++) {
        if (regionData[i].value === v[0]) {
          this.fillSecData(v[0], i);
        }
      }
    }
  }
  fillSecData(v, i, cb) {
    const _this = this;
    let { regionData } = this.state;
    if (!regionData[i].children.length) {
      this.props.dispatch({
        type: "governortraining/getRegionList",
        payload: {
          configType: 'provinces',
          oyhers: v
        },
        callback(res) {
          if (res.status && res.data.length) {
            let { data } = res,arr=[];
            for (let i = 0, l = data.length; i < l; i++){
              arr.push({
                label: data[i].configName,
                value: data[i].configCode
              })
            }
            regionData[i].children = arr;
            _this.setState({
              regionData
            }, () => {
              const list = _this.reverseData(_this.state.regionData);
              let asyncValue = _this.state.asyncValue;
              if(asyncValue.length==1){
                asyncValue[1] = arr[0].value;
              }
              console.log(_this.state.regionVal,_this.state.asyncValue,list,list[_this.state.asyncValue[0]])
              _this.setState({
                reverseData: list,
                // regionVal:_this.state.regionVal,
                asyncValue: asyncValue
              },function(){
                 cb && cb(data);
              })
            })
          }
        }
      })
    }
  }
  render() {
    // const isShare = localStorage.getItem('clientNeededInfoIsShare');
    const isShare = urlGetParams(window.location.href).isShare === '1' ? false : true;
    const storeItem = JSON.parse(localStorage.getItem('clientNeededInfo'));
    const  frequency = [
      //趸交、月交、季交、半年交、年交
      {value:'月交',label:'月交'},
      {value:'季交',label:'季交'},
      {value:'半年交',label:'半年交'},
      {value:'年交',label:'年交'},
    ];
    if(this.state.loadingFlag){
      return <div></div>
    }
    let disabled_P = true;
    //华夏红你。华夏福。福临门不显示缴费频次
    if(this.state.productCode === '411405'||this.state.productCode === '411204'||this.state.productCode === '511403'){
        disabled_P = false;
    }
    return (
        <div style={{position:'relative',height:'100%',background:'white'}}>
          <DatePicker onRef = {(ref)=>{
                this.child = ref;
              }}  getDate = {(date)=>{
                this.getDate(date)
              }}
              birthday = {this.state.birthday ? moment(this.state.birthday).format("YYYY-MM-DD"):null}
               >
          </DatePicker>
          <div className={css.ac_wrap}>
            <div id="scrollSection">
              <ul className={css.aclist_wrap}>
                <li className={css.require}>
                  <InputItem
                    className={css.e_phoneNum}
                    type="text"
                    value={this.state.name}
                    disabled={this.state.disabled}
                    //editable={!this.state.disabled}
                    onBlur={::this.blur}
                    onChange={v => {

                      if(!this.state.disabled){
                        this.setState({
                          name: v,
                        })
                      }
                    }}
                    placeholder = {this.state.disabled?'':"请输入客户姓名"}
                  >姓名</InputItem>
                </li>
                <li>
                  <span className={css.label}>性别</span>
                  <Picker
                    data={[
                      { label: '男', value: 0 },
                      { label: '女', value: 1 }
                    ]}
                    cols={1}
                    value={[0]}
                    disabled={this.state.disabled}
                    onChange={
                      s => {
                        this.setState({sex:s[0]})
                      }
                    }
                  >
                    <div className={css.choose}><span  className={styles.black}>{this.state.sex == 0 ? '男' : '女'}</span></div>
                  </Picker>
                  {!this.state.disabled && <div className={css.icon_arrow}></div>}
                </li>
                <li >
                  <span className={css.label}>出生日期</span>
                  <span
                    className={this.state.birthday?styles.black:''}
                    style={{width:'3rem',lineHeight: '.5rem',
                      fontSize:'.15rem',
                      color:'#999',
                    }} onClick={()=>{
                    if(!this.state.disabled){
                      this.child.showDate1()
                    }
                  }}> {this.state.disabled?this.state.birthday:this.state.birthday?this.state.birthday:'请选择出生日期'}</span>
                  {!this.state.disabled && <div className={css.icon_arrow}></div>}
                </li>
                <li className={css.require}>
                  <InputItem
                    className={css.e_phoneNum}
                    type="phone"
                    value={this.state.phone}
                    disabled={this.state.disabled}
                    onBlur={::this.blur}
                    onChange={v => {

                      if(!this.state.disabled){
                        this.setState({
                          phone: v.replace(/\s*/g, ''),
                        })
                      }
                      this.setState({
                        
                      })
                    }}
                    placeholder = "请输入手机号码"
                  >手机号码</InputItem>
                </li>
                <li>
                  <span className={css.label}>婚姻状况</span>
                  <Picker
                    data={[
                      { label: '未婚', value: '未婚' },
                      { label: '已婚', value: '已婚' },
                      { label: '离异', value: '离异' }
                    ]}
                    cols={1}
                    value={[this.state.maritalStatus]}
                    disabled={this.state.disabled}
                    onChange={
                      s => this.setState({maritalStatus:s[0]})
                    }
                  >
                    <div className={css.choose}><span className={this.state.maritalStatus?styles.black:''}>{this.state.disabled?this.state.maritalStatus:this.state.maritalStatus?this.state.maritalStatus:'请选择婚姻状况'}</span></div>
                  </Picker>
                  {!this.state.disabled && <div className={css.icon_arrow}></div>}
                </li>
                <li>
                  <span className={css.label}>学历</span>
                  <Picker
                    data={[
                      { label: '初中及以下', value: '初中及以下' },
                      { label: '高中', value: '高中' },
                      { label: '大专', value: '大专' },
                      { label: '本科', value: '本科' },
                      { label: '硕士', value: '硕士' },
                      { label: '博士', value: '博士' },
                      { label: '其他', value: '其他' }
                    ]}
                    disabled={this.state.disabled}
                    cols={1}
                    value={['本科']}
                    onChange={
                      s => this.setState({education:s[0]})
                    }
                  >
                    <div className={css.choose}><span className={this.state.education?styles.black:''}>{this.state.disabled?this.state.education:this.state.education!=='' ? this.state.education : '请选择学历'}</span></div>
                  </Picker>
                  {!this.state.disabled && <div className={css.icon_arrow}></div>}
                </li>
              </ul>
              <ul className={css.aclist_wrap}>
                <li onClick={()=>{this.Dictionaries({configType:'jobType'})}}>
                  <span className={css.label}>职业类型</span>
                  <Picker
                    data={this.state.occupational}
                    cols={1}
                    disabled={this.state.disabled}
                    onChange={
                      s =>{
                        this.setState({occupationalSelect:s[0]})
                      }
                    }
                  >
                    <div className={css.choose}><span className={this.state.occupationalSelect?styles.black:''}>{this.state.disabled?this.state.occupationalSelect:this.state.occupationalSelect||'请选择职业类型'}</span></div>
                  </Picker>
                  {!this.state.disabled && <div className={css.icon_arrow}></div>}
                </li>
                <li onClick={()=>{this.Dictionaries({configType:'yearMoney'})}}>
                  <span className={css.label}>年收入(万元)</span>
                  <Picker
                    data={this.state.annualIncome}
                    cols={1}
                    disabled={this.state.disabled}
                    onChange={
                      s =>{
                        this.setState({annualIncomeSelect:s[0]})
                      }
                    }
                  >
                    <div className={css.choose}><span className={this.state.annualIncomeSelect?styles.black:''}>{this.state.disabled?this.state.annualIncomeSelect:this.state.annualIncomeSelect||'请选择年收入'}</span></div>
                  </Picker>
                  {!this.state.disabled && <div className={css.icon_arrow}></div>}
                </li>
              </ul>
              <ul className={css.aclist_wrap}>
                <li>
                  <span className={css.label}>所在省市</span>
                  <Picker
                    data={this.state.regionData}
                    cols={2}
                    disabled={this.state.disabled}
                    value={this.state.asyncValue}
                    onPickerChange={this.onRegionPickerChange.bind(this)}
                    onOk={(v) => {
                      // const asyncValue = [...v];
                      const asyncValue = [...v].length>1 ? [...v] : this.state.asyncValue;
                      const { reverseData } = this.state;
                      let label = '';
                      label = asyncValue.length > 1 ? reverseData[asyncValue[0]].label + ',' + reverseData[asyncValue[0]].children[asyncValue[1]] : reverseData[asyncValue[0]].label;
                      this.setState({
                        regionVal: label,
                        asyncValue:asyncValue
                      })
                    }}
                  >
                    <div className={css.choose}>
                      <span className={this.state.regionVal?styles.black:''}>{this.state.disabled?this.state.regionVal:this.state.regionVal === '' ? '请选择所在省市' : this.state.regionVal}</span>
                    </div>
                  </Picker>
                  {!this.state.disabled && <div className={css.icon_arrow}></div>}
                </li>
                <li>
                  <InputItem
                    className={css.e_phoneNum}
                    type="text"
                    value={this.state.address}
                    disabled={this.state.disabled}
                    onBlur={::this.blur}
                    onChange={v=>this.setState({address:v})}
                    placeholder = {this.state.disabled?'':"请输入详细地址"}
                  >详细地址</InputItem>
                </li>
              </ul>
              <ul className={css.aclist_wrap}>
                <li>
                  <span className={css.label}>希望购买的产品</span>
                  <Picker
                    data={this.state.product}
                    cols={1}
                    disabled={this.state.disabled}
                    value={[this.state.productSelect]}
                    onChange={
                      s =>{
                        let namelabel = getPlanInListWithCode('value',s[0],this.state.product).label;
                        this.setState({
                          productSelect: namelabel,
                          productCode: s[0],
                          payment:"",
                        })
                      }
                    }
                  >
                    <div className={css.choose}>
                      <span className={this.state.productSelect?styles.black:''}>{this.state.disabled?this.state.productSelect : this.state.productSelect == '' ? "请选择产品": this.state.productSelect}</span>
                    </div>
                  </Picker>
                  {!this.state.disabled && <div className={css.icon_arrow}></div>}
                </li>
                <li onClick={()=>{
                  if(this.state.disabled){
                    return;
                  }
                  if(this.state.productCode){
                    let that  =this;
                    let date = new Date();
                    let nowDate = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
                    this.props.dispatch({
                      type:'planEditor/PremiumPaymentPeriod',
                      payload:{
                        "riskCode":this.state.productCode,
                        // "maxAge":this.state.,
                        "birthday": this.state.productCode=='511404' ? nowDate : '1981-02-23',
                        "pageNo":1,
                        "mainCode": this.state.productCode
                      },
                      callback(data){
                        let paymentList = [];
                        for (var i = 0; i < data.length; i++) {
                          paymentList.push({value:data[i].payTime,label:data[i].payTimeName,})
                        }
                        that.setState({
                          paymentList:paymentList,
                        })
                      }
                    })
                  }else{
                    Toast.info('请选择产品！',)
                    return false;
                  }
                }}>
                  <span className={css.label}>缴费期间</span>
                  <Picker
                    data={this.state.paymentList}
                    cols={1}
                    //disabled={this.state.productCode==''?true:false}
                    disabled={this.state.disabled ? this.state.disabled: this.state.productCode==''?true:false}
                    onChange={
                      s =>{
                        this.setState({payment:s[0]===0?'趸交':s[0]+'年交'})
                      }
                    }
                  >
                    <div className={css.choose}><span className={this.state.payment !==''?styles.black:''}>{this.state.disabled?this.state.payment :this.state.payment === '' ? '请选择缴费期间':this.state.payment}</span></div>
                  </Picker>
                  {!this.state.disabled && <div className={css.icon_arrow}></div>}
                </li>
                {disabled_P &&
                  <li>
                    <span className={css.label}>缴费频次</span>
                    <Picker
                      disabled={this.state.disabled}
                      data={frequency}
                      cols={1}
                      onChange={
                        s =>{
                          this.setState({frequency:s[0]})
                        }
                      }
                    >
                      <div className={css.choose}><span className={this.state.frequency !=''?styles.black:''}>{this.state.disabled?this.state.frequency == '' ?"":this.state.frequency==0? '趸交' : this.state.frequency:this.state.frequency == '' ?'请选择缴费频次':this.state.frequency==0? '趸交' : this.state.frequency}</span></div>
                    </Picker>
                    {!this.state.disabled && <div className={css.icon_arrow}></div>}
                  </li>
                }
                <li>
                  <InputItem
                    className={css.e_phoneNum}
                    type="phone"
                    value={this.state.insuredAmount}
                    disabled={this.state.disabled}
                    onBlur={::this.blur}
                    onChange={v => {
                      this.setState({
                        insuredAmount: v.replace(/\s+/g,''),
                      })
                    }}
                    placeholder = {this.state.disabled?'':"请输入保额"}
                  >保额</InputItem>
                </li>
              </ul>
              <div style={{minHeight:"180px",marginBottom:"0.75rem"}}>
                {
                  this.state.matchs1 && <div className={styles.shareBox}>
                    {/*<span className={styles.share}>分享</span>*/}
                    <span className={styles.userAdd}>可分享空白页面至客户自己填写</span>
                    <span style={{display: 'block', clear: 'both',height:'1px',marginTop:'-1px',overflow:'hidden'}}></span>
                  </div>
                }
                <div className={styles.partingLine}>
                  <span className={styles.left}></span>
                  <span className={styles.mine}>客户标签</span>
                  <span className={styles.right}></span>
                </div>

                { !this.state.showLabelList &&
                <div style={{paddingLeft: '.11rem'}}>
                  <div style={{ overflow: 'hidden', width: '100%' }}>
                    {
                      this.state.addLabel.map((item,index)=>{
                        return (
                          <li key={index} className={styles.li+' '+ styles.check}>
                            <span >{item}</span>
                          </li>
                        )
                      })
                    }
                  </div>
                  {!this.state.disabled
                  &&<div className={styles.addLabel} onClick={()=>{
                    this.setState({
                      showLabelList:!this.state.showLabelList,
                    })
                  }
                  }>
                    <span>+  {!this.state.addLabel.length?'添加':'更改'}标签</span>
                  </div>
                  }
                </div>
                }

                {
                  this.state.showLabelList && <div className={styles.label}>
                    <ul>
                      {
                        this.state.labelList.map((item,index)=>{
                          let ischeck = false;
                          let { addLabel } = this.state;
                          for (let i = 0; i < addLabel.length; i++) {
                            if (item === addLabel[i]) {
                              ischeck = true;
                              break;
                            }
                          }
                          return (
                            <li key={index} className={styles.li+' '+(ischeck?styles.check:'')}
                                onClick={() => {
                                  let isck = false;
                                  for (let i = 0; i < addLabel.length; i++) {
                                    if (item === addLabel[i]) {
                                      isck = true;
                                      addLabel.splice(i, 1);
                                      this.setState({
                                        addLabel
                                      })
                                      break;
                                    }
                                  }
                                  !isck && this.setState({
                                    addLabel: [...addLabel,item]
                                  })
                                }}>
                              {
                                !ischeck &&  <span>+ </span>
                              }
                              <span>{item}</span>
                            </li>
                          )
                        })
                      }
                    </ul>
                    <img src={require('../../assets/image/confirmAdd.png')} alt="" onClick={()=>{
                      this.setState({
                        showLabelList:!this.state.showLabelList,
                      })
                    }
                    } />
                  </div>
                }

              </div>
            </div>
          </div>

          <div>
            {!this.state.disabled && <div className={styles.bottom}>
              <div className={styles.right}>
              <span className={styles.color}
                    onClick={()=>{
                      console.log(this.state.name);
                      console.log(this.state.name.length);
                      if(this.state.name ==''){
                        this.showToast('请输入姓名!')
                        return false;
                      }else if(this.state.phone==''){
                        this.showToast('请输入手机号!')
                        return false;
                      }else if(this.state.phone.length !=11){
                        this.showToast('请输入正确的手机号!')
                        return false;
                      }
                      this.setState({
                        color:false,
                        visible:true,
                        message:'确定',
                        submit:{ title: storeItem?'修改':'提示',
                          content: '您是否确定' + (storeItem ? '修改' : '添加') + '该客户信息？',
                          okText: '确认',
                          cancelText: '取消',}
                      })
                    }}>确定</span>
                {isShare && <span onClick={() => {
                  if (this.state.name === '') {
                    this.showToast('请输入姓名!')
                    return false;
                  } else if (this.state.phone === '') {
                    this.showToast('请输入手机号!')
                    return false;
                  }else if(this.state.phone.length !=11){
                    this.showToast('请输入正确的手机号!')
                    return false;
                  }
                  this.setState({
                    color: true,
                    visible: true,
                    message: '督训',
                    submit: {
                      title: '提交',
                      content: '您是否确定将该条客户信息提交？',
                      okText: '确认',
                      cancelText: '取消',
                    }
                  })
                }}>提交</span>
                }
              </div>
            </div>
            }
            <ConfirmPop show={this.state.visible} 
                        title={this.state.submit.title}
                        handleOK={() => {
                          if (this.state.message !== '督训') {
                            this.hideModalConfirm('ok');
                          } else {
                            this.hideModalSubmit('ok');
                          }
                        }}
                        handleCancel={() => {
                          this.setState({
                            visible: false
                          })
                        }}
            >
              <p style={{ width:'80%',margin:'0 auto .2rem'}}>{this.state.submit.content}</p>
            </ConfirmPop>
            {
              this.state.disabled && <div style={{position:'absolute',top:0,left:0,right:0,bottom:0,opacity:0}}></div>
            }
          </div>

        </div>
    )
  }
}
AddUser.propsTypes = {}
export default connect()(AddUser)