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

import {
  WeaTop,
  WeaInput,
  WeaEchart,
  WeaRightMenu,
  WeaRadioGroup,
  WeaMoreButton,
} from 'ecCom';

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

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

import RadioGroupWrapper from './RadioGroupWrapper'
import ReportChart from './ReportChart'
import DataStatistics from './DataStatistics'
import More from './More'
import {addContentPath} from '../../util/index.js'

import '../../style/report.css';
import {
  i18n
} from '../../public/i18n';
import {Authority} from '../../public/coms/index.js';

const toJS = mobx.toJS;
const TabPane = Tabs.TabPane;

@inject('hrmPerStatusReport')

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

  componentWillMount() {
    this.pre();
  }

  componentDidMount() {
    const{hrmPerStatusReport:store}=this.props;
    store.getRight().then(hasRight=>{
      hasRight && this.init();
    })
  }

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

    if (this.props.location.key !== nextProps.location.key) {
      this.pre(nextProps);
      hrmPerStatusReport.optionReset();
      hrmPerStatusReport.conditionReset();
      hrmPerStatusReport.paramReset();
      hrmPerStatusReport.apiFinishedStatusReset();
      hrmPerStatusReport.getSearchCondition();
      hrmPerStatusReport.tabKeyReset();
      this.refs.page && this.refs.page.click();
      this.init();
    }
  }

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

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

    hrmPerStatusReport.optionReset();
    hrmPerStatusReport.setPathName(pathname);
    hrmPerStatusReport.pathToTitle();
    hrmPerStatusReport.getCurWindowWidth();
  }

  init() {
    const {
      hrmPerStatusReport
    } = this.props;
    const {
      pathname
    } = hrmPerStatusReport;
    hrmPerStatusReport.setKey('1');
    if (pathname !== 'basicConditionAnalysis') hrmPerStatusReport.setIntervalShow(false);
  }

  getTabPanes() {
    const {
      hrmPerStatusReport
    } = this.props;
    const {
      tabKey
    } = hrmPerStatusReport;
    return (
      <div style={{margin: '8px 16px'}}>
        <Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@gs0hfe`} activeKey={tabKey} onTabClick={key => {hrmPerStatusReport.setKey(key); hrmPerStatusReport.getData()}} type="card">
          <TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@9cn3g1`} tab={i18n.label.ageStatus()} key="1"></TabPane>
          <TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@esi1fz`} tab={i18n.label.genderStatus()} key="2"></TabPane>
          <TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@7y3472`} tab={i18n.label.workingAgeStatus()} key="3"></TabPane>
          <TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@b43k25`} tab={i18n.label.eduStatus()} key="4"></TabPane>
          <TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@wlbzlu`} tab={i18n.label.maritalStatus()} key="5"></TabPane>
          <TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@uzc70h`} tab={i18n.label.proTitleStatus()} key="6"></TabPane>
          <TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@g0s8cy`} tab={i18n.label.rankStatus()} key="7"></TabPane>
          <TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@w5q6jf`} tab={i18n.label.workNature()} key="10"></TabPane>
          <TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@4fswhv`} tab={i18n.label.stateStatistics()} key="11"></TabPane>
          <TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@k2w6ke`} tab={i18n.label.securtitylevel()} key="12"></TabPane>
        </Tabs>
        {this.getChart(hrmPerStatusReport.getTabName())}
      </div>

    )
  }

  getChart(tagName) {
    const {
      hrmPerStatusReport
    } = this.props;
    const {
      option1,
      option2,
      isIntervalShow,
      interval,
      tabKey,
      pathname,
      chartTitle1,
      chartTitle2,
      isEchartsShow,
      isLeftEchartsShow,
      isRightEchartsShow,
      ids,
      yAxisData,
      linkList,
      winWidth
    } = hrmPerStatusReport;

    return (
      <ReportChart ecId={`${this && this.props && this.props.ecId || ''}_ReportChart@8tx6up`} 
        option={[toJS(option1), toJS(option2)]} 
        isIntervalShow={isIntervalShow} 
        interval={interval} 
        tabKey={tabKey} 
        pathname={pathname}
        chartTitle={[typeof(chartTitle1) == 'function' ? `${chartTitle1()}(Top5)` : chartTitle1, typeof(chartTitle2) == 'function' ? `${chartTitle2()}(Top5)` : chartTitle2]}
        isChartsShow={[isEchartsShow, isLeftEchartsShow, isRightEchartsShow]}
        ids={toJS(ids)}
        yAxisData={toJS(yAxisData)}
        linkList={linkList}
        tagName={tagName}
        winWidth={winWidth}
        setGap={(val) => hrmPerStatusReport.setGap(val)}
        getData={(tag) => hrmPerStatusReport.getData(tag)}
      />
    )
  }

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

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

  search(v) {
    const {
      hrmPerStatusReport
    } = this.props;
    hrmPerStatusReport.setSearchCondition(v);
    hrmPerStatusReport.getData('search');
  }

  handleMenuClick(key) {
    if (key == '0') this.refs.a.click();
  }

  render() {
    const {
      hrmPerStatusReport
    } = this.props;
    const {
      title,
      pathname,
      countDatas,
      visible,
      tableStore,
      strokeColor,
      href,
      paramsStr,
      isApiOneFinished,
      isApiTwoFinished,
      authorityStore,
    } = hrmPerStatusReport;

    const btn = [
      (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@zo2az2@1`} type="primary" onClick={() => this.refs.a.click()} >
        <a ref='a' href={ addContentPath((pathname == 'departmentStatistics') ? '/api/hrm/resourceState/downloadExcel?cmd=DepartmentRp' + paramsStr: '/api/hrm/resourceState/downloadExcel?cmd=JobRp' + paramsStr)}>{i18n.button.export1()}</a>
      </Button>),
      (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@4f1zjp@2`} type="primary" onClick={() => this.refs.a1.click()} >
        <a href={addContentPath(href) } ref='a1'>{i18n.button.export()}</a>
      </Button>),
      (<WeaMoreButton ecId={`${this && this.props && this.props.ecId || ''}_WeaMoreButton@e4ss8c@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' />
    }, {
      key: '1',
      content: i18n.button.more(),
      disabled: true,
      icon: <i className='icon-coms-task-list' />
    }, ]

    const dropMenuDatas1 = dropMenuDatas.slice(0, 1);
    const dropMenuDatas2 = dropMenuDatas.slice(1, 2);

    return (
      <Authority ecId={`${this && this.props && this.props.ecId || ''}_Authority@q2pgvy`} store={authorityStore}>
        <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@565xx0`} spinning={ !(isApiOneFinished && isApiTwoFinished)}>
            <div style={{backgroundColor: '#fff'}} ref='page'>
                <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@5l9z5o`} 
                  datas={(pathname == 'departmentStatistics' || pathname == 'postStatistics') ? dropMenuDatas1 : dropMenuDatas2} 
                  onClick={(e) => this.handleMenuClick(e)}
                  collectParams={{favname: title,favouritetype:5}}
                  >
                    <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@qwurqz`} 
                      title={title}
                      icon={<i className='icon-coms-hrm' />}
                      iconBgcolor='#217346'
                      loading={true}
                      buttons={ (pathname == 'departmentStatistics' || pathname == 'postStatistics') ? btn1 : []}
                      showDropIcon={true}
                      dropMenuDatas={(pathname == 'departmentStatistics' || pathname == 'postStatistics') ? dropMenuDatas1 : dropMenuDatas2}
                      onDropMenuClick={(e) => this.handleMenuClick(e)}
                   >
                      <RadioGroupWrapper ecId={`${this && this.props && this.props.ecId || ''}_RadioGroupWrapper@2kc6vr`} />
                      {pathname == 'basicConditionAnalysis' ? this.getTabPanes() : ''}
                      {pathname !== 'basicConditionAnalysis' ?  <DataStatistics ecId={`${this && this.props && this.props.ecId || ''}_DataStatistics@9vnmnn`} countDatas={toJS(countDatas)} pathname={pathname} /> : '' }
                      {pathname !== 'basicConditionAnalysis' ?  this.getChart() : '' }
                      {this.getDeadline()}
                    </WeaTop>

                    <More ecId={`${this && this.props && this.props.ecId || ''}_More@6dxvt0`} 
                      title={hrmPerStatusReport.getChartTitle()}
                      visible={visible}
                      buttons={btn2}
                      onCancel={() => hrmPerStatusReport.setVisible(false)}
                      search={(v) => this.search(v)}
                      tableStore={tableStore}
                      loading={tableStore.loading}
                      strokeColor={'#6FBCEA'}
                    />
                </WeaRightMenu>
          </div>
        </Spin>
      </Authority>
    )
  }
}


export default BasicConditionAnalysis