import {
  inject,
  observer,
} from 'mobx-react'

import {
  WeaTop,
  WeaTab,
  WeaRightMenu,
  WeaAlertPage,
  WeaMoreButton,
} from 'ecCom'

import {
  Row,
  Col,
  Spin,
  Button,
} from 'antd'

import React from 'react'
import * as mobx from 'mobx'

import RgWrapper from './RgWrapper'
import Statistics from './Statistics'
import BarChart from './BarChart'
import PieChart from './PieChart'
import MoreWithAdSearch from './MoreWithAdSearch'
import More from './More'
import {
  jumpToHrmCard,
  jumpToHrmDept,
  jumpToHrmSubCompany,
  jumpToHrmPost,
  jumpToHrmContract
} from '../../util/pulic-func'
import '../../style/report.css';
import {
  i18n
} from '../../public/i18n';

const toJS = mobx.toJS;

@inject('hrmChangeReport')

@observer
class ChangeRelatedReport extends React.Component {
  constructor(props) {
    super(props);
  }

  componentWillMount() {
    this.pre();
  }

  componentDidMount() {
    this.init();
  }

  componentWillReceiveProps(nextProps) {
    const {
      hrmChangeReport
    } = this.props;

    if (this.props.location.key !== nextProps.location.key) {
      this.pre(nextProps);
      hrmChangeReport.optionReset();
      hrmChangeReport.conditionReset();
      hrmChangeReport.paramReset();
      hrmChangeReport.tabkeyReset();
      hrmChangeReport.apiFinishedStatusReset();
      hrmChangeReport.getSearchCondition('radioGroup');
      // this.refs.page.click();
      this.init();
    }
  }

  pre(nextProps) {
    const {
      hrmChangeReport
    } = this.props;
    let pathname;

    if (!nextProps) {
      pathname = this.props.location.pathname.split('/').pop();
    } else {
      pathname = nextProps.location.pathname.split('/').pop();
    }

    hrmChangeReport.setPathName(pathname);
    hrmChangeReport.pathToTitle();
    hrmChangeReport.getCurWindowWidth();
    hrmChangeReport.setColIdUnusualStatus();
  }

  init() {
    const {
      hrmChangeReport
    } = this.props, {
      getRight
    } = hrmChangeReport;
    getRight();
    hrmChangeReport.tabkeyReset();
  }

  handleMenuClick(key) {
    if (key == '0') {
      this.handleExportExcel();
    }
  }

  getDeadline() {
    const {
      hrmChangeReport
    } = this.props;
    const {
      deadline
    } = hrmChangeReport;

    return (
      <div style={{color: '#989898', marginTop: 4, marginRight: 16}}>
    	      <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@m2hrqq`}>
    	        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@8rmbpe`}>
    	          <p style={{textAlign: 'right'}}>{deadline}</p>
    	        </Col>
    	      </Row>
    	  </div>
    )
  }

  search(val) {
    const {
      hrmChangeReport
    } = this.props;
    if (val !== undefined) {
      hrmChangeReport.setSingleSearchCondition(val);
      hrmChangeReport.getTableInfo('more', true);
    } else {
      hrmChangeReport.getTableInfo('bar', true);
    }
  }

  handleExportExcel() {
    const {
      hrmChangeReport
    } = this.props;

    hrmChangeReport.exportAll();

    // hrmChangeReport.getTableInfo('more', false);
  }

  iconSet() {
    const icons = [
      (<div className='hrm-report-box'><div style={{backgroundColor: '#2DB7F5'}} className='hrm-report-icon hrm-report-radius'><i className='icon-coms-plus' /></div></div>),
      (<div className='hrm-report-box'><div style={{backgroundColor: '#EB6D3A'}} className='hrm-report-icon hrm-report-radius'><i className='icon-coms-Loss' /></div></div>),
      (<div className='hrm-report-box'><div style={{backgroundColor: '#7DC756'}} className='hrm-report-icon hrm-report-radius'><i className='icon-coms-Net-growth' /></div></div>),
      (<div className='hrm-report-box'><div style={{backgroundColor: '#2DB7F5'}} className='hrm-report-icon hrm-report-radius'><i className='icon-coms-hrm' /></div></div>),
      (<div className='hrm-report-box'><div style={{backgroundColor: '#7DC756'}} className='hrm-report-icon hrm-report-radius'><i className='icon-coms-Department-number' /></div></div>),
      (<div className='hrm-report-box'><div style={{backgroundColor: '#D65DF4'}} className='hrm-report-icon hrm-report-radius'><i className='icon-coms-Delayed' /></div></div>),
      (<div className='hrm-report-box'><div style={{backgroundColor: '#50D0A3'}} className='hrm-report-icon hrm-report-radius'><i className='icon-coms-Department-number' /></div></div>),
      (<div className='hrm-report-box'><div style={{backgroundColor: '#FF986F'}} className='hrm-report-icon hrm-report-radius'><i className='icon-coms-Proportion' /></div></div>),
      (<div className='hrm-report-box'><div style={{backgroundColor: '#F57C4C'}} className='hrm-report-icon hrm-report-radius'><i className='icon-coms-plus' /></div></div>),
      (<div className='hrm-report-box'><div style={{backgroundColor: '#7DC756'}} className='hrm-report-icon hrm-report-radius'><i className='icon-coms-synergism' /></div></div>),
      (<div className='hrm-report-box'><div style={{backgroundColor: '#D55DF3'}} className='hrm-report-icon hrm-report-radius'><i className='icon-coms-Department-number' /></div></div>),
    ];

    return icons;
  }

  getIcons(i) {
    const {
      hrmChangeReport
    } = this.props;
    const {
      pathname
    } = hrmChangeReport;
    let icons = this.iconSet();

    switch (pathname) {
      case 'add':
        return icons.slice(i, i + 1);
      case 'confirmation':
        return icons.slice(i + 3, i + 4);
      case 'transfer':
        if (i < 2) {
          return icons.slice(i + 3, i + 4);
        } else {
          return icons.slice(6, 7);
        }
      case 'contract':
        return icons.slice(i + 8, i + 9);
      default:
        if (i < 2) {
          return icons.slice(i + 3, i + 4);
        } else {
          return icons.slice(7, 8);
        }
    }
  }

  render() {
    const {
      hrmChangeReport
    } = this.props;
    const {
      title,
      countDatas,
      pathname,
      option1,
      option2,
      option3,
      chartTitle1,
      chartTitle2,
      chartTitle3,
      isLeftEchartsShow,
      isRightEchartsShow,
      isPieChartsShow,
      ids,
      idsForPie,
      yAxisData,
      linkList,
      visible1,
      visible2,
      tableStore,
      conditionOfAdSearch,
      form,
      strokeColor,
      isNeedWeaTab,
      isNeedPieChart,
      tabKey,
      tabDatas,
      isApiOneFinished,
      isApiTwoFinished,
      winWidth,
      gridData,
      isColIdUnusual,
      loading,
      authorized,
      exportAll,
    } = hrmChangeReport;

    const btn = [
      (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@grxtrg@1`} type="primary" onClick={exportAll} >{i18n.button.export1()}</Button>),
      (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@burv91@2`} type="primary" onClick={() => hrmChangeReport.exportExcel()} >{i18n.button.export()}</Button>),
      (<WeaMoreButton ecId={`${this && this.props && this.props.ecId || ''}_WeaMoreButton@2ekmsa@3`} />),
    ];

    const btn1 = btn.slice(0, 1);
    const btn2 = btn.slice(1, 3);

    const dropMenuDatas = [{
      key: '0',
      content: i18n.button.export1(),
      icon: <i className='icon-coms-leading-in' />
    }, ]

    if (!authorized) {
      return (
        <div style={{height: '100%'}}>
          {loading ?  <div className='hrm-loading-center'>
                        <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@hc8sxa`} spinning={loading} size='large'></Spin>
                      </div>
                    : <div className="hrm-wea-alert-page">
                          <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@vumjrg`}>
                            <div style={{ color: '#000' }}>
                                {i18n.message.authFailed()}
                            </div>
                              </WeaAlertPage>
                            </div>
          } 
        </div>
      )
    } else {
      return (
        <div style={{backgroundColor: '#fff'}} ref='page' className='hrm-report'>
            <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@dohj9y`} 
              datas={dropMenuDatas} 
              onClick={(e) => this.handleMenuClick(e)}
              collectParams={{favname: title,favouritetype:5}}
            >
                <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@t94b8n`} 
                    title={title}
                    icon={<i className='icon-coms-hrm' />}
                    iconBgcolor='#217346'
                    loading={true}
                    buttons={btn1}
                    showDropIcon={true}
                    dropMenuDatas={dropMenuDatas}
                    onDropMenuClick={(e) => this.handleMenuClick(e)}
                >

                  { isNeedWeaTab  ? <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@y6016h`}
                                        selectedKey={tabKey}
                                        datas={tabDatas}
                                        keyParam='key'
                                        onChange={(key) => hrmChangeReport.tabClick(key)}
                                    />
                                : ''}

                  <RgWrapper ecId={`${this && this.props && this.props.ecId || ''}_RgWrapper@efu7x1`} />

                  <Statistics ecId={`${this && this.props && this.props.ecId || ''}_Statistics@ilusyj`} 
                      countDatas={toJS(countDatas)}
                      getIcons={(i) => this.getIcons(i)}
                      isNeedLink={ (pathname == 'contract') ? true : false}
                      linkIndex={0}
                      setVisible={(arg, bool) => hrmChangeReport.setVisible(arg, bool)}
                  />

                  <BarChart ecId={`${this && this.props && this.props.ecId || ''}_BarChart@2a683q`} 
                      option={[toJS(option1), toJS(option2)]} 
                      pathname={pathname}
                      chartTitle={[typeof(chartTitle1) == 'function' ? `${chartTitle1()}(top 5)` : chartTitle1, typeof(chartTitle2) == 'function' ? `${chartTitle2()}(top 5)` : chartTitle2]}
                      isChartsShow={[isLeftEchartsShow, isRightEchartsShow]}
                      ids={toJS(ids)}
                      yAxisData={toJS(yAxisData)}
                      linkList={linkList}
                      linkStyle={'hrm-report-linkStyle'}
                      winWidth={winWidth}
                      gridData={toJS(gridData)}
                      yAxisScaleMaxLen={10}
                      setVisible={(arg, bool, dpId) => hrmChangeReport.setVisible(arg, bool, dpId)}
                  />

                  { isNeedPieChart ? <PieChart ecId={`${this && this.props && this.props.ecId || ''}_PieChart@0rh82u`} 
                                         option={toJS(option3)} 
                                         chartTitle={typeof(chartTitle3) == 'function' ? chartTitle3() : chartTitle3}
                                         isChartsShow={isPieChartsShow}
                                         linkStyle={'hrm-report-linkStyle'}
                                         ids={toJS(idsForPie)}
                                         canvasPosition={2}
                                         winWidth={winWidth}
                                         setVisible={(arg, bool, dpId) => hrmChangeReport.setVisible(arg, bool, dpId)}
                                     />
                                   : ''}

                  {this.getDeadline()}
              </WeaTop>

              <More ecId={`${this && this.props && this.props.ecId || ''}_More@imv2qe`} 
                  title={hrmChangeReport.getDialogTitle()}
                  visible={visible1}
                  buttons={btn2}
                  onCancel={() => hrmChangeReport.setVisible('1', false)}
                  search={(v) => this.search(v)}
                  tableStore={tableStore}
                  loading={tableStore.loading}
                  strokeColor={'#6FBCEA'}
              />

              <MoreWithAdSearch ecId={`${this && this.props && this.props.ecId || ''}_MoreWithAdSearch@zal0y0`} 
                  title={hrmChangeReport.getDialogTitle()}
                  visible={visible2}
                  buttons={btn2}
                  onCancel={() => hrmChangeReport.setVisible('2', false)}
                  search={() => this.search()}
                  tableStore={tableStore}
                  loading={tableStore.loading}
                  searchsBaseValue={form.getFormParams().lastname}
                  condition={toJS(conditionOfAdSearch)}
                  form={form}
                  style={'hrm-report-scope'}
                  linkStyle={'hrm-report-linkStyle-table'}
                  isNeedReRender={true}
                  dataIndex={['resourcename', 'olddepartnemtname', 'oldsubcompanyname', 'oldjobtitlename', 'newdepartmentname', 'newjobtitlename', 'hrmname', 'typename', 'deptname', 'jobname']}
                  colId={['uid', 'departmentid', 'subcompanyid', 'jobid', 'newdepartnemtid', 'newjobid', 'olddepartnemtid', 'oldjobid', 'userid', 'typeid', 'deptid']}
                  jumpToHrmCard={jumpToHrmCard}
                  jumpToHrmDept={jumpToHrmDept}
                  jumpToHrmSubCompany={jumpToHrmSubCompany}
                  jumpToHrmPost={jumpToHrmPost}
                  jumpToHrmContract={jumpToHrmContract}
                  isColIdUnusual={isColIdUnusual}
                  onSearchChange={ (val) => form.updateFields({lastname: {value:val}})}
              />
            </WeaRightMenu>
        </div>
      )
    }

  }

}

export default ChangeRelatedReport