import React from 'react';
import { inject, observer} from 'mobx-react';
import {WeaTop, WeaTab,WeaRightMenu,} from 'ecCom';
import {Button,Form,Table, Spin} from 'antd';
import * as mobx from 'mobx';
import isEmpty from 'lodash/isEmpty';
const toJS = mobx.toJS;
import * as PublicFunc from '../util/pulic-func';
window.openFullWindowForXtable = PublicFunc.openFullWindowForXtable;
import moment from 'moment';
import {WeaTableNew} from 'comsMobx';
import {i18n} from '../public/i18n';
const WeaTable = WeaTableNew.WeaTable;

@inject('hrmRewardsRecord')
@inject('hrmCard')
@observer
class HrmRewardsRecord extends React.Component {
  componentWillMount(){
    const {hrmId}=this.props.params;
    const { hrmRewardsRecord } = this.props,
    {setHrmId} = hrmRewardsRecord;
    setHrmId(hrmId);
  }

  componentDidMount() {
    const { hrmRewardsRecord, hrmCard } = this.props;
    hrmCard.setTopRightMenus(this.getRightMenu.bind(this));
    this.changeTab('1');
  }

  componentWillReceiveProps(nextProps) {
    if(this.props.location.key !== nextProps.location.key) {
      this.changeTab('1');
    }
  }

  render(){
    const { hrmRewardsRecord } = this.props;
    let {title,form,table,tabkey,tabDatas,isshowrecord} = hrmRewardsRecord;
    let qname = '';

    const {query} = this.props.location;
    const formParams = form.getFormParams();
    return (
      <div className='wea-myhrm-rewardsrecord'>
        <div style={query.fromcard? {display:'none'} :  {display:''}}>
          <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@kywmn9`}
            title={title()}
            icon={<i className='icon-coms-hrm' />}
            iconBgcolor='#217346'
            buttons={this.getTopButtons()}
            buttonSpace={10}
            showDropIcon={true}
            dropMenuDatas={this.getRightMenu()}
          />
        </div>
        <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@m7955n`}
          selectedKey={tabkey}
          datas={tabDatas()}
          searchType={['base']}
          keyParam='key'
          onChange={this.changeTab.bind(this)}
          searchsBaseValue={formParams.qname}
          onSearch={v => {hrmRewardsRecord.doSearch({qname})}}
          onSearchChange={v => {
            qname = v;
            hrmRewardsRecord.qname = v;
          }}
        />
        <div className="wea-new-table" style={tabkey=='2' ? {display:'none'} : {}}>{this.getTables()}</div>
        <div style={(tabkey=='1' && !isshowrecord ) ? {display:'none'} : {height: '100%'}}>
          <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@cf6nq4`}
            comsWeaTableStore={table}
            hasOrder={true}
            needScroll={true}
            //onOperatesClick={this.onOperatesClick}
            />
        </div>
      </div>
    );
  }

  getTables = () => {
    const { hrmRewardsRecord } = this.props;
    let {tableinfo} = hrmRewardsRecord;

    const tableinfoData = !isEmpty(tableinfo) && toJS(tableinfo);
    let tabs = [];
    if(!isEmpty(tableinfoData)){
      tableinfoData.forEach( (table, i) => {
        let columns = table.tabinfo.columns;
        // columns[0].render=(text,record)=>{
        //   return <a href={"/hrm/HrmTab.jsp?_fromURL=HrmResourceRewardsRecordDetail&checkid="+record.key} target='blank'>{text}</a>
        // }
        table && tabs.push(
          <div>
            <span style={{lineHeight:'40px'}}>
              {table.tabinfo.tabname}
            </span>
            <Table ecId={`${this && this.props && this.props.ecId || ''}_Table@0s5hau@${i}`} dataSource={table.tabinfo.datas} columns={columns} pagination={false}/>
          </div>
        );
      });
    }
    return tabs;
  }

  changeTab = (key) => {
    const {hrmRewardsRecord} = this.props;
    hrmRewardsRecord.changeTab(key);
  }

  onOperatesClick = (record,index,operate,flag,argumentString) => {
      const fn = operate.href ? operate.href.split(':')[1].split('(')[0] : '';
      const id = record.id ? record.id : '';
      PublicFunc[fn](id);
  }

  getRightMenu = () => {
    const { hrmRewardsRecord } = this.props;
    let arr = [];
    try{
      arr = [{
        icon: <i className='icon-coms-ws'/>,
        content:i18n.button.search(),
        key: 'search',
        onClick: () => hrmRewardsRecord.doSearch()
      }, {
        icon: <i className='icon-coms-task-list'/>,
        content:i18n.button.columnVisibleSetting(),
        key: 'definedColumn',
        onClick: this.definedColumn
      }
    ];
  }catch(e){}
    return arr;
  }

  onRightMenuClick = (key) => {
    const { hrmRewardsRecord } = this.props;
    switch(key){
        case '0':
            hrmRewardsRecord.doSearch();
            break;
        case '1':
            this.definedColumn();
            break;
    }
  }

  getSelectedRowKeys = () => {
    const { hrmRewardsRecord } = this.props;
    const { table} = hrmRewardsRecord;
    const selectedRowKeys = table.selectedRowKeys;
    return selectedRowKeys;
  }

  definedColumn = () => {
    const { hrmRewardsRecord } = this.props;
    const { table} = hrmRewardsRecord;
    table.setColSetVisible(true);
    table.tableColSet(true);
  }

  getTopButtons = () => {
    const { hrmRewardsRecord } = this.props;
    return [
        (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@xcgjvu@1`} type="primary" onClick={() => hrmRewardsRecord.doSearch()}>{i18n.button.search()}</Button>)
    ]
  }
}

export default HrmRewardsRecord