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

import {
  WeaTop,
  WeaInput,
  WeaEchart,
  WeaRightMenu,
  WeaRadioGroup,
  WeaMoreButton,
  WeaLocaleProvider,
  WeaDialog
} from 'ecCom'
import {
	WeaTableNew
} from 'comsMobx'
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
const getLabel = WeaLocaleProvider.getLabel

const WeaTable = WeaTableNew.WeaTable;

@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={getLabel('548320', '司龄状况')}
            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,
      cmd
    } = 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}
        cmd={cmd}
        winWidth={winWidth}
        setGap={val => hrmPerStatusReport.setGap(val)}
        getData={tag => hrmPerStatusReport.getData(tag)}
        showDialog = {() => hrmPerStatusReport.setDialogVisible(true)}
      />
    )
  }

  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,
      dialogVisible
    } = 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'}
              />

              <WeaDialog
                onCancel={() =>hrmPerStatusReport.setDialogVisible(false)}
                title={'明细数据'}
                visible={dialogVisible}
                style={{ width: 800, height: 500 }}
                hasScroll
                buttons={<Button type="primary">导出明细</Button>}
              >
                 <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@pgmg3x`}
                      comsWeaTableStore={tableStore}
                      hasOrder={true}
                      needScroll={true}
                      //getColumns={c => this.reRenderColumns(c)}
                      //onOperatesClick={(record, index, operate) => this.onOperatesClick(record, index, operate)}
                  />
              </WeaDialog>

            </WeaRightMenu>
          </div>
        </Spin>
      </Authority>
    )
  }
}

export default BasicConditionAnalysis