import React from 'react'
import {inject,observer} from 'mobx-react';
import {WeaAlertPage, WeaDatePicker } from 'ecCom'
import isEmpty from 'lodash/isEmpty'
import {
  WeaReportGroup,
  WeaTop,
  WeaTab,
  WeaRightMenu,
  WeaDialog,
  WeaInput,
  WeaFormItem,
  WeaTools,
  WeaRadioGroup, 
  WeaNewScroll,
  WeaTable} from 'ecCom'
import {Tabs,Button,Spin,Table} from 'antd'
import * as mobx from 'mobx';
import { toJS } from 'mobx';
import '../../style/schedulediffmonthattdetail.less';
import {routerShape} from 'react-router';
import debounce from 'lodash/debounce'
import moment from 'moment';
import {i18n} from '../../public/i18n';

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

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

  init(){
    const { hrmScheduleDiffMonthAttDetail } = this.props;
    let {pDate} = hrmScheduleDiffMonthAttDetail;
    hrmScheduleDiffMonthAttDetail.getSearchCondition({}, (config)=> {
      let yearmonth = config[0];
      const com = <div style={{lineHeight: '40px'}}>
              <WeaDatePicker ecId={`${this && this.props && this.props.ecId || ''}_WeaDatePicker@p8wr4x`}
                arrow
                type="month"
                style={{marginRight: 10}}
                value={pDate}
                date={pDate}
                onChange={value => hrmScheduleDiffMonthAttDetail.changeDate(value)}
              />
              {/* <span style={{paddingLeft: '10px'}}><Button onClick={()=>hrmScheduleDiffMonthAttDetail.changeDate(new moment().format('YYYY-MM'))}>本月</Button></span> */}
              </div>
      yearmonth.options = [];
      yearmonth.com = com;
    });
  }

  doSearch(){
    const { hrmScheduleDiffMonthAttDetail } = this.props;
    hrmScheduleDiffMonthAttDetail.getData();
  }
  
  exportExcel(){
    const { hrmScheduleDiffMonthAttDetail } = this.props;
    hrmScheduleDiffMonthAttDetail.exportExcel();
  }

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

    btns.push(btnImportExcel);
    return btns;
  }

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

  getTopButtons() {
    const { hrmScheduleDiffMonthAttDetail } = this.props;
    let btns =[];
    const btnExportExcel = <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@aa7tno`} type="primary" onClick={()=>hrmScheduleDiffMonthAttDetail.exportExcel()} >{i18n.button.export()}</Button>;
    btns.push(btnExportExcel);
    return btns;
  }
  
  getTableRow(){
    const { hrmScheduleDiffMonthAttDetail } = this.props;
    let {reportdata} = hrmScheduleDiffMonthAttDetail;
    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 => {
        let params = {};
        let backgroundColor = cell.backgroundColor||'';
        let title = cell.title||'';
        if(cell.resourceid){
          params.resourceId = cell.resourceid;
          params.curDate = cell.currentdate;
          cells.push(<td className="data" style={{cursor:'pointer',backgroundColor:backgroundColor}} title={title} onClick={()=>{this.getDetial(params)}}>{cell.value}</td>);
        }else{
          cells.push(<td className="data" style={{backgroundColor:backgroundColor}} title={title}>{cell.value}</td>); 
        }
      })
      rows.push(<tr>{cells}</tr>);
    })

    return rows;
  }

  getDetialBtns() {
    return [];
  }
  
  getDetailRightMenu = () => {
    const { hrmScheduleDiffReport } = this.props;
    let rightMenu = [];
    return rightMenu;
  }

  getDetial(params){
    const { hrmScheduleDiffMonthAttDetail } = this.props;
    hrmScheduleDiffMonthAttDetail.getTableData(params);
    hrmScheduleDiffMonthAttDetail.updateVisible(true);
  }

  getReportData(params){
    const { hrmScheduleDiffMonthAttDetail } = this.props;
    hrmScheduleDiffMonthAttDetail.getReportData(params);
  }

  render(){
    const { hrmScheduleDiffMonthAttDetail } = this.props;
    let { title,form,config, loading, reportdata,visible,dialogTitle,table,table1,showFList} = hrmScheduleDiffMonthAttDetail;
    reportdata = toJS(reportdata);
    let cols =[];
    !isEmpty(reportdata.titlerows) && reportdata.titlerows.forEach(row =>{
      let width="3%";
      cols.push(<col style={{width:width}} />);
    })

     return( <div className='wea-hrm-schedulediffmonthreport'>
        <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@js7ac6`}
          visible={visible}
          onCancel={()=>hrmScheduleDiffMonthAttDetail.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()}}
        >
        <WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@7hp40g`} height={window.innerHeight-250>500?500:window.innerHeight-250} ref="scrollBar">
            {
              !isEmpty(table) && <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@mkbh7j`} dataSource={table.datas} columns={table.columns} pagination={false}/>
            }
            {
              showFList && !isEmpty(table1) &&<WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@yo88nd`} dataSource={table1.datas} columns={toJS(table1.columns)} pagination={false}/>
            }
        </WeaNewScroll>
        </WeaDialog>
        <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@va1524`} spinning={loading}>
        <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@hh2ztc`}  datas={this.getRightMenu()} onClick={this.onRightMenuClick.bind(this)}>
          <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@klnd4k`}
            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-schedulediffmonthreport-condition'>
            {
              !isEmpty(config) && <WeaRadioGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaRadioGroup@moae1x`} config={config} onChange={debounce(this.getReportData.bind(this),150)}/>
            }
          </div>
          {
            !isEmpty(reportdata) &&
              <div className='wea-hrm-schedulediffmonthreport-content'>
              <table className='wea-hrm-schedulediffmonthreport-table'>
                <colgroup>
                  {cols}
                </colgroup>
                <tbody>
                  {this.getTableRow()}
                </tbody>
              </table>
            </div>
          }
          </div>
          </WeaTop>
        </WeaRightMenu>
        </Spin>
        </div> ); 
  }
}
export default Main