import {
  Tabs,
  Row,
  Col
} from 'antd';
import {
  WeaInput,
  WeaErrorPage,
  WeaTools,
  WeaTableEdit,
  WeaSearchGroup,
  WeaRightMenu,
  WeaFormItem,
  WeaTab,
  WeaNewScroll,
  WeaAlertPage,
  WeaAvatar,
  WeaLeftRightLayout
} from 'ecCom'
import isEmpty from 'lodash/isEmpty'
import * as mobx from 'mobx';
import {
  inject,
  observer
} from 'mobx-react';
import SystemCard from './SystemCard';
import PortraitSetting from './PortraitSetting';
import {
  routerShape
} from 'react-router';
import '../../style/card.less';
const toJS = mobx.toJS;
import {
  WeaPopoverHrm
} from 'ecCom';
import TopButton from '../../coms/topButton';
import { i18n } from '../../public/i18n';
import { addContentPath } from '../../util/index.js'

const TabPane = Tabs.TabPane;

const { ua } = WeaTools;
const isIE9 = ua.browser === "IE"

@inject('hrmCard')
@observer
class Main extends React.Component {
  static contextTypes = {
    router: routerShape,
  }
  constructor(props) {
    super(props);
    this.state = {
      weaWorkplanLoaded: false,
      rightMenu: []
    }
  }

  getkey(path) {
    return path.match(/hrm\/card\/\w+/)[0].split('/')[2] || '';
  }
  componentWillReceiveProps(nextProps) {
    const key = this.getkey(nextProps.location.pathname);
    if (this.props.location.key !== nextProps.location.key && key == 'cardInfo') {
      this.init(nextProps);
    }
  }

  componentWillMount() {
    // 异步加载日程模块静态资源
    eventRegister.loadModule('f_workplan', () => {
      this.setState({ weaWorkplanLoaded: true });
    }, () => { });
  }

  componentDidMount() {
    this.init();
  }

  init = (nextProps) => {
    const {
      hrmCard
    } = nextProps || this.props;
    const {
      pathname
    } = (nextProps || this.props).location;
    const key = this.getkey(pathname);
    const hrmId = (nextProps || this.props).params.hrmId || '';
    //const hrmId = pathname.match(/cardInfo\/\w+/)[0].split('/')[1]
    hrmCard.init(key);
    hrmCard.verifyIsAdmin({
      id: hrmId
    });
    hrmCard.getData({
      id: hrmId
    });
  }

  setParentRightMenu = rightMenu => this.setState({ rightMenu })

  getTabChildren() {
    const {
      hrmCard,
      children
    } = this.props;
    let {
      tabInfo,
      tabKey,
    } = hrmCard;
    let isIframe = false;
    let ifame;
    let innerPage = false;
    if (window.location.href.indexOf("/spa/hrm/index_mobx.html") == -1) {
      innerPage = true;
    }
    tabInfo = toJS(tabInfo);
    tabInfo && tabInfo.forEach((t) => {
      if (tabKey === t.key) {
        if (t.isIframe) {
          isIframe = true;
          if (t.key == 'iframe-9-workplansearch') { // 日程模块加载方式
            const selectedUser = t.url.split('?')[1].split('&')[1].split('=')[1];
            this.state.weaWorkplanLoaded && window.weaWorkplan && window.weaWorkplan.com ?
              ifame = <window.weaWorkplan.com.MyWorkPlan ecId={`${this && this.props && this.props.ecId || ''}_undefined@ai7pco`} location={{ query: { hidesidebar: 'true', hideheader: 'true', selectedUser: selectedUser, fromcard: 'true' } }} />
              :
              ''
          } else {
            ifame = <iframe className="card-iframe" style={{ height: window.innerHeight - 175 }} src={addContentPath(t.url)}></iframe>
          }
        }
      }
    });
    return (
      <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@4jxjh8`} className={innerPage ? 'hrm-card-hastop' : 'hrm-card-notop'}>
        {isIframe ? ifame : children}
      </WeaNewScroll>
    );
  }
  render() {
    const {
      hrmCard
    } = this.props;
    let {
      verified,
      isAdmin,
      info,
      tabInfo,
      tabKey,
      showPortraitSetting,
      uploadPortrailAuth,
      hasRight,
      userId,
      setState,
      updateSuccess,
      topRightMenus
    } = hrmCard;
    const rightMenu = topRightMenus && topRightMenus() || [];
    info = toJS(info);
    const portraitDefalut = '/messager/images/icon_m_wev8.jpg';
    if (window.location.href.indexOf("/spa/hrm/index_mobx.html") > -1) {
      if (info) {
        let lastname = info.lastname || '';
        document.title = lastname ? i18n.label.resourceCard() + '-' + lastname : i18n.label.resourceCard();
      }
    }
    if (verified) {
      if (hasRight) {
        if (verified && isAdmin) {
          return (
            <SystemCard ecId={`${this && this.props && this.props.ecId || ''}_SystemCard@vmf9rw`} {...this.props} id={this.props.params.hrmId} />
          )
        }
        if (verified && !isAdmin) {
          const avatarProps = { userId };
          if (info.requestParams) Object.assign(avatarProps, { requestParams: JSON.parse(info.requestParams) });
          return (
              <WeaLeftRightLayout
                isNew={true}
                leftWidth={96}
                leftCom={<WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@9d23zw`}
                type='line'
                keyParam='key'
                datas={toJS(tabInfo)}
                selectedKey={tabKey}
                onChange={v => {
                  this.tabsOnChange(v);
                }}
                tabPosition="left"
              />}
              >
                <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@uojsrt`} datas={rightMenu} >
                  <div style={{ height: '100%' }}>
                    <WeaPopoverHrm ecId={`${this && this.props && this.props.ecId || ''}_WeaPopoverHrm@kadp5g`} />
                    <div className='hrm-my-card' style={{ height: "100%", background: '#ffff' }}>
                      <div className="hrm-my-card-top-wapper" style={{ minHeight: 60 }}>
                        {
                          !isEmpty(info) && <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@rwtu3g`} className={"hrm-my-card-top"}>
                            <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@lq1pi0`} span="24" className='hrm-my-card-top-title' style={{ paddingLeft: 14, paddingTop: 7, height: '100%' }}>
                              {
                                info.shortname != null && info.shortname.trim().length > 0 ?
                                  <div className='hrm-my-card-top-title-img hrm-my-card-top-title-shortname' onClick={showPortraitSetting}>{info.shortname}</div>
                                  :
                                  <span style={{ paddingLeft: 10, paddingRight: 14, display: 'inline-block' }}>
                                    {/* <img className='hrm-my-card-top-title-img' src={info.messagerurl || portraitDefalut} alt="" onClick={showPortraitSetting}/> */}
                                    <span className='hrm-my-card-top-avatar' style={{ top: '-2px' }} onClick={showPortraitSetting}>
                                      <WeaAvatar ecId={`${this && this.props && this.props.ecId || ''}_WeaAvatar@m37dbo`}
                                        // userId={userId}
                                        {...avatarProps}
                                        ref={result => {
                                          if (updateSuccess && result) {
                                            result.requestParams && result.requestParams(userId);
                                            setState({ updateSuccess: false });
                                          }
                                        }}
                                      />
                                    </span>
                                  </span>
                              }
                              <span style={{ display: 'inline-block', verticalAlign: 'top' }} className='hrm-my-card-top-title-info'>
                                <div style={{ fontSize: 14 }}>
                                  <span style={{ paddingRight: 5 }}>{info.lastname} {
                                    info.workcode ?
                                      (
                                        <span>({info.workcode.indexOf('desensitization__') > -1 ? <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@m09slu`} value={info.workcode} viewArre={1} /> : info.workcode})</span>
                                      )
                                      :
                                      null
                                  }</span>
                                  {
                                    info.sex && <span className={info.sex.value == '1' ? 'icon-coms-women femaleColor' : 'icon-coms-men maleColor'} title={info.sex.name}></span>
                                  }
                                </div>
                                {
                                  info.orginfo ?
                                    <div className='orgInfo'
                                      dangerouslySetInnerHTML={{ __html: info.orginfo }} />
                                    :
                                    <div className='orgInfo'>
                                      &nbsp;
                                    </div>
                                }
                              </span>
                            </Col>
                          </Row>
                        }
                        <TopButton ecId={`${this && this.props && this.props.ecId || ''}_TopButton@br79o7`}
                          buttons={hrmCard.topButtons && hrmCard.topButtons()}
                          buttonSpace={10}
                          showDropIcon={hrmCard.topShowDropIcon}
                          dropMenuDatas={hrmCard.topRightMenus && hrmCard.topRightMenus()}
                        />
                      </div>

                      {this.getTabChildren()}
                    </div>
                    {uploadPortrailAuth && <PortraitSetting ecId={`${this && this.props && this.props.ecId || ''}_PortraitSetting@vck80h`} store={hrmCard} />}
                  </div>
                </WeaRightMenu>
              </WeaLeftRightLayout>
          )
        }
      } else {
        return (<WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@a7bbha`} >
          <div style={{ color: '#000' }}>
            {i18n.message.authFailed()}
          </div>
        </WeaAlertPage>
        )
      }
    }
    return (<div></div>)
  }

  tabsOnChange(key) {
    const {
      hrmCard
    } = this.props;
    this.setState({ rightMenu: [] })
    hrmCard.setTopButtons(null);
    hrmCard.setTopRightMenus(null);
    hrmCard.setTopShowDropIcon(false);
    let {
      tabInfo
    } = hrmCard;
    hrmCard.changeTab(key);
    tabInfo = toJS(tabInfo);
    tabInfo && tabInfo.forEach((t) => {
      if (t.key === key && !t.isIframe) {
        this.context.router.push({
          pathname: t.pathname,
          query: {
            fromcard: true
          }
        })
      }
    })
  }
}
export default Main;