import React, { Component } from 'react'
import uiCss from './userInfoModal.scss'
import { Modal, Load, Scroll } from 'karaui'
import _ from 'lodash'

export default class UserInfoModal extends Component {
  constructor (props) {
    super(props)
    this.state = {
      showLowerDiv: false,//是否展示下属的框
      star: false,//当前用户是否是关注
    }
    this.modalScroll = React.createRef()
  }

  componentDidMount () {

  }

  componentWillReceiveProps (next) {

    if (next.data && next.data.contactStatus) {
      this.setState({
        star: next.data.contactStatus !== '1'
      })
    }

  }

  // 处理老用户签名过长问题

  dealSignature = (signature) => {
    if (signature && signature.length > 45) {
      return signature.substring(0, 44) + '...'
    } else {
      return signature
    }
  }

  //展示下属列表框
  showLowerDiv = (accountId) => {

    this.props.getLowerPerson(accountId, 12)
    let self = this
    this.setState({
      showLowerDiv: true
    }, () => {
      //  滚动
      setTimeout(function () {
        self.modalScroll.current.scrollTo(60)
      }, 200)
    })

  }
  //隐藏下属div
  hideLowerDiv = () => {
    this.setState({
      showLowerDiv: false
    })
  }

  //关闭弹窗
  close = () => {
    this.props.close()
    this.hideLowerDiv()
  }

  //展示下属列表员工的详情
  showModalUserInfo = (accountId) => {
    this.props.showDetailInfoModal(accountId)
    this.hideLowerDiv()
  }

  //返回上一级
  rebackLast = () => {
    this.props.delPopPerson()
    this.hideLowerDiv()
  }

  //关注/取消联系人
  favourite = (id) => {
    const {httpAgent, changeStatus} = this.props
    let yesOrNo
    let status
    if (!this.state.star) {
      //添加关注
      yesOrNo = 'yes'
      status = '0'
    } else {
      yesOrNo = 'no'
      status = '1'
    }
    httpAgent.post(`/sdm/contact/${id}/${yesOrNo}`, {}).then(res => {
      if (res && res.resultCode === '000000') {
        this.setState({
          star: yesOrNo === 'yes'
        })
        changeStatus(status)
      }
    })
  }

  render () {
    const parent = document.getElementById('app')
    const {show, data, close, getLowerPerson, lowerData, getMore, accountIdArr, delPopPerson, onChat} = this.props
    return (
      <Modal show={show} parent={parent} onMask={close}>

        <div className={uiCss.infoList}>
          {/*返回箭头，accountIdArr大于1时出现*/}
          {
            accountIdArr.length > 1 ?
              <i className={`${uiCss.rebackBtn} ks-iconfont ks-icon-small-arrow-left`}
                 onClick={() => {this.rebackLast()}}></i> : null
          }


          <i className={`${uiCss.closeBtn} ks-iconfont ks-icon-guanbi`} onClick={() => {this.close()}}></i>

          {/*上部分》头像姓名开始*/}
          <div className={`${uiCss.userHead} clearfix`}>
            <div className={uiCss.headIcon}>
              <img src={data.headIcon} alt=""/>
            </div>

            <div className={uiCss.headText}>
              <div className={`${uiCss.name} clearfix`}>
                <span>{data.accountName}</span>
                <i
                  className={data.gender === 'F' ? 'ks-iconfont ks-icon-female ' + uiCss.sexfemale : 'ks-iconfont ks-icon-male ' + uiCss.sexmale}></i>
                <i className={`ks-iconfont ks-icon-collection-b ${this.state.star ? 's-primary' : 's-tips '}`}
                   onClick={() => {
                     this.favourite(data.accountId)
                   }}></i>

              </div>
              <div className={uiCss.ntP}>
                <p>NT: <span></span>{data.staffAccount}</p>
              </div>

              <div className={uiCss.signName}>
                {this.dealSignature(data.signature || '还没有个性签名')}
              </div>

            </div>

          </div>
          {/*上部分》头像姓名结束*/}

          <div className={uiCss.tableDiv}>

            <div className={uiCss.taD}>
              <Scroll ref={this.modalScroll} onDragEndBottom={() => {getMore(data.accountId, 12)}}
                      onWheelBottom={() => {getMore(data.accountId, 12)}}>
                <div>
                  <div>
                    <span>工号 :</span>
                    <span>{data.staffCode || '暂无'}</span>
                  </div>
                  <div>
                    <span>手机 :</span>
                    <span>{data.mobile || '暂无'}</span>
                  </div>
                  <div>
                    <span>电话 :</span>
                    <span>{data.phone || '暂无'}</span>
                  </div>
                  <div>
                    <span>邮箱 :</span>
                    <span>{data.email || '暂无'}</span>
                  </div>
                  <div>
                    <span>SBU :</span>
                    <span>{data.sbuId || '暂无'}{data.sbu ? `（${data.sbu}）` : '（暂无）'}</span>
                  </div>
                  <div className={uiCss.alignTop}>
                    <span>CC :</span>
                    <span>{data.costCenter || '暂无'}{data.costCenterName ? `（${data.costCenterName}）` : '（暂无）'}</span>
                  </div>
                  <div>
                    <span>公司 :</span>
                    <span>{data.companyName || '暂无'}</span>
                  </div>
                  <div className={uiCss.alignTop}>
                    <span>部门(中) :</span>
                    <span>{data.orgName || '暂无'}</span>
                  </div>
                  <div className={uiCss.alignTop}>
                    <span>部门(英) :</span>
                    <span>{data.orgNameEn || '暂无'}</span>
                  </div>
                  <div>
                    <span>工作地点 :</span>
                    <span>{data.officeAddr || '暂无'}</span>
                  </div>
                  {
                    typeof (data.tags) === 'string' && <div>
                      <span>标签 :</span>
                      <span>{data.tags.split(',').join('/')}</span>
                    </div>
                  }
                  <div>
                    <span>上级经理 :</span>
                    <span className={uiCss.leaderSpan}
                          onClick={() => {(data.parentAccountId ? this.showModalUserInfo(data.parentAccountId) : null)}}>{data.parentStaffName || '暂无'}</span>
                  </div>
                  <div>
                    <span>下级员工 :</span>
                    <span className={uiCss.lowerspan}
                          onClick={() => {
                            if (data.childAccountCount > 0 && !this.state.showLowerDiv) {
                              this.showLowerDiv(data.accountId)
                            } else {
                              this.hideLowerDiv()
                            }
                          }}
                    >{`${data.childAccountCount}(人)` || '暂无'}
                      {
                        data.childAccountCount > 0 ? !this.state.showLowerDiv ?
                          <i className='ks-icon-small-arrow-bottom-copy ks-iconfont s-primary'> </i>
                          : <i className='ks-icon-small-arrow-top-copy ks-iconfont s-primary'> </i> : null
                      }
                    </span>

                    <div className={`clearfix ${uiCss.listDiv} ${this.state.showLowerDiv ? '' : uiCss.hide}`}>

                      <ul className={`${uiCss.lowerList} clearfix`}>
                        {
                          lowerData.map((v) => {
                            return <li key={v.accountId} onClick={() => {this.showModalUserInfo(v.accountId)}}>
                              <div className={uiCss.lowerIcon}>
                                <img src={v.headIcon} alt=""/>
                              </div>

                              <p>{v.accountName}</p>
                            </li>
                          })
                        }
                      </ul>

                    </div>
                  </div>


                </div>
              </Scroll>
              {/*{*/}
              {/*!this.state.showLowerDiv ?*/}

              {/*: null*/}
              {/*}*/}

            </div>
          </div>

          <div className={uiCss.chatBtnDiv}>
            <span className={uiCss.chatBtn} onClick={() => {onChat(data.accountId)}}>发起聊天</span>
          </div>

        </div>
      </Modal>

    )
  }

}
