import React from 'react';
import {toJS} from 'mobx';
import {inject, observer} from "mobx-react";
import {WeaTableNew} from "comsMobx";
import {WeaLocaleProvider, WeaSearchGroup, WeaButtonIcon, WeaBrowser, WeaHelpfulTip} from 'ecCom';
import {GeneralTitleColor, doConfirm} from '../util/IntegrationUtil';

const {getLabel} = WeaLocaleProvider;
const {WeaTable} = WeaTableNew;

@inject("whiteListStore")
@observer
export default class WhiteList extends React.Component {
  /**
   * 对白名单的操作
   */
  operateWhiteList = (type, value) => {
    const {whiteListStore} = this.props;
    const {tableStore2, status: {operateIndex}} = whiteListStore;
    const {selectedRowKeys} = toJS(tableStore2);
    if(type === "add") {
      whiteListStore.getWhiteListMappingOperation({operation: "add", id: value[0], filter_id: operateIndex});
    }else if(type === "delete") {
      doConfirm(getLabel(385625, '确定要删除选择的记录吗？'), whiteListStore.getWhiteListMappingOperation, {operation: "delete", id: selectedRowKeys, filter_id: operateIndex});
    }
  }

  /**
   * 获取weasearchGroup上方的自定义按钮
   */
  getCustomComponent = () => {
    const {status, tableStore2} = this.props.whiteListStore;
    const {selectedRowKeys} = toJS(tableStore2);
    const {selectids} = toJS(status);
    let btn = [
      <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@zjejiy@WhiteListPublicPageBrowser`}
        type="whitelist"
        customized
        title={getLabel('513388','选择白名单地址')}
        icon={GeneralTitleColor.icon}
        iconBgcolor={GeneralTitleColor.iconBgcolor}
        isSingle={false}
        memorise={true}
        replaceDatas={selectids}
        onChange={(...v) => this.operateWhiteList('add', v)}
      >
        <WeaButtonIcon ecId={`${this && this.props && this.props.ecId || ''}_WeaButtonIcon@kdqz1n@WhiteListPublicPageButtonIconAdd`} className="addBtn" buttonType='add' type="primary" />
      </WeaBrowser>,
      <WeaButtonIcon ecId={`${this && this.props && this.props.ecId || ''}_WeaButtonIcon@pgjork@WhiteListPublicPageButtonIconDelete`} onClick={() => this.operateWhiteList('delete')} buttonType='del' type="primary" disabled={selectedRowKeys.length === 0} />
    ];
    return <div className="inte-whitelist-register-dialog-custom-button">{btn}</div>
  }

  render() {
    const {whiteListStore, otherCom, title, helpfulTip} = this.props;
    const {tableStore2} = whiteListStore;
    return <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@hdibfi`} col={1} needTigger={true} showGroup={true} items={[]} customComponent={this.getCustomComponent()}
      title={<div style={{display: "inline-block"}}>
        {title || getLabel('513385','白名单地址')}
        {helpfulTip ? <WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@54i27o`} style={{marginLeft: 10}} title={helpfulTip} /> : null}
      </div>} 
    >
      <div style={{marginTop: -7}}>
        {otherCom ? otherCom : null}
        <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@xebvqg`} 
          comsWeaTableStore={tableStore2}
          hasOrder={true}
        />
      </div>
    </WeaSearchGroup>
  }
}