import { Button, Modal,message,Row,Col, Spin} from 'antd';
import isEmpty from 'lodash/isEmpty'
import debounce from 'lodash/debounce'
import cloneDeep from 'lodash/cloneDeep'
import toString from 'lodash/toString'
import forEach from 'lodash/forEach'
import { WeaAlertPage, WeaTools,WeaTableEdit,WeaSearchGroup,WeaRightMenu, WeaFormItem,WeaTab} from 'ecCom'
import {WeaSwitch} from 'comsMobx';
import { inject, observer} from 'mobx-react';
import * as mobx from 'mobx';
import {i18n} from '../../public/i18n';
const toJS = mobx.toJS;

class CustComp extends React.Component{
  onChangeHandle = v => {
      const {fieldConfig, form, hrmWork} = this.props;
      if (fieldConfig.domkey[0]=='companystartdate' || fieldConfig.domkey[0]=='workstartdate') {
        let value = 0.00;
        let obj = {};
        let domKey = '';

        if (fieldConfig.domkey[0]=='companystartdate') {
          domKey = 'companyworkyear';
        }else if(field.domkey[0]=='workstartdate'){
          domKey = 'workyear';
        }
        value = hrmWork.calYear(v[fieldConfig.domkey[0]].value);
        obj[domKey]={value};
        form.updateFields(obj);
      }
  }

  render(){
    const {fieldConfig, form} = this.props;
      return (
          <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@p6e1kr@custcomq`} 
          fieldConfig={fieldConfig} form={form}
              onChange={this.onChangeHandle}
          />
      )
  }
}

@inject('hrmWork')
@inject('hrmCard')
@observer
class Work extends React.Component {
  componentDidMount(){
    const {hrmCard} = this.props;
    hrmCard.setTopButtons(this.getTopButtons.bind(this));
    hrmCard.setTopRightMenus(this.getRightMenu.bind(this));
    hrmCard.setTopShowDropIcon(true);
    this.init();
  }

  init = () => {
    const {hrmWork} = this.props;
    const hrmId = this.props.params.hrmId || '';
    hrmWork.init();
    hrmWork.hrmId=hrmId;
    hrmWork.getData();
  }
  getTabChildren = () => {
    const {hrmWork} = this.props;
    let {tableInfo, isEditor, tabkey} = hrmWork;
    let tabChildren = [];
    tableInfo = toJS(tableInfo);
    tableInfo && tableInfo.map((t,i)=>{
        if(tabkey==i){
            tabChildren.push(
                <WeaTableEdit ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEdit@v92mt1@${i}`}
                    ref={hrmWork.setWorkEditTables}
                    showTitle={isEditor}
                    // title={'列表信息'}
                    // addFirstRow={isEditor}
                    columns={t.tabinfo.columns}
                    datas={t.tabinfo.datas}
                    onChange={this.tableEditChange}
                    viewAttr={isEditor?2: 1}
                    getRowSelection={isEditor? null: ()=>null}
                />
            );
        }
    })
    return tabChildren;
  }
  getSearchs = () => {
    const {hrmWork} = this.props;
    let {form, conditions, isEditor} = hrmWork;
    const {isFormInit} = form;
    let group = [];
    let tipPosition = 'bottom';
    window.e9HideFormFieldKeys = [];
    isFormInit && conditions.forEach((c, i) =>{
        let items = [];
        c.items.forEach( (field, j) => {
          if(c.hide || (!isEmpty(field.otherParams) && field.otherParams.hide)){
            window.e9HideFormFieldKeys.push(field.domkey[0]);
          }else{
            items.push({
                com:(<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@ol5jv1@${j}`}
                    underline={!isEditor}
                    label={`${field.label}`}
                    error={form.getError(field)}
                    tipPosition={tipPosition}
                    labelCol={{span: `${window.HrmLabelCol}`}}
                    wrapperCol={{span: `${window.HrmWrapperCol}`}}>
                      <CustComp ecId={`${this && this.props && this.props.ecId || ''}_CustComq@ukb43t@custcomq`} hrmWork={hrmWork} fieldConfig={field} form={form} />
                      {/* <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@n51lnf@${j}`} fieldConfig={field} form={form} onChange={(v)=> {
                        if (field.domkey[0]=='companystartdate' || field.domkey[0]=='workstartdate') {
                          let value = 0.00;
                          let obj = {};
                          let domKey = '';
  
                          if (field.domkey[0]=='companystartdate') {
                            domKey = 'companyworkyear';
                          }else if(field.domkey[0]=='workstartdate'){
                            domKey = 'workyear';
                          }
                          value = hrmWork.calYear(v[field.domkey[0]].value);
                          obj[domKey]={value};
                          form.updateFields(obj);
                        }
                      }}/> */}
                    </WeaFormItem>),
                colSpan: 1
              });
          }
        });
        group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@2suq8n@${i}`} className={`${isEditor?'hrm-center':''}`} hide={c.hide} 
          needTigger={true} title={c.title} showGroup={c.defaultshow} items={items} col={window.HrmGroupCol}/>)
    });
    return group;
  }

  tableEditChange = (data) => {
    const {hrmWork} = this.props;
    let {tabkey = '0', tableInfo} = hrmWork;
    tableInfo = toJS(tableInfo);
    let d = cloneDeep(tableInfo);
    d[Number(tabkey)].tabinfo.datas = data;
    hrmWork.updateTableInfo(d);
  }
  onTabChange = (key) => {
    const {hrmWork} = this.props;
    hrmWork.changeTab(key);
  }

  getRightMenu = () => {
    const {hrmWork, hrmCard} = this.props;
    const {isEditor, buttons,hrmId} = hrmWork;
    let arr = [];
    try{
      if(buttons.hasEdit){
          if (isEditor){
              arr = [{
                  icon: <i className='icon-coms-common'/>,
                  content: i18n.button.save(),
                  key: 'save',
                  onClick: key =>{
                    this.saveEditCard();
                  }
                }, {
                  icon: <i className='icon-coms-go-back'/>,
                  content: i18n.button.back(),
                  key: 'back',
                  onClick: key =>{
                    this.backCard();
                  }
                }]
          } else {
              arr = [{
                      icon: <i className='icon-coms-edit'/>,
                      content:i18n.button.modify(),
                      key: 'editCard',
                      onClick: key =>{
                          this.editCard();
                        }
                  }
              ]

              arr.push(
                {
                  icon: <i className='icon-coms-Print-log'/>,
                  content:i18n.button.log(),
                  key: 'showLog',
                  onClick: key =>{
                    window.setLogViewProps({logSmallType:i18n.smallType.HRM_RSOURCE_CARD_WORK,targetId:hrmId});
                  }
                }
              )
          }
      }
    }catch(e){}
    return arr;
  }
  
  getTopButtons = () => {
    const {hrmWork} = this.props;
    const {isEditor, buttons} = hrmWork;
    const save = <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@l091ns`} type="primary" onClick={this.saveEditCard} >{i18n.button.save()}</Button>;
    const back = <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@0vo5lf`} type="primary" onClick={this.backCard} >{i18n.button.back()}</Button>;
    const edit = <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@x6pg14`} type="primary" onClick={this.editCard} >{i18n.button.modify()}</Button>;
    const btns = [];
    try{
      if (isEditor) {
        if (buttons.hasSave) {
          btns.push(save);
          btns.push(back);
        }
      } else {
        if (buttons.hasEdit) {
          btns.push(edit);
        }
      }
    }catch(e){}
    return btns;
  }
  editCard = () => {
    const {hrmWork} = this.props;
    hrmWork.edit();
  }
  saveEditCard = () => {
    const {hrmWork} = this.props;
    hrmWork.save();
  }
  backCard = () => {
    this.init();
  }
  render() {
    const {hrmWork} = this.props;
    const {loading, tabkey, tabInfo, date} = hrmWork;
    try{
      return  (
          <div className='hrm-my-cardInfo' style={{height:'100%', position: 'relative'}}>
              <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@wvj5t0`} spinning={loading}>
                      {this.getSearchs()}
                      {
                        !isEmpty(tabInfo) && <div className='hrm-my-cardInfo_detial_tabs'>
                        <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@mjqb21`}
                            type='card'
                            keyParam='key'
                            datas={tabInfo}
                            selectedKey={tabkey}
                            onChange={ v => {
                                hrmWork.updateTabkey(v);
                            }}
                        />
                        {this.getTabChildren()}
                    </div>
                      }
              </Spin>
          </div>
      )
    }catch(e){
      return (
        <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@hs0k67`}>
          <div style={{ color: '#000' }}>{i18n.message.authFailed()}</div>
      </WeaAlertPage>
      )
    }
  }
}

export default Work;