import {
  inject,
  observer
} from 'mobx-react';
import {
  Button,
  Form,
  Modal,
  message,
  Spin
} from 'antd';
import isEmpty from 'lodash/isEmpty'
import debounce from 'lodash/debounce'
import {
  WeaTop,
  WeaTab,
  WeaOrgTree,
  WeaLeftRightLayout,
  WeaRightMenu,
  WeaErrorPage,
  WeaTools,
  WeaSearchGroup,
  WeaDialog,
  WeaInput,
  WeaInputSearch,
  WeaDropMenu,
  WeaFormItem,
  WeaTransfer,
  WeaSelect,
  WeaLocaleProvider,
} from 'ecCom';
import trim from 'lodash/trim'
import {
  WeaTableNew,
  WeaSwitch
} from 'comsMobx';
const {
  WeaTable
} = WeaTableNew;
import '../style/addressBook.less';
import * as PublicFunc from '../util/pulic-func';
import {
  jumpToHrmCard,
  jumpToHrmSubCompany,
  jumpToHrmDept,
  jumpToHrmPost
} from '../util/pulic-func'
import cloneDeep from 'lodash/cloneDeep';
import AddressBookExportSetting from './resourceExportTemplate/AddressBookExportSetting';
import {
  i18n
} from '../public/i18n';
import uuid from 'uuid/v1';
import OrgTree from '../public/components/OrgTree.js';
import ColsetDialog from './addressBookPlus/ColsetDialog.js';
import LogDialog from './addressBookPlus/LogDialog.js';
import SyncDetailDialog from './addressBookPlus/SyncDetailDialog.js';
const getLabel = WeaLocaleProvider.getLabel;
const toJS = mobx.toJS;

@inject('hrmAddressBook')
@observer
export default class AddressBook extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      transferVisible: false
    }
  }
  componentDidMount() {
    const {
      from,
      lastname
    } = this.props.location.query;
    const {
      hrmAddressBook
    } = this.props;
    hrmAddressBook.searchFrom = from || '';
    hrmAddressBook.searchKeyWord = lastname || '';
    this.init();
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.location.key !== nextProps.location.key) {
      const {
        from,
        lastname
      } = nextProps.location.query;
      const {
        hrmAddressBook
      } = this.props;
      hrmAddressBook.searchFrom = from || '';
      hrmAddressBook.searchKeyWord = lastname || '';
      this.refs.WeaOrgTree && this.refs.WeaOrgTree.reset(() => {
        this.refs.WeaOrgTree.fetchData();
      });
      this.init();
    }
  }

  init = () => {
    const {
      type,
      id
    } = this.props.location.query;
    const {
      hrmAddressBook
    } = this.props;
    hrmAddressBook.showAllLevel = true;
    hrmAddressBook.rightMenus = []
    hrmAddressBook.defaultShowLeft = false;
    hrmAddressBook.virtualtype ='';
    hrmAddressBook.companysId='1';

    if (hrmAddressBook.searchFrom && hrmAddressBook.searchFrom == 'quickSearch') {
      hrmAddressBook.tabkey = 'default_3';
    } else {
      hrmAddressBook.tabkey = 'default_3';
    }

    let params = {}
    if (type && type != '' && id && id != '') {
      if (type == '1') {
        params['subcompanyid1'] = id;
      }
      if (type == '2') {
        params['departmentid'] = id;
      }
    }

    hrmAddressBook.getData(params);
    hrmAddressBook.getRightMenuConfig();
    hrmAddressBook.updateShowSearchAd(false);
    hrmAddressBook.updateVisible1(false);
    hrmAddressBook.updateVisible2(false);

    //重置左侧页签
    const {
      hrmAddressBookPlus: plusStore
    } = hrmAddressBook;

    plusStore.leftTab.selectedKey = '0';
  }

  onTabEdit = (targetKey, action) => {
    const {
      hrmAddressBook
    } = this.props;
    if (action === 'remove') {
      let params = {};
      params.opera = "delete";
      params.mouldid = targetKey;
      hrmAddressBook.deleteTabs(params);
    }
  }

  reRenderColumns = (columns) => {
    let __this = this;
    const {
      hrmAddressBook
    } = this.props;
    const {
      virtualtype
    } = hrmAddressBook;
    columns.forEach(c => {
      if (c.dataIndex == 'lastname') {
        c.render = function(text, record) {
          return <span style={{cursor:'pointer'}} className='wea-hrm-linkstyle' onClick={()=>jumpToHrmCard(record.id)}>{record.lastname}</span>
        }
      } else if (c.dataIndex == 'managerid') {
        c.render = function(text, record) {
          return <span style={{cursor:'pointer'}} className='wea-hrm-linkstyle' onClick={()=>jumpToHrmCard(record.managerid)} dangerouslySetInnerHTML={{__html: record.manageridspan}}></span>
        }
      } else if (c.dataIndex == 'subcompanyid1' && !(virtualtype.indexOf("-") > -1)) {
        c.render = function(text, record) {
          return <span style={{cursor:'pointer'}} className='wea-hrm-linkstyle' onClick={()=>jumpToHrmSubCompany(record.subcompanyid1)} dangerouslySetInnerHTML={{__html: record.subcompanyid1span}}></span>
        }
      } else if (c.dataIndex == 'departmentid' && !(virtualtype.indexOf("-") > -1)) {
        c.render = function(text, record) {
          return <span style={{cursor:'pointer'}} className='wea-hrm-linkstyle' onClick={()=>jumpToHrmDept(record.departmentid)} dangerouslySetInnerHTML={{__html: record.departmentidspan}}></span>
        }
      } else if (c.dataIndex == 'jobtitle') {
        c.render = function(text, record) {
          return <span style={{cursor:'pointer'}} className='wea-hrm-linkstyle' onClick={()=>jumpToHrmPost(record.jobtitle)} dangerouslySetInnerHTML={{__html: record.jobtitlespan}}></span>
        }
      } else {
        // c.render = function(text, record) {
        //   let valueSpan = record[c.dataIndex + "span"] !== undefined ? record[c.dataIndex + "span"] : record[c.dataIndex];
        //   return <span dangerouslySetInnerHTML={{__html: valueSpan}}></span>
        // }
      }
    })
    return columns;
  }

  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);
  }

  getTabButtonsAd = () => {
    const {
      hrmAddressBook
    } = this.props;
    const {
      tabkey,
      form,
      companysId
    } = hrmAddressBook;
    const btns = [<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@yjczgd@$1`} type='primary' onClick={() => {
      hrmAddressBook.updateShowSearchAd(false);
      this.doSearch();
    }}
    >{i18n.button.search()}</Button>];
    if (companysId && companysId < 0) {

    } else {
      tabkey == 'default_3' && btns.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@22kizg@$2`} type='primary' onClick={() => {
        hrmAddressBook.updateVisible2(true)
      }}
      >{i18n.button.saveAsTemplate()}</Button>);
      tabkey == 'default_3' && btns.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@l2qnyj@$3`} type='primary' onClick={() => {
        hrmAddressBook.formatTransfer();
        hrmAddressBook.updateVisible1(true)
      }}
      >{i18n.button.conditionDef()}</Button>);
      btns.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@x9nl51@$4`} type='ghost' onClick={() => form.resetConditionValue()}>{i18n.button.reset()}</Button>);
      btns.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@v9xv5e@$5`} type='ghost'
        onClick={() => hrmAddressBook.updateShowSearchAd(false)}
      >{i18n.button.cancel()}</Button>);
    }
    return btns;
  }
  getSearchs = () => {
    const {
      hrmAddressBook
    } = this.props;
    const {
      conditioninfo,
      conditioninfoAll,
      form,
      showAllCondition
    } = hrmAddressBook;
    const {
      isFormInit
    } = form;
    let ci = showAllCondition ? conditioninfoAll : conditioninfo;
    const group = [];
    isFormInit && ci.forEach((c, i) => {
      let items = [];
      c.items.forEach((field, j) => {
        if (field.isQuickSearch) {
          this.quickSearchPara = field.domkey[0];
        }
        items.push({
          com: (
            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@pf44r5@${j}`}
              label={`${field.label}`}
              labelCol={{ span: field.labelcol }}
              wrapperCol={{ span: field.fieldcol }}
            >
              <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@cbdl58@${j}`} fieldConfig={field} form={form} />
            </WeaFormItem>
          ),
          colSpan: 1,
        });
      });
      group.push(
        <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@gighgb@${i}`} needTigger={true} title={c.title} showGroup={c.defaultshow} items={items} />
      );
    });
    return <div>
      {group}
      {!showAllCondition && <div style={{textAlign: 'right', padding: '20px 25px'}}>
        <span className="cursor-pointer" onClick={()=> hrmAddressBook.updateShowAllCondition(true)} style={{marginRight: 12}}>
          <span style={{marginRight: 8}}>{i18n.label.allCondition()}</span><i className="icon-coms-right" style={{color: '#b2b2b2'}}/></span>
      </div>}
    </div>
  }

  getRightMenu = () => {
    const {
      hrmAddressBook
    } = this.props;
    const {
      rightMenus
    } = hrmAddressBook;
    let btns = [];
    const keys = this.getSelectedRowKeys();
    !isEmpty(rightMenus) && rightMenus.forEach((c) => {
      let item = {
        icon: <i className={`${c.menuIcon}`}/>,
        content: c.menuName,
      }
      if (c.menuFun == 'sendEmessage') item.disabled = keys.length == 0;
      btns.push(item);
    })
    return btns;
  }

  onRightMenuClick = (key) => {
    const {
      hrmAddressBook
    } = this.props;
    const {
      rightMenus
    } = hrmAddressBook;
    const menuFun = rightMenus[key].menuFun;
    this[menuFun] && this[menuFun]();
  }

  getTree = () => {
    const {
      hrmAddressBook
    } = this.props;
    const {
      companysId,
      hrmAddressBookPlus: plusStore
    } = hrmAddressBook, {
      leftTabDatas,
      leftTab,
      ORGTREE,
    } = plusStore;

    Object.assign(ORGTREE,{
      expandAllChildrenOnSearch:true
    });

    let tree;
    if (leftTab.selectedKey === '0') {
      tree = (
        <WeaOrgTree ecId={`${this && this.props && this.props.ecId || ''}_WeaOrgTree@dhi1ro`}
          ref='WeaOrgTree' 
          loading
          needSearch
          noCache={true}
          needDropMenu={true}
          onSelect={this.selectVirtual}
          isLoadSubDepartment={true}
          topPrefix={'hrmSearch'}
          companysId={companysId}
          inputLeftDom = {`<b>${i18n.label.organization()}</b`}
          treeNodeClick={this.treeNodeClick}
          expandAllChildrenOnSearch={true}
      />
      )
    } else {
      tree = <OrgTree ecId={`${this && this.props && this.props.ecId || ''}_OrgTree@xphsyb`} ORGTREE={ORGTREE}/>;
    }
    const leftCom = (
      <div style={{height:'100%'}} className='leftCom'>
        <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@80rg76`} {...leftTabDatas} {...leftTab}/>
        <div className='orgTree'>
          {
            tree
          }
        </div>
      </div>
    )
    return leftCom;
  }

  selectVirtual = (v) => {
    const {
      hrmAddressBook
    } = this.props;
    let params = {}
    params['virtualtype'] = v.key;
    hrmAddressBook.virtualtype = v.key;
    hrmAddressBook.selectVirtual(v.key);
    hrmAddressBook.getData(params);
    hrmAddressBook.getRightMenuConfig();
    hrmAddressBook.updateShowSearchAd(false);
    hrmAddressBook.updateVisible1(false);
    hrmAddressBook.updateVisible2(false);
  }

  treeNodeClick = (event) => {
    const {
      hrmAddressBook
    } = this.props;
    const {
      form,
      companysId
    } = hrmAddressBook;
    const type = event.node.props.type || '0';
    const id = event.node.props.id || '';
    let params = {};
    form.resetConditionValue();
    hrmAddressBook.updateShowSearchAd(false);
    hrmAddressBook.tabkey = 'default_3';
    hrmAddressBook.nodeType=type;
    if (type == '0') {
      params['virtualtype'] = companysId;
    }
    if (type == '1') {
      params['subcompanyid1'] = id;
    }
    if (type == '2') {
      params['departmentid'] = id;
    }
    hrmAddressBook.doSearch(params);
  }
  getDialogBtns1 = () => {
    const {
      hrmAddressBook
    } = this.props;
    const btns = [<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@3aluq0@$btn`} type='primary' onClick={hrmAddressBook.saveHrmSearchUserDefine}>{i18n.button.save()}</Button>];
    return btns;
  }
  getDialogBtns2 = () => {
    const {
      hrmAddressBook
    } = this.props;
    const btns = [<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@cr7b4d@$btn`} type='primary' onClick={hrmAddressBook.saveTemplete}>{i18n.button.save()}</Button>];
    return btns;
  }
  filterLeft = (items) => {
    let leftItems = cloneDeep(items)
    const {
      hrmAddressBook
    } = this.props;
    const {
      transferleftIptVal,
      transferSelectedKey
    } = hrmAddressBook;
    if (transferSelectedKey) {
      leftItems = leftItems.filter((item) => item.idx == transferSelectedKey)
    }
    if (trim(transferleftIptVal)) {
      leftItems = leftItems.filter((item) => item.label.indexOf(trim(transferleftIptVal)) > -1)
    }
    return leftItems
  }
  filterRight = (items) => {
    let rightItems = cloneDeep(items)
    const {
      hrmAddressBook
    } = this.props;
    const {
      transferRightIptVal
    } = hrmAddressBook;
    if (trim(transferRightIptVal)) {
      rightItems = rightItems.filter((item) => item.label.indexOf(trim(transferRightIptVal)) > -1)
    }
    return rightItems
  }
  renderItem = (item) => {
    return <div className="trasfer-list-item">
      <div className="top text-overflow" title={item.label}>{item.label}</div>
      <div className="bottom text-overflow" title={item.title}>{item.title}</div>
    </div>
  }
  renderTransfer = () => {
    const {
      hrmAddressBook
    } = this.props;
    let {
      transferDatas,
      transferKeys,
      transferOptions,
      transferleftIptVal,
      transferRightIptVal,
      transferSelectedKey
    } = hrmAddressBook;
    transferDatas = toJS(transferDatas);
    transferKeys = toJS(transferKeys);
    transferOptions = toJS(transferOptions);
    return (<div style={{padding: 20}}>
      {
        !isEmpty(transferDatas) && <WeaTransfer ecId={`${this && this.props && this.props.ecId || ''}_WeaTransfer@x310af`}
          icon="icon-coms-hrm"
          iconBgcolor='#217346'
          filterLeft={this.filterLeft}
          filterRight={this.filterRight}
          height={350}
          leftHeader={
            <div className="trasfer-header">
              <span>{i18n.label.toBeSelected()}</span>
              <WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@vpp9x5`}
                value={transferleftIptVal}
                onSearchChange={hrmAddressBook.updateTransferleftIptVal}
              />
              <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@o0m55o`}
                options={transferOptions}
                value={transferSelectedKey}
                onChange={hrmAddressBook.updateTransferSelectedKey}
              />
            </div>
  }
  rightHeader = {
    <div className="trasfer-header">
              <span>{i18n.label.selected()}</span>
              <WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@or8rjv`}
                value={transferRightIptVal}
                onSearchChange={hrmAddressBook.updateTransferRightptVal}
              />
            </div>
  }
  renderItem = {
    this.renderItem
  }
  data = {
    transferDatas
  }
  selectedKeys = {
    transferKeys
  }
  onChange={hrmAddressBook.updateTransferKeys}
  />
} </div>)
}

getTopButtons = () => {
  const {
    hrmAddressBook
  } = this.props;
  const {
    showAllLevel,
    tabkey,
    rightMenus
  } = hrmAddressBook;
  const keys = this.getSelectedRowKeys();
  let btns = [];

  const btnShowAllLevel = <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@53t4iz`} size="small" style={{height: '28px'}} onClick={this.changeShowAllLevel} title={showAllLevel?getLabel(387277,'不包含下级'):getLabel(508024,'包含下级')}>
                            <span>{showAllLevel?
                                  <i className='icon-coms-DisplaySubordinates' style={{color: '#2db7f5'}}/>
                                  :<i className='icon-coms-NoDisplayOfSubordinates'/>}</span>
                          </Button>;
  // if(tabkey=='default_2'){
  //   btns.push(btnShowAllLevel);
  // }

  btns.push(btnShowAllLevel);

  rightMenus.map((item, index) => {
    if (item.isTop && item.isTop == '1') {
      btns.push(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@b9wuoq@${index}`} type='primary' onClick={this[item.menuFun]} disabled={ item.menuFun=='sendEmessage' && keys.length == 0}>{item.menuName}</Button>);
    }
  });
  return btns;
}

changeShowAllLevel = () => {
  const {
    hrmAddressBook
  } = this.props;
  hrmAddressBook.changeShowAllLevel();
}

sendEmessage = () => {
  const keys = this.getSelectedRowKeys();
  const ids = keys ? keys.join(',') : '';
  PublicFunc.sendEmessage(ids);
}

exportExcel = () => {
  const {
    hrmAddressBook
  } = this.props;
  hrmAddressBook.exportExcel();
}

doExportSetting = () => {
  const {
    hrmAddressBook
  } = this.props;

  hrmAddressBook.initExportSetting();
  return;
  hrmAddressBook.exportExcel();
}

doSearch = (params) => {
  const {
    hrmAddressBook
  } = this.props;
  hrmAddressBook.doSearch(params);
}
reSearch = () => {
  const {
    hrmAddressBook
  } = this.props;
  hrmAddressBook.reSearch();
}
definedColumn = () => {
  const {
    hrmAddressBook
  } = this.props, {
    hrmAddressBookPlus: plusStore
  } = hrmAddressBook;

  plusStore.openColsetDialog('colset');

  // const {
  //   hrmAddressBook
  // } = this.props;
  // const {
  //   table
  // } = hrmAddressBook;
  // table.setColSetVisible(true);
  // table.tableColSet(true);
}

doLog = () => {
  const {
    hrmAddressBook
  } = this.props, {
    hrmAddressBookPlus: plusStore
  } = hrmAddressBook;

  plusStore.openSynclogDialog('excel');
}

doSortSetting = () => {
  const {
    hrmAddressBook
  } = this.props, {
    hrmAddressBookPlus: plusStore
  } = hrmAddressBook;

  plusStore.openColsetDialog('sortSetting');
}


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

onCancel = () => {
  this.props.hrmAddressBook.updateVisible1(false)
}

onCancel1 = () => {
  this.props.hrmAddressBook.updateVisible2(false);
  this.props.hrmAddressBook.updateTempleteValue('')
}

onKeyDown = (e) =>{
  if (e.keyCode == 13&& e.target.tagName === "INPUT") {
    this.props.hrmAddressBook.getSearchList()
    this.props.hrmAddressBook.updateShowSearchAd(false);
  }
}

hideSearchAd = () => {
  this.props.hrmAddressBook.updateShowSearchAd(false);
}

onSearchChange = value => {
  this.props.hrmAddressBook.form.updateFields({ [this.quickSearchPara || 'lastname']: { value } })
}

render() {
  const {
    hrmAddressBook
  } = this.props;
  const {
    title,
    tabs,
    tabkey,
    showSearchAd,
    loading,
    // comsWeaTableStore,
    form,
    table,
    visible1,
    visible2,
    templeteValue,
    defaultShowLeft,
    spinning
  } = hrmAddressBook;
  const formParams = form.getFormParams();
  const width = table.columns.filter(c => c.display === "true").length * 50;
  return (
    <div className='wea-hrm-address'>
        <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@81co1l`}
          className="wea-hrm-address-dialog"
          visible={visible1}
          onCancel={this.onCancel}
          closable
          style={{width: 700, height: 440}}
          title = {i18n.button.conditionDef()}
          icon="icon-coms-hrm"
          iconBgcolor='#217346'
          buttons = {this.getDialogBtns1()}
        >
          {this.renderTransfer()}
        </WeaDialog>
        <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@jy3xfz`}
          visible={visible2}
          onCancel={this.onCancel1}
          closable
          style={{width: 500, height: 120}}
          title = {i18n.button.saveAsTemplate()}
          icon="icon-coms-hrm"
          iconBgcolor='#217346'
          buttons = {this.getDialogBtns2()}
        >
          <div style={{padding: 20}}>
            <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@62kt85`}
                label={i18n.label.searchTemplateName()}
                labelCol={{span: 6}}
                wrapperCol={{span: 14}}>
                  <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@j9bmvw`} viewAttr="3" value={templeteValue} {...window.inputType} onChange={hrmAddressBook.updateTempleteValue}/>
                </WeaFormItem>
          </div>
        </WeaDialog>
        <ColsetDialog ecId={`${this && this.props && this.props.ecId || ''}_ColsetDialog@ikyko3`} store={hrmAddressBook}/>
        <LogDialog ecId={`${this && this.props && this.props.ecId || ''}_LogDialog@2j8mla`} store={hrmAddressBook}/>
        <SyncDetailDialog ecId={`${this && this.props && this.props.ecId || ''}_SyncDetailDialog@3g2m9s`} store={hrmAddressBook}/>
        <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@0ghw4d`} spinning={spinning}>
          <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@5xztua`}  datas={this.getRightMenu()} onClick={this.onRightMenuClick}>
              <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@q7cyun`}
                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}
              > 
                <WeaLeftRightLayout ecId={`${this && this.props && this.props.ecId || ''}_WeaLeftRightLayout@7muhhb`} isNew={true} showLeft={defaultShowLeft} leftCom={this.getTree()}>
                    <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@qnlhb3`}
                      type='editable-inline'
                      buttonsAd={this.getTabButtonsAd()}
                      searchType={['base', 'advanced']}
                      searchsBaseValue={form.getFormParams()[this.quickSearchPara || 'lastname'] || ''}
                      searchsAd={<div onKeyDown={this.onKeyDown}>{this.getSearchs()}</div>}
                      showSearchAd={showSearchAd}
                      setShowSearchAd={hrmAddressBook.updateShowSearchAd}
                      hideSearchAd={this.hideSearchAd}
                      keyParam='typeid'
                      datas={tabs}
                      selectedKey={tabkey}
                      onChange={hrmAddressBook.updateTabkey}
                      onSearch={(value)=>{
                        this.onSearchChange(value);
                        hrmAddressBook.getSearchList();
                      }}
                      onSearchChange={debounce(this.onSearchChange,1000) }
                      onEdit={this.onTabEdit}
                    />
                    <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@8r6p9a`}
                      comsWeaTableStore={table}
                      hasOrder={true}
                      needScroll={true}
                      getColumns={this.reRenderColumns}
                      onOperatesClick={this.onOperatesClick}
                      tableWidth={width}
                    />
                </WeaLeftRightLayout>
              </WeaTop>
          </WeaRightMenu>
        </Spin>
        <AddressBookExportSetting ecId={`${this && this.props && this.props.ecId || ''}_AddressBookExportSetting@zwwfd7`} store={hrmAddressBook} />
      </div>
  );
}
}