import { Button, Modal,message,Row,Col, Spin} from 'antd';
import { WeaErrorPage, WeaTools,WeaSearchBrowserBox,WeaTableEdit, WeaDialog,WeaSearchGroup, WeaRightMenu,WeaFormItem , WeaQrcode} from 'ecCom'
import isEmpty from 'lodash/isEmpty'
import debounce from 'lodash/debounce'
import isArray from 'lodash/isArray'
import '../../style/cardInfo.less';
import {InfoGroup4Formal} 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 {AttachToNumberField} from '../../../../pc4backstage/hrmengine/util/index.js'
import {addContentPath} from '../../util/index.js'
const getKey = WeaTools.getKey;
const toJS = mobx.toJS;

@inject('hrmCardInfo')
@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));
  }
  componentWillReceiveProps(nextProps) {
    const keyOld = this.props.location.key;
    const keyNew = nextProps.location.key;
    if(keyOld !== keyNew) {
      const {hrmCardInfo, hrmCard} = this.props;
      hrmCardInfo.updateIsEditor();
      const hrmId = nextProps.params.hrmId ||'';
      hrmCardInfo.getData(hrmId);
      hrmCardInfo.getRightMenu(hrmId);
      hrmCard.setTopButtons(this.getTopButtons.bind(this));
      hrmCard.setTopRightMenus(this.getRightMenu.bind(this));
      hrmCard.setTopShowDropIcon(true);
    }
  }
  componentDidMount(){
    const {hrmCardInfo, hrmCard} = this.props;
    const hrmId = this.props.params.hrmId ||'';
    hrmCardInfo.updateIsEditor();
    hrmCardInfo.getData(hrmId);
    hrmCardInfo.getRightMenu(hrmId);
    hrmCard.setTopButtons(this.getTopButtons.bind(this));
    hrmCard.setTopRightMenus(this.getRightMenu.bind(this));
    hrmCard.setTopShowDropIcon(true);
  }
  showSQR(bool,e){
    const {hrmCardInfo} = this.props;
    e.stopPropagation && e.stopPropagation();
    e.preventDefault && e.preventDefault();
    e.nativeEvent && e.nativeEvent.preventDefault();
    hrmCardInfo.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 {hrmCardInfo, hrmCard} = this.props;
    let {isEditor, buttons, rightMenus} = hrmCardInfo;
    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);
  }

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

  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 {hrmCardInfo} = this.props;
    let {isEditor, buttons} = hrmCardInfo;
    buttons = toJS(buttons);
    const save = <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@eirbpx`} type="primary" onClick={this.saveEditCard} >{i18n.button.save()}</Button>;
    const back = <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@n4f2vn`} type="primary" onClick={this.backCard} >{i18n.button.back()}</Button>;
    const edit = <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@xo4e0z`} type="primary" onClick={this.editCard} >{i18n.button.modify()}</Button>;
    const 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 {hrmCardInfo} = this.props;
    hrmCardInfo.edit(hrmId);
  }

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

  backCard(){
    const hrmId = this.props.params.hrmId ||'';
    const {hrmCardInfo} = this.props;
    hrmCardInfo.updateIsEditor();
    hrmCardInfo.qrcode(hrmId);
    hrmCardInfo.updateShowSQR(false);
  }
  getSearchs(){
    const {hrmCardInfo} = this.props;
    let {conditioninfo,hideBelongto,isEditor,form, validate,hrmId} = hrmCardInfo;
    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@6uu0i0@${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@pyabcq@${i}`}>
                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@x3hnwv@${i}`} span={12}>
                          {
                            c.items.forEach( (field, j) => {
                              let dom = <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@v0tdzs@${j}`} fieldConfig={field} form={form} onChange={(v)=> {
                                  if (v.accounttype) {
                                    hrmCardInfo.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@5olkhr@${j}`}
                                      label={`${field.label}`}
                                      labelCol={{span: `${window.HrmLabelCol}`}}
                                      wrapperCol={{span: `${window.HrmWrapperCol}`}}>
                                        {dom}
                                        {field.domkey[0] == 'workcode' && <AttachToNumberField field={field} form={form} isEdit={true} useId={hrmId}/>}
                                      </WeaFormItem></div>),
                                    colSpan: 1
                                  });
                                }
                              }
                            })
                          }
                          <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@614zrr@${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@5pn9ty@${i}`} span={12}>
                          {
                            c.items.forEach( (field, j) => {
                              if (field.conditionType == 'RESOURCEIMG') {
                                if(!isEmpty(validate)&&validate[36] && validate[36].isValidate){
                                  const key = getKey(field);
                                  const bindObj = form.$(key);
                                  resourceimg = <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@ec7pn9@${j}`}
                                  label={`${field.label}`}
                                  labelCol={{span: `${window.HrmLabelCol}`}}
                                  wrapperCol={{span: `${window.HrmWrapperCol}`}}>
                                    <UploadAvatar ecId={`${this && this.props && this.props.ecId || ''}_UploadAvatar@fn0zdc@${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@adcp8t@${j}`} fieldConfig={field} form={form} onChange={(v)=> {
              if (v.accounttype) {
                hrmCardInfo.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@93ixu0@${j}`}
                  label={`${field.label}`}
                  labelCol={{span: `${window.HrmLabelCol}`}}
                  wrapperCol={{span: `${window.HrmWrapperCol}`}}>
                    {dom}
                    {field.domkey[0] == 'workcode' && <AttachToNumberField field={field} form={form} isEdit={true}/>}
                  </WeaFormItem>),
                colSpan: 2
              });
            }
          }
        });
        group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@e47m5h@${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 {hrmCardInfo} = this.props;
    let {sendButtons, validate} = hrmCardInfo;
    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@kul6p0@${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 {hrmCardInfo} = this.props;
    let {isEditor, infoGroup,imgSrc,modelItems,showSQR,
      showBigImg,sendButtons,accountInfo,showAccountInfo,QRCodeOptions,validate,jobtitleVisible,closeJobtitleDialog,form} = hrmCardInfo;
    sendButtons = toJS(sendButtons);
    infoGroup = toJS(infoGroup);
    modelItems = toJS(modelItems);

    // infoGroup.map(info => {
    //   info.items.map(item => {
    //     if (item.type === "email" && !item.value.includes("@")) {
    //       item.value = "";
    //     }
    //   })
    // });
    
    const sendBtns = this.getPortraitButtons();
    const hasQRCode = !isEmpty(validate) && validate[37] && validate[37].isValidate;
    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 && hrmCardInfo.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 && hrmCardInfo.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@bxy6eb`}
                  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.showName && a.showName!=''){
            showValue = <a href={`javaScript:openhrm(${a.value})`} onClick={event => window.pointerXY(event)}>{a.showName}</a>
        }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@gu15li@${i}`} className='hrm-my-card-basicInfo-left-accountinfo-label' span='24'>
              <a onClick={()=> {showWeaDialog()}}>{a.label}</a>
            </Col>
          );
        }else{
          colArr.push(
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@k9t14a@${i}`} className='hrm-my-card-basicInfo-left-accountinfo-label' span='12' title={a.label}>
            {a.label}:
            </Col>
          );
          colArr.push(
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@u4z0dg@${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@vptqkj@s${i}`} className='hrm-my-card-basicInfo-left-accountinfo-middline' span='24'/>);
      });
      if(!showAccountInfo){
        colArr.splice((idx+1)*2+1,colArr.length);
      }
      colArr.push(
        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@x4q90n@1`} className='hrm-my-card-basicInfo-left-accountinfo-endicon' span='24'
          onClick={()=> hrmCardInfo.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@ipcpkk`} style={{width:500, height: 380}} title={i18n.button.companyWechat()} 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@tuy4ml`} 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@e5eogh`}>{getAccountinfo()}</Row>
        </div>
        <div className='hrm-my-card-basicInfo-right' style={{minHeight:window.innerHeight-138}}>
          <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@orjwt4`} gutter={24}>
            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@6dkmro`} span='24'>
              <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@0xagl0`} className='hrm-my-card-basicInfo-right-info'>
               {
                  infoGroup && infoGroup.map((info, i) => {
                    return (
                      <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@kw5tls@${i}`} style={{display: info.hide ? 'none' : 'block'}}>
                        <InfoGroup4Formal ecId={`${this && this.props && this.props.ecId || ''}_InfoGroup4Formal@f7yrkq@${i}`} items={info.items} hide={info.hide} title={info.title} showGroup={info.defaultshow}/>
                      </Row>
                    )
                  })
                }
              </Row>
            </Col>
          </Row>
        </div>
      </div>
    )
    const editCard = (
      <div className='hrm-my-card-basicInfo hrm-my-cardInfo' style={{height:'100%'}}>
        {this.getSearchs()}
        {
          jobtitleVisible && (
             <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@qhdkmr`}
                onCancel={closeJobtitleDialog}
                icon= 'icon-coms-hrm'
                iconBgcolor= '#217346'
                title={i18n.label['531838']()}
                callback = {
                  datas => {
                      const {
                          id,
                          jobtitlemark
                      } = datas;
                      
                  form.updateFields({
                          jobtitle: {
                              value: id,
                              valueSpan: jobtitlemark,
                              valueObj: [{
                                  id,
                                  name:jobtitlemark
                              }]
                          }
                      });

                      closeJobtitleDialog();

                  }
              }
                url = {'/spa/hrm/engine.html#/hrmengine/posts?type=0'} 
                visible={jobtitleVisible}
                style={{width: 600, height: 500}}
              />
          )
      }
      </div>
    )
    return (
      <div>
        {!isEditor ? viewCard : editCard}
      </div>
    )
  }

}
export default Main;