import React from 'react'
import {inject,observer} from 'mobx-react';
import {WeaAlertPage} from 'ecCom'
import {
  WeaReportGroup,
  WeaTop,
  WeaTab,
  WeaRightMenu,
  WeaDialog,
  WeaInput,
  WeaFormItem,
  WeaTools,
  WeaRadioGroup, 
  WeaNewScroll} from 'ecCom'
import {Tabs,Button,Spin} from 'antd'
import * as mobx from 'mobx';
import { toJS } from 'mobx';
import {WeaTableNew} from 'comsMobx';
import '../../style/schedulediffreport.less';
import {routerShape} from 'react-router';
import debounce from 'lodash/debounce'
const WeaTable = WeaTableNew.WeaTable;
const TabPane = Tabs.TabPane;
import * as Util from '../../util/index';
import {i18n} from '../../public/i18n';
import isEmpty from 'lodash/isEmpty';

@inject('hrmScheduleDiffReport')
@observer 
class Main extends React.Component{
  static contextTypes = {
    router: routerShape
  }

  constructor(props) {
    super(props);
    const funcs = ['getReportData'];
    funcs.forEach(f=> this[f] = this[f].bind(this));
  }

  componentDidMount() {
    const { hrmScheduleDiffReport } = this.props;
    this.init();
  }

  componentWillReceiveProps(nextProps) {
    const { hrmScheduleDiffReport } = this.props;
    if(this.props.location.key !== nextProps.location.key) {
        this.init();
    }
  }

  init(){
    const { hrmScheduleDiffReport } = this.props;
    hrmScheduleDiffReport.getSearchCondition();
  }

  doSearch(){
    const { hrmScheduleDiffReport } = this.props;
    hrmScheduleDiffReport.getData();
  }
  
  getRightMenu(){
    const { hrmScheduleDiffReport } = this.props;
    let btns =[];
    const btnImportExcel = {
      icon: <i className='icon-coms-export'/>,
      content:i18n.button.export()
    };

    btns.push(btnImportExcel);
    return btns;
  }

  onRightMenuClick(key){
    const { hrmScheduleDiffReport } = this.props;
    switch(key){
      case '0':
        hrmScheduleDiffReport.exportExcel();
        break;
      case '1':
        break;
    }
  }

  getTopButtons() {
    const { hrmScheduleDiffReport } = this.props;
    let btns =[];
    const btnExportExcel = <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@mvi039`} type="primary" onClick={()=>hrmScheduleDiffReport.exportExcel()} >{i18n.button.export()}</Button>;
    btns.push(btnExportExcel);
    return btns;
  }

  getTableRow(){
    const { hrmScheduleDiffReport } = this.props;
    let {reportdata} = hrmScheduleDiffReport;
    reportdata = toJS(reportdata);
    let rows =[];
    !isEmpty(reportdata.titlerows) && reportdata.titlerows.forEach(row =>{
      let cells = [];
      !isEmpty(row) && row.forEach( cell => {
        cells.push(<td rowspan={cell.rowspan||''} colspan={cell.colspan||''}>{cell.value}</td>);
      })
      rows.push(<tr>{cells}</tr>);
    })

    !isEmpty(reportdata.datarows) && reportdata.datarows.forEach(row =>{
      let cells = [];
      !isEmpty(row) && row.forEach( cell => {
        cells.push(<td className="data" rowspan={cell.rowspan||''} colspan={cell.colspan||''}>{cell.value}</td>);
      })
      rows.push(<tr>{cells}</tr>);
    })

    return rows;
  }

  getBtns() {
    return [
        (<span className="btn"><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@v5h2ye@1`} onClick={()=>this.getDetial('SIGININ')}>{i18n.label.signInDetail()}</Button></span>),
        (<span className="btn"><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ow43u4@2`} onClick={()=>this.getDetial('SIGINOUT')}>{i18n.label.signOutDetail()}</Button></span>),
        (<span className="btn"><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ctyif4@3`} onClick={()=>this.getDetial('BELATE')}>{i18n.label.lateDetail()}</Button></span>),
        (<span className="btn"><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@r96kmf@4`} onClick={()=>this.getDetial('LEAVEEARLY')}>{i18n.label.earlyRetreatDetail()}</Button></span>),
        (<span className="btn"><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@0axbot@5`} onClick={()=>this.getDetial('ABSENT')}>{i18n.label.absenteeismDetail()}</Button></span>),
        (<span className="btn"><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@setpat@6`} onClick={()=>this.getDetial('NOSIGN')}>{i18n.label.leakageOfSignatureDetail()}</Button></span>),
        (<span className="btn"><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@27dre2@7`} onClick={()=>this.getDetial('LEAVE')}>{i18n.label.leaveDetail()}</Button></span>),
        (<span className="btn"><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@yiwh81@8`} onClick={()=>this.getDetial('EVECTION')}>{i18n.label.businessTripDetail()}</Button></span>),
        (<span className="btn"><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@id7mlt@9`} onClick={()=>this.getDetial('OUTDAYS')}>{i18n.label.publicDetail()}</Button></span>),
        (<span className="btn"><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@7s686q@10`} onClick={()=>this.getDetial('OVERTIME')}>{i18n.label.overtimeWorkDetail()}</Button></span>),
        (<span className="btn"><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@5o7cew@11`} onClick={()=>this.getDetial('OTHER')}>{i18n.label.attendanceAnomalyDetail()}</Button></span>)
    ]
    return btns;
  }

  getDetialBtns() {
    const { hrmScheduleDiffReport } = this.props;
    let btns =[];
    const btnExportExcel = <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@krzb1y`} type="primary" onClick={()=>hrmScheduleDiffReport.exportDetialExcel()} >{i18n.button.export()}</Button>;
    btns.push(btnExportExcel);
    return btns;
  }

  getDetailRightMenu = () => {
    const { hrmScheduleDiffReport } = this.props;
    let rightMenu = [];
    rightMenu.push({
        key: '1',
				content: i18n.button.export(),
				icon: <i className='icon-coms-export'/>,
				onClick: ()=>hrmScheduleDiffReport.exportDetialExcel()
    });
    return rightMenu;
  }

  getDetial(stsType){
    const { hrmScheduleDiffReport } = this.props;
    hrmScheduleDiffReport.stsType=stsType;
    hrmScheduleDiffReport.getTabTableData();
    hrmScheduleDiffReport.updateVisible(true);
  }
  
  getReportData(params){
    const { hrmScheduleDiffReport } = this.props;
    hrmScheduleDiffReport.getReportData(params);
  }

  render(){
    const { hrmScheduleDiffReport } = this.props;
    let { title,form,table, config, loading, reportdata,visible,dialogTitle, lastname,selectedKey,setSelectedKey,topTab} = hrmScheduleDiffReport;
    let qSize = reportdata.qSize;
    reportdata = toJS(reportdata);
    let cols =[];
    for(let i=0;i<qSize+13;i++){
      let width="6%";
      if(i==0||i==1)width="9%";
      cols.push(<col style={{width:width}} />);
    }
     return( <div className='wea-hrm-schedulediffreport'>
        <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@ck6z5t`}
          visible={visible}
          onCancel={()=>hrmScheduleDiffReport.updateVisible(false)}
          onClo
          closable
          style={{width: 900, height: window.innerHeight-250>500?500:window.innerHeight-250}}
          title = {dialogTitle}
          icon="icon-coms-hrm"
          iconBgcolor='#217346'
          buttons = {this.getDetialBtns()}
          moreBtn={{datas: this.getDetailRightMenu()}}
        >
        {/* <WeaTab
          searchType={['base']}
          searchsBaseValue={lastname}
          onSearch={v => {hrmScheduleDiffReport.getTableData()}}
          onSearchChange={v => {
            hrmScheduleDiffReport.lastname = v;
            }}
        /> */}
        {!isEmpty(topTab) && 
         <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@t9875j`}
          datas={topTab}
          keyParam="key"  //主键
          selectedKey={selectedKey}
          onChange={key => setSelectedKey(key)}
          />
        }
          <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@ogbqtr`} height={window.innerHeight-250>500?500:window.innerHeight-250} ref="scrollBar">
            <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@hbn1eb`}
              comsWeaTableStore={table}
            />
          </WeaNewScroll>
        </WeaDialog>
        <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@5tcs7x`} spinning={loading}>
        <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@xlbh1j`}  datas={this.getRightMenu()} onClick={this.onRightMenuClick.bind(this)}>
          <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@jryjcl`}
            title={title()}
            loading={false}
            icon={<i className='icon-coms-hrm' />}
            iconBgcolor='#217346'
            buttons={this.getTopButtons()}
            buttonSpace={10}
            showDropIcon={true}
            dropMenuDatas={this.getRightMenu()}
            onDropMenuClick={this.onRightMenuClick.bind(this)}
          >
          <div className="content">
          <div className='wea-hrm-schedulediffreport-condition'>
            {
              !isEmpty(config) && <WeaRadioGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaRadioGroup@70narl`} config={config} onChange={debounce(this.getReportData.bind(this),150)}/>
            }
          </div>
          {
            !isEmpty(reportdata) &&
              <div className='wea-hrm-schedulediffreport-content'>
              <table className='wea-hrm-schedulediffreport-table'>
                <colgroup>
                  {cols}
                </colgroup>
                <tbody>
                  <tr>
                    <td className="title" colspan={qSize+13}>{reportdata.title}</td>
                  </tr>
                  {this.getTableRow()}
                </tbody>
              </table>
              <table border="0" width="100%">
                <tbody>
                  <tr>
                    <td align="right" style={{height:50}}>{i18n.label.reportDate()}：{Util.DateFormat(new Date(), "yyyy-MM-dd") }</td>
                  </tr>
                </tbody>
              </table>
            </div>
          }
          </div>
          {
            !isEmpty(reportdata) &&<div className='wea-hrm-schedulediffreport-foot'>
              <table className='table-foot' border="0" width="100%">
                <tbody>
                  <tr>
                    <td>{this.getBtns()}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          }
          </WeaTop>
        </WeaRightMenu>
        </Spin>
        </div> ); 
  }
}
export default Main