import React from 'react'
import {inject,observer} from 'mobx-react';
import {WeaAlertPage} from 'ecCom'
import isEmpty from 'lodash/isEmpty'
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';

@inject('hrmScheduleDiffReport4Formal')
@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 { hrmScheduleDiffReport4Formal } = this.props;
    this.init();
  }

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

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

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

    btns.push(btnImportExcel);
    return btns;
  }

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

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

  getTableRow(){
    const { hrmScheduleDiffReport4Formal } = this.props;
    let {reportdata} = hrmScheduleDiffReport4Formal;
    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() {
    const { hrmScheduleDiffReport4Formal } = this.props;
    let {reportdata} = hrmScheduleDiffReport4Formal;
    reportdata = toJS(reportdata);
    let lateRuleData = [];
    let earlyRuleData = [];
    let lateRuleDataList = reportdata.lateRuleList;
    let earlyRuleDataList = reportdata.earlyRuleList;
    if(!isEmpty(lateRuleDataList)){
      lateRuleDataList.map(function(datas, i) {
        lateRuleData.push(<span className="btn"><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@2ae65p@${i}`} onClick={()=>this.getDetial('BELATERULE',datas.reportname,datas.id)}>{datas.reportname+i18n.label.lateDetail()}</Button></span>)
      },this);
    }
    if(!isEmpty(earlyRuleDataList)){
      earlyRuleDataList.map(function(datas, i) {
        earlyRuleData.push(<span className="btn"><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@qlbvdh@${i}`} onClick={()=>this.getDetial('LEAVEEARLYRULE',datas.reportname,datas.id)}>{datas.reportname+i18n.label.earlyRetreatDetail()}</Button></span>)
      },this);
    }

    return [
        (<span className="btn"><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@suvq1c@1`} onClick={()=>this.getDetial('SIGININ')}>{i18n.label.signInDetail()}</Button></span>),
        (<span className="btn"><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@en9ujs@2`} onClick={()=>this.getDetial('SIGINOUT')}>{i18n.label.signOutDetail()}</Button></span>),        
        (<span className="btn"><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@x30rt7@3`} onClick={()=>this.getDetial('BELATE')}>{i18n.label.lateDetail()}</Button></span>),
        lateRuleData,
        (<span className="btn"><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@tv0iui@4`} onClick={()=>this.getDetial('ABSENTBELATE')}>{i18n.label.absentlateDetail()}</Button></span>),
        (<span className="btn"><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@pq7w6s@5`} onClick={()=>this.getDetial('LEAVEEARLY')}>{i18n.label.earlyRetreatDetail()}</Button></span>),
        earlyRuleData,
        (<span className="btn"><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@5caxju@6`} onClick={()=>this.getDetial('ABSENT')}>{i18n.label.absenteeismDetail()}</Button></span>),
        (<span className="btn"><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@ppvxtp@7`} onClick={()=>this.getDetial('NOSIGN')}>{i18n.label.leakageOfSignatureDetail()}</Button></span>),
        (<span className="btn"><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@gcvccl@8`} onClick={()=>this.getDetial('LEAVE')}>{i18n.label.leaveDetail()}</Button></span>),
        (<span className="btn"><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@puh4le@9`} onClick={()=>this.getDetial('EVECTION')}>{i18n.label.businessTripDetail()}</Button></span>),
        (<span className="btn"><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@a2ak2s@10`} onClick={()=>this.getDetial('OUTDAYS')}>{i18n.label.publicDetail()}</Button></span>),
        (<span className="btn"><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@v82iir@11`} onClick={()=>this.getDetial('OVERTIME')}>{i18n.label.overtimeWorkDetail()}</Button></span>),
        (<span className="btn"><Button ecId={`${this && this.props && this.props.ecId || ''}_Button@7iqq34@12`} onClick={()=>this.getDetial('OTHER')}>{i18n.label.attendanceAnomalyDetail()}</Button></span>)
    ]
    return btns;
  }

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

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

  getDetial(stsType,reportname,ruleid){
    const { hrmScheduleDiffReport4Formal } = this.props;
    hrmScheduleDiffReport4Formal.stsType=stsType;
    hrmScheduleDiffReport4Formal.reportname=reportname;
    hrmScheduleDiffReport4Formal.ruleid=ruleid||'';
    hrmScheduleDiffReport4Formal.getTabTableData();
    hrmScheduleDiffReport4Formal.updateVisible(true);
  }
  
  getReportData(params){
    const { hrmScheduleDiffReport4Formal } = this.props;
    hrmScheduleDiffReport4Formal.getReportData(params);
  }

  render(){
    const { hrmScheduleDiffReport4Formal } = this.props;
    let { title,form,table, config, loading, reportdata,visible,dialogTitle, lastname,selectedKey,setSelectedKey,topTab} = hrmScheduleDiffReport4Formal;
    let qSize = reportdata.qSize;
    let lateRuleSize = isEmpty(reportdata.lateRuleSize) ? 0 : reportdata.lateRuleSize;
    let earlyRuleSize = isEmpty(reportdata.earlyRuleSize) ? 0 :reportdata.earlyRuleSize;
    reportdata = toJS(reportdata);
    let cols =[];
    for(let i=0;i<lateRuleSize+earlyRuleSize+qSize+15;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@ee2c70`}
          visible={visible}
          onCancel={()=>hrmScheduleDiffReport4Formal.updateVisible(false)}
          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 => {hrmScheduleDiffReport4Formal.getTableData()}}
          onSearchChange={v => {
            hrmScheduleDiffReport4Formal.lastname = v;
            }}
        /> */}
        {!isEmpty(topTab) && 
         <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@h75teq`}
          datas={topTab}
          keyParam="key"  //主键
          selectedKey={selectedKey}
          onChange={key => setSelectedKey(key)}
          />
        }
          <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@bhhno6`} height={window.innerHeight-250>500?500:window.innerHeight-250} ref="scrollBar">
            <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@v828v6`}
              comsWeaTableStore={table}
            />
          </WeaNewScroll>
        </WeaDialog>
        <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@f4le0z`} spinning={loading}>
        <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@tj17jm`}  datas={this.getRightMenu()} onClick={this.onRightMenuClick.bind(this)}>
          <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@01e8dv`}
            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@h7s3hg`} 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={15+qSize+lateRuleSize+earlyRuleSize}>{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