import {
  Button,
  Modal,
  message,
  Row,
  Col,
  Spin,
  Input
} from 'antd';
import {
  WeaErrorPage,
  WeaPopoverHrm,
  WeaTools,
  WeaSearchBrowserBox,
  WeaTableEdit,
  WeaDialog,
  WeaSearchGroup,
  WeaRightMenu,
  WeaFormItem,
  WeaQrcode,
  WeaTextarea
} from 'ecCom'
import isEmpty from 'lodash/isEmpty'
import debounce from 'lodash/debounce'
import isArray from 'lodash/isArray'
import '../../style/cardInfo.less';
import {
  InfoGroup4Formal3,
  InfoGroup4Formal2
} from '../../coms/infoGroup4Formal';
import * as PublicFunc from '../../util/pulic-func';
import {
  createQRCode
} from '../../util';
import UploadAvatar from '../../../../pc4public/hrm/uploadAvatar'
import TopButton from '../../coms/topButton';
import {
  WeaSwitch
} from 'comsMobx';
import * as mobx from 'mobx';
import {
  inject,
  observer
} from 'mobx-react';
import {i18n} from '../../public/i18n';
import {addContentPath} from '../../util/index.js'
const getKey = WeaTools.getKey;
const toJS = mobx.toJS;
const InputGroup = Input.Group;

@inject('hrmCardInfo4Formal')
@inject('hrmCard')
@observer
class Main extends React.Component {
  constructor(props) {
    super(props);
    const funcs = ['showSQR', 'editCard', 'backCard', 'saveEditCard'];
    funcs.forEach(f => this[f] = this[f].bind(this));
    this.state = {
      editable: false,
      textVal: ''
    }
  }

  clickHandle = () => {
    const {
      hrmCardInfo4Formal
    } = this.props;
    const {
      isSelf
    } = hrmCardInfo4Formal;
    if (!this.state.editable && isSelf) {
      this.setState({
        editable: true
      })
      this.textareaDom.refs.textareaNormal.refs.input.refs.input.focus();
    }
  }

  componentWillUnmount() {
    // this.divDom && this.divDom.removeEventListener('click', this.clickHandle);
  }

  onBlurHandle = (value) => {
    const {
      hrmCardInfo4Formal
    } = this.props;
    const {
      saveRemark,
      hrmId
    } = hrmCardInfo4Formal;
    let urlParams = {
      remark: value
    }
    hrmId != '' && Object.assign(urlParams, {
      id: hrmId
    })
    saveRemark(urlParams);

    this.setState({
      editable: false,
      textVal: value
    })
  }

  componentWillReceiveProps(nextProps) {
    const keyOld = this.props.location.key;
    const keyNew = nextProps.location.key;
    if (keyOld !== keyNew) {
      const {
        hrmCardInfo4Formal
      } = this.props;
      hrmCardInfo4Formal.updateIsEditor();
    }
  }
  componentDidMount() {
    // this.divDom && this.divDom.addEventListener('click', this.clickHandle);
    const {
      hrmCardInfo4Formal, hrmCard
    } = this.props;
    const hrmId = this.props.params.hrmId || '';
    hrmCardInfo4Formal.updateIsEditor();
    hrmCardInfo4Formal.getData(hrmId);
    hrmCardInfo4Formal.getRightMenu(hrmId);
    const isEditor = this.props.location.query.isEditor || '';
    if (isEditor == 'true') {
      this.editCard();
    }
    hrmCard.setTopButtons(this.getTopButtons.bind(this));
    hrmCard.setTopRightMenus(this.getRightMenu.bind(this));
    hrmCard.setTopShowDropIcon(true);
  }
  showSQR(bool, e) {
    const {
      hrmCardInfo4Formal
    } = this.props;
    e.stopPropagation && e.stopPropagation();
    e.preventDefault && e.preventDefault();
    e.nativeEvent && e.nativeEvent.preventDefault();
    hrmCardInfo4Formal.updateShowSQR(bool);
  }
  getIcon(str) {
    switch (str) {
      case 'sendEmessage':
        return 'icon-coms-Send-message';
      case 'openmessage':
        return 'icon-coms-message-o';
      case 'openemail':
        return 'icon-coms-Send-emails';
      case 'doAddWorkPlan':
        return 'icon-coms-New-schedule-o';
    }
  }

  getRightMenu() {
    const {
      hrmCardInfo4Formal, hrmCard
    } = this.props;
    let {
      isEditor,
      buttons,
      rightMenus
    } = hrmCardInfo4Formal;
    buttons = toJS(buttons);
    rightMenus = toJS(rightMenus);
    let arr = [];
    if (isEditor) {
      arr = [{
        icon: <i className='icon-coms-common'/>,
        content: i18n.button.save(),
        key: 'save',
        onClick: key =>{
          this.saveEditCard();
        }
      }, {
        icon: <i className='icon-coms-go-back'/>,
        content: i18n.button.back(),
        key: 'back',
        onClick: key =>{
          this.backCard();
        }
      }]
    } else {
      !isEmpty(rightMenus) && rightMenus.forEach((c) => {
        let item = {
          icon: <i className={`${c.menuIcon}`}/>,
          content: c.menuName,
          key: c.menuFun,
          onClick: key =>{
            const menuFun = c.menuFun;
            if(menuFun === 'showPortraitSetting')
              hrmCard[menuFun] && hrmCard[menuFun]();
            this[menuFun] && this[menuFun](c.params);
          }
        }
        
        if((c.type === 'BTN_SetUserIcon' && hrmCard.uploadPortrailAuth) || c.type != 'BTN_SetUserIcon')
          arr.push(item);
      })
    }
    return arr;
  }

  showLog(params){
    window.setLogViewProps(params);
  }

  sendSmsMessage() {
    const {
      params
    } = this.props;
    let id = params.hrmId;
    if (id) PublicFunc.sendSmsMessage(id);
  }

  sendMail() {
    const {
      params
    } = this.props;
    let id = params.hrmId;
    if (id) PublicFunc.sendMail(id);
  }

  doAddWorkPlanByHrm() {
    const {
      params
    } = this.props;
    let id = params.hrmId;
    if (id) PublicFunc.doAddWorkPlanByHrm(id);
  }

  addCoWork() {
    const {
      params
    } = this.props;
    let id = params.hrmId;
    if (id) PublicFunc.addCoWork(id);
  }
  getTopButtons() {
    const {
      hrmCardInfo4Formal
    } = this.props;
    let {
      isEditor,
      buttons
    } = hrmCardInfo4Formal;
    buttons = toJS(buttons);
    const save = <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@rclk13`} type="primary" onClick={this.saveEditCard} >{i18n.button.save()}</Button>;
    const back = <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@vkbvj2`} type="primary" onClick={this.backCard} >{i18n.button.back()}</Button>;
    const edit = <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@90awx3`} type="primary" onClick={this.editCard} >{i18n.button.modify()}</Button>;
    const btns = [];
    if (buttons == null)
      return btns;
    if (isEditor) {
      if (!isEmpty(buttons) && buttons.hasSave) {
        btns.push(save);
        btns.push(back);
      }
    } else {
      if (!isEmpty(buttons) && buttons.hasEdit) {
        btns.push(edit);
      }
    }
    return btns;
  }

  editCard() {
    const hrmId = this.props.params.hrmId || '';
    const {
      hrmCardInfo4Formal
    } = this.props;
    hrmCardInfo4Formal.edit(hrmId);
  }

  saveEditCard() {
    const hrmId = this.props.params.hrmId || '';
    const {
      hrmCardInfo4Formal,
      hrmCard
    } = this.props;
    hrmCardInfo4Formal.saveEditCard(() => {
      hrmCard.getTabBaseInfo({
        id: hrmId
      });
      hrmCard.setupdateStatus();
    });
  }

  backCard() {
    const hrmId = this.props.params.hrmId || '';
    const {
      hrmCardInfo4Formal
    } = this.props;
    hrmCardInfo4Formal.updateIsEditor();
    hrmCardInfo4Formal.qrcode(hrmId);
    hrmCardInfo4Formal.updateShowSQR(false);
  }
  getSearchs() {
    const {
      hrmCardInfo4Formal
    } = this.props;
    let {
      conditioninfo,
      hideBelongto,
      isEditor,
      form,
      validate,
    } = hrmCardInfo4Formal;
    let group = [];
    const {
      isFormInit
    } = form;
    let idx = 0;
    window.e9HideFormFieldKeys = [];
    isFormInit && conditioninfo.forEach((c, i) => {
      let items = [];
      idx++;
      if (c.hasResourceImage) {
        let resourceimg;
        let baseGroup = <div>
                    <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@ld6kz9@${i}`} className={`${isEditor?'hrm-base-group-title':''}`} needTigger={true} hide={c.hide} title={c.title} showGroup={c.defaultshow}>
                      <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@gbecy1@${i}`}>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@1euzq6@${i}`} span={12}>
                          {
                            c.items.forEach( (field, j) => {
                              let dom = <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@x15nqo@${j}`} fieldConfig={field} form={form} onChange={(v)=> {
                                  if (v.accounttype) {
                                    hrmCardInfo4Formal.updateHideBelongto(v.accounttype.value == '0');
                                  }
                                }}/>
                              if (field.conditionType == 'RESOURCEIMG' || (field.domkey && field.domkey[0] == 'belongto' && hideBelongto)) {
                              } else {
                                if(c.hide || !isEmpty(field.otherParams) && field.otherParams.hide){
                                  window.e9HideFormFieldKeys.push(field.domkey[0]);
                                }else{
                                  items.push({
                                    com:(<div style={{paddingLeft: 30}}><WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@dus76r@${j}`}
                                      label={`${field.label}`}
                                      labelCol={{span: `${window.HrmLabelCol}`}}
                                      wrapperCol={{span: `${window.HrmWrapperCol}`}}>
                                        {dom}
                                      </WeaFormItem></div>),
                                    colSpan: 1
                                  });
                                }
                              }
                            })
                          }
                          <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@ctmcbu@${i}`} className={`${isEditor?'hrm-base-group':''}`} needTigger={true} hide={c.hide} title={c.title} showGroup={c.defaultshow} items={items} col={1}/>
                        </Col>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ztjz4u@${i}`} span={12}>
                          {
                            c.items.forEach( (field, j) => {
                              if(!isEmpty(validate)&&validate[36] && validate[36].isValidate){
                                if (field.conditionType == 'RESOURCEIMG') {
                                  const key = getKey(field);
                                  const bindObj = form.$(key);
                                  resourceimg = <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@07h3nl@${j}`}
                                  label={`${field.label}`}
                                  labelCol={{span: `${window.HrmLabelCol}`}}
                                  wrapperCol={{span: `${window.HrmWrapperCol}`}}>
                                    <UploadAvatar ecId={`${this && this.props && this.props.ecId || ''}_UploadAvatar@ennn7j@${j}`} {...bindObj.bind()}/>
                                  </WeaFormItem>
                                } 
                              }
                            })
                          }
                          {resourceimg}
                        </Col>
                      </Row>
                    </WeaSearchGroup>
                  </div>
        group.push(baseGroup);
      } else {
        c.items.forEach((field, j) => {
          if(c.hide || (!isEmpty(field.otherParams) && field.otherParams.hide)){
            window.e9HideFormFieldKeys.push(field.domkey[0]);
          }else{
            let dom = <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@imgvff@${j}`} fieldConfig={field} form={form} onChange={(v)=> {
                if (v.accounttype) {
                  hrmCardInfo4Formal.updateHideBelongto(v.accounttype.value == '0');
                }
              }}/>
            if (field.conditionType == 'RESOURCEIMG' || (field.domkey && field.domkey[0] == 'belongto' && hideBelongto)) {
            } else {
              items.push({
                com: (<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@8jawyg@${j}`}
                    label={`${field.label}`}
                    labelCol={{span: `${window.HrmLabelCol}`}}
                    wrapperCol={{span: `${window.HrmWrapperCol}`}}>
                      {dom}
                    </WeaFormItem>),
                colSpan: 1
              });
            }
          }
        });
        group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@wpi4gb@${i}`} className={`${isEditor?'hrm-center':''} ${c.isHide?'wea-hide':''}`} needTigger={true} hide={c.hide} title={c.title} showGroup={c.defaultshow} items={items} col={window.HrmGroupCol}/>)
      }
    });
    return group
  }

  getPortraitButtons(){
    const colArr = [];
    const {hrmCardInfo4Formal} = this.props;
    let {sendButtons, validate} = hrmCardInfo4Formal;
    sendButtons = toJS(sendButtons);
    const emJoinStatus = window.emJoinStatus;
    isArray(sendButtons) && sendButtons.forEach((item, i) => {
      let status = true;
      if(item.name == 'sendEmessage'){
        status = emJoinStatus ? (!emJoinStatus.joinStatus ||
          (emJoinStatus.status &&
            emJoinStatus.joinStatus &&
            emJoinStatus.emSwitch !== "0")) : false;
      }
      if(status && !isEmpty(validate)&&validate[item.validateId] && validate[item.validateId].isValidate){
        colArr.push(
          <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@l34ivx@${i}`} span={6}>
            <div className='hrm-my-card-basicInfo-icon-circle'
              onClick={()=> {
                PublicFunc[item.funname](item.id);
              }}
              title={item.title}
            >
              <i className={`${this.getIcon(item.name)}`}></i>
            </div>
          </Col>
        )
      }
    })
    return colArr;
  }

  render() {
    const {
      editable,
      textVal
    } = this.state;

    const {
      hrmCardInfo4Formal
    } = this.props;
    let {
      isEditor,
      infoGroup,
      infoGroup2,
      imgSrc,
      modelItems,
      showSQR,
      showBigImg,
      sendButtons,
      accountInfo,
      showAccountInfo,
      QRCodeOptions,
      remarkInfo,
      tagInfo,
      saveTag,
      delTag,
      isSelf,
      visibleWeiXin,
      validate
    } = hrmCardInfo4Formal;

    const remarkEditable = isSelf;

    let textValHtml = ''

    if (remarkInfo.value != null && remarkInfo.value.length > 0) {
      const arr = remarkInfo.value.split(/[\s\n]/);
      arr.map(text => {
        textValHtml += `<div class="remarkRow"><li></li><div>${text}</div></div>`;
      })
    } else {
      textValHtml = remarkEditable ? `<p style="color: #868686">${i18n.label.fillSpecialtyIntroduction()}</p>` : '';
    }

    sendButtons = toJS(sendButtons);
    infoGroup = toJS(infoGroup);
    infoGroup2 = toJS(infoGroup2);
    modelItems = toJS(modelItems);

    const sendBtns = this.getPortraitButtons();
    const hasQRCode = !isEmpty(validate) && validate[37] && validate[37].isValidate;

    const calculateHeight = () => {
      let height = window.innerHeight;
      if (document.getElementsByClassName('hrm-my-card').length > 0) {
        height -= document.getElementsByClassName('hrm-my-card-top-wapper')[0].offsetHeight;
        height -= document.getElementsByClassName('wea-tab')[0].offsetHeight;
        if (document.getElementsByClassName('e9theme-layout-header').length > 0)
          height -= document.getElementsByClassName('e9theme-layout-header')[0].offsetHeight + 10; //头部菜单高度
        height -= 10;
        return height;
      }
      return null;
    }
    const getPortrait = () => {
      const loadingImg = '/images/messageimages/temp/loading_wev8.gif';
      const hasNoImg = ['/images/messageimages/temp/man_wev8.png', '/images/messageimages/temp/women_wev8.png', ''].indexOf(imgSrc || '') > -1;
      return (
        <div className='hrm-my-card-basicInfo-left-imgwrap'>
          {!showBigImg &&
            <img className={`hrm-my-card-basicInfo-left-img${hasNoImg ? '' : '-value'}`}
              src={addContentPath(imgSrc ? imgSrc : loadingImg)}
              onError={()=> {this.setState({imgSrc: addContentPath('/images/messageimages/temp/man_wev8.png')})}}
              onClick={()=>imgSrc && hrmCardInfo4Formal.updateShowBigImg(true)}
            />
          }
          {showBigImg &&
            <img className='hrm-my-card-basicInfo-left-img-big'
              onError={()=> {this.setState({imgSrc: addContentPath('/images/messageimages/temp/man_wev8.png')})}}
              onClick={()=>imgSrc && hrmCardInfo4Formal.updateShowBigImg(false)}
              src={`${window.ecologyContentPath || ''}${imgSrc ? imgSrc : loadingImg}`}
            />
          }
          <div className='hrm-my-card-basicInfo-left-corner'  style={{display: hasQRCode ? 'block' : 'none'}}
             title={showSQR ? i18n.button.back() : !isEmpty(validate) && validate[37] && validate[37].validateName}
             onClick={debounce(this.showSQR.bind(null,!showSQR),150)}>
            <i className={`icon-coms-${showSQR ? 'Revoke2' : 'Scan'}`}/>
          </div>
          <div className='hrm-my-card-basicInfo-sqr' style={{display: showSQR ? 'block' : 'none'}}
             onClick={this.showSQR.bind(null,false)}>
             {
                  !isEmpty(QRCodeOptions) &&<div className='hrm-my-card-basicInfo-sqr-canvas'style={{marginTop:((jQuery(".hrm-my-card-basicInfo-sqr").height()-152)/2)}}><WeaQrcode ecId={`${this && this.props && this.props.ecId || ''}_WeaQrcode@e3gbdm`}
                  text={createQRCode(QRCodeOptions)}
                  size={120}
                  level={'L'}
                /></div>
             }
             <p className='hrm-my-card-basicInfo-sqr-title'>{i18n.button.scanAddContacts()}</p>
          </div>
        </div>
      )
    }
    
    const getAccountinfo = () => {
      let colArr = [];
      let idx = 0;
      accountInfo && accountInfo.forEach((a, i) => {
        let showValue;
        if (a.isOpenHrm) {
          showValue = a.showName != '' ? <a href={`javaScript:openhrm(${a.value})`} onClick={event => window.pointerXY(event)}>{a.showName}</a> : <div>&nbsp;</div>;
        } else {
          showValue = a.value ? <div dangerouslySetInnerHTML={{__html:a.value}}/> : <div>&nbsp;</div>;
        }
        if (a.name == 'weixin') {
          colArr.push(
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@8mnl1x@${i}`} className='hrm-my-card-basicInfo-left-accountinfo-label' span='24'>
              <a onClick={()=> {hrmCardInfo4Formal.updateVisibleWeiXin(true)}}>{a.label}</a>
            </Col>
          );
        } else {
          colArr.push(
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@5i1lsa@${i}`} className='hrm-my-card-basicInfo-left-accountinfo-label' span='12'>
            {a.label}:
            </Col>
          );
          colArr.push(
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ppkhgr@${i}`} className='hrm-my-card-basicInfo-left-accountinfo-value' span='12'>
            {showValue}
            </Col>
          );
        }

        if(a.name=='lastlogindate'){
          idx = i;
        }

        a.name=='lastlogindate' && colArr.push(<Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ok88r2@${i}`} className='hrm-my-card-basicInfo-left-accountinfo-middline' span='24'/>);

      });
      if (!showAccountInfo) {
        colArr.splice((idx+1)*2,colArr.length);
      }
      colArr.push(
        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@gge503@1`} className='hrm-my-card-basicInfo-left-accountinfo-endicon' span='24'
          onClick={()=> hrmCardInfo4Formal.updateShowAccountInfo(!showAccountInfo)}>
          <i className={showAccountInfo ? 'icon-coms-up' : 'icon-coms-down'} title={showAccountInfo ? i18n.button.collapse() : i18n.button.expand()}/>
        </Col>
      );
      return colArr;
    }
    const viewCard = (
      <div className='hrm-my-card-basicInfo' style={{height:'100%'}}>
        <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@1ud9do`} 
          style={{width:500, height: 380}} 
          title={i18n.button.companyWechat()} 
          visible={visibleWeiXin}
          onCancel={() => hrmCardInfo4Formal.updateVisibleWeiXin(false)}
          hideIcon >
          <div className='align-center'>
            <img src={addContentPath('/hrm/resource/image/qrcode.jpg')} style={{height: 374, width: 344}}/>
          </div>
        </WeaDialog>
        <div className='hrm-my-card-basicInfo-left' >
          {getPortrait()}
          {!isEmpty(sendBtns) && <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@y903f9`} className="hrm-my-card-basicInfo-left-imgwrap-op"  type="flex" justify="center" gutter={16}>{sendBtns}</Row>}
          <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@18n18r`}>{getAccountinfo()}</Row>
        </div>
        <div className='hrm-my-card-basicInfo-right' style={{minHeight: calculateHeight()}}>
          <div className='hrm-my-card-basicInfo-right-counts'>
          {
            modelItems && modelItems.map(c => {
              const fontColor = c['font-color'];
              return (
                <div className='hrm-my-card-basicInfo-right-counts-cell' onClick={()=>{window.open(c.url)}}>
                  <img src={addContentPath(c.icon)} alt=""/>
                  <div className='hrm-my-card-basicInfo-right-counts-cell-info'>
                    <div>{c.label}</div>
                    <div title={c.num} className='text-overflow'><span style={{color:fontColor?fontColor:null,fontSize:18}}>{c.num}</span></div>
                  </div>
                </div>
              )
            })
          }
          </div>
          <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@spp88e`} gutter={24}>
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@ubfosq`} span='24'>
              <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@ii9n7z`} className='hrm-my-card-basicInfo-right-info'>
                {
                  infoGroup && infoGroup.map((info, i) => {
                    return (
                      <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@61nhg4@${i}`} span='24'>
                        <InfoGroup4Formal3 ecId={`${this && this.props && this.props.ecId || ''}_InfoGroup4Formal3@jl210z@${i}`} items={info.items} title={info.title} showGroup={info.defaultshow}/>
                      </Col>
                    )
                  })
                }
              </Row>
              <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@mxb6zd`} className='hrm-my-card-basicInfo-right-info'>
                <div className="wea-info-group-new">
                  <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@cu9i6z`} className="wea-info-group-new-title">
                      <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@991ik8`} span={24}>
                          <div className='wea-info-group-new-title-info'>{i18n.label.specialtyIntroduction()}</div>
                      </Col>
                  </Row>
                  <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@xdygj1`} className="wea-info-group-new-content">
                      <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@1vqwjy`} span={12}>
                        <div className='remarkContainer' onClick={() => this.clickHandle()}>
                          {editable && <WeaTextarea ecId={`${this && this.props && this.props.ecId || ''}_WeaTextarea@p4of9b`} style={{minHeight: '150px'}} minRows={8} ref={dom => {this.textareaDom = dom}} value={remarkInfo.value} onBlur={this.onBlurHandle} />}
                          {!editable && <div dangerouslySetInnerHTML={{__html: textValHtml}} style={{padding: '0px 10px 0px 10px'}}></div>}
                        </div>
                      </Col>
                      <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@2h71bd`} span={12}>
                        <div className='tagContainer'>
                          <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@kkvmeg`} className='tagList'>
                            {
                              tagInfo.value && tagInfo.value.length > 0 && tagInfo.value.map(tag => {
                                return (<div className="tagInfo">
                                  {tag}
                                  {
                                    remarkEditable && 
                                    <i className="ant-modal-close-x" onClick={() => delTag({tag})}></i>
                                  }
                                  </div>)
                              })
                            }
                          </Row>
                          {
                            remarkEditable && <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@u87nc5`} className='addTagContainer'>
                                        <InputGroup ecId={`${this && this.props && this.props.ecId || ''}_InputGroup@oz99v0`} compact>
                                          <Input ecId={`${this && this.props && this.props.ecId || ''}_Input@9ep7x1`} style={{ width: '80%' }} onPressEnter={() => saveTag(this.tagInput.refs.input)} ref={dom => this.tagInput = dom} placeholder="输入特长标签" />
                                          <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@a7jz7n`} type='primary' onClick={() => saveTag(this.tagInput.refs.input)}>{i18n.button.putOn()}</Button>
                                        </InputGroup>
                                      </Row>
                          }
                        </div>
                      </Col>
                  </Row>
                </div>
              </Row>
            </Col>
          </Row>
        </div>
      </div>
    )
    const editCard = (
      <div className='hrm-my-card-basicInfo hrm-my-cardInfo' style={{height:'100%'}}>
        {this.getSearchs()}
      </div>
    )
    return (<div style={{position: 'relative'}}>
        {!isEditor ? viewCard : editCard}
    </div>)
  }

}
export default Main;