import React from 'react';
import { inject, observer} from 'mobx-react';
import {WeaTop, WeaTab,WeaRightMenu,WeaErrorPage,WeaSearchGroup,WeaFormItem,WeaSelect,WeaAlertPage,} from 'ecCom';
import {Row,Form,Col,Button, Spin} from 'antd';
import * as mobx from 'mobx';
import isEmpty from 'lodash/isEmpty';
const toJS = mobx.toJS;
import {WeaTableNew,WeaSwitch} from 'comsMobx';
const WeaTable = WeaTableNew.WeaTable;

@inject('hrmEduLevel')

@observer
class EduLevel extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const { hrmEduLevel } = this.props;
    hrmEduLevel.getHasRight();
  }

  render(){
    const { hrmEduLevel } = this.props;
    const {title,form,table,showSearchAd,searchParamsAd,verified,hasRight} = hrmEduLevel;

    if (verified && hasRight) {
      const formParams = form.getFormParams();
      let loadingTable = table.loading;
      return (
        <div className='wea-myhrm-edulevel'>
        <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@exyogg`} datas={this.getRightMenu()} onClick={this.onRightMenuClick.bind(this)}>
          <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@hi5874`}
            title={title}
            loading={loadingTable}
            icon={<i className='icon-coms-hrm' />}
            iconBgcolor='#217346'
            buttons={[]}
            buttonSpace={10}
            showDropIcon={false}
          >
          <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@dc29kt`}
            buttonsAd={this.getTabButtonsAd()}
            searchType={['base','advanced']}
            searchsBaseValue={formParams.name}
            setShowSearchAd={bool => {hrmEduLevel.setShowSearchAd(bool)}}
            hideSearchAd={() => hrmEduLevel.setShowSearchAd(false)}
            searchsAd={<Form ecId={`${this && this.props && this.props.ecId || ''}_Form@ca6onb`} horizontal>{this.getSearchs()}</Form>}
            showSearchAd={showSearchAd}
            onSearch={v => {hrmEduLevel.doSearch()}}
            advanceHeight={110}
            onSearchChange={v => {
              form.updateFields({
                name:{name:'name',value:v},
              });
            }}
          />
          <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@mkbcim`} spinning={loadingTable}>
            <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@1gdtyw`}
              comsWeaTableStore={table}
              hasOrder={true}
              needScroll={true}
              />
          </Spin>
          </WeaTop>
          </WeaRightMenu>
        </div>
      );
    }
    if (verified && !hasRight) {
        return (<WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@ieaxjf`} >
                <div style={{color : '#000'}}>
                    对不起，您暂时没有权限！
                </div>
            </WeaAlertPage>
        )
    }
    return (
        <div></div>
    )
  }

  getSearchs() {
    const { hrmEduLevel } = this.props;
    const { form,condition } = hrmEduLevel;
    const {isFormInit} = form;
    let group = [];

    const formParams = form.getFormParams();
    isFormInit && toJS(condition).map((c, i) =>{
      let items = [];
      c.items.map((fields, j) => {
        let hide = false;
        let dom =  <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@abzwws@${j}`} fieldConfig={fields} form={form} formParams={formParams}/>;
        items.push({
          com:(<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@mrobtr@${j}`}
              label={`${fields.label}`}
              labelCol={{span: `${fields.labelcol}`}}
              wrapperCol={{span: `${fields.fieldcol}`}}>
                {dom}
              </WeaFormItem>),
          colSpan:1,
          hide: hide
        })
      });
      group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@h961hq@${i}`} needTigger={true} title={c.title} showGroup={c.defaultshow} items={items} onKeyDown={(e) =>( e.keyCode == 13 && e.target.tagName === "INPUT" )  && hrmEduLevel.doSearch()}/>)
    });
    return group;
  }

  getRightMenu(){
    const keys = this.getSelectedRowKeys();
    const arr = [{
        icon: <i className='icon-coms-ws'/>,
        content:'搜索'
      }, {
        icon: <i className='icon-coms-task-list'/>,
        content:'显示定制列'
      }
    ];
    return arr;
  }

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

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

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

  getTabButtonsAd() {
    const { hrmEduLevel } = this.props;
    const { form,searchParamsAd } = hrmEduLevel;
    return [
        (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@jq39tt`} type="primary" onClick={()=>{hrmEduLevel.doSearch();hrmEduLevel.setShowSearchAd(false)}}>搜索</Button>),
        (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@6h4p55`} type="ghost" onClick={()=>{form.reset();}}>重置</Button>),
        (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@pwacdd`} type="ghost" onClick={()=>{hrmEduLevel.setShowSearchAd(false)}}>取消</Button>)
    ]
  }
}

export default EduLevel
