import React from "react";
import { inject, observer } from "mobx-react";
import { Button, Spin, Menu, Dropdown, Alert} from 'antd';
import { toJS } from "mobx";
import {WeaSwitch} from "comsMobx";
import {
  WeaTableEditable,
  WeaSearchGroup,
  WeaButtonIcon,
  WeaBrowser,
  WeaFormItem,
  WeaTab,
  WeaLocaleProvider,
  WeaInput,
  WeaSelect,
} from "ecCom";
import {
  checkTableFieldValueUnique
}  from "../../apis/CommonService";
import {
  doConfirm,
  getForm,
} from '../../util/IntegrationUtil';
import IconSet from '../../public/IconSet';
import AutoMapping from '../../public/AutoMapping';

const {getLabel} = WeaLocaleProvider;

@inject("workflowFlowStore")
@observer
export default class RegisterESB extends React.Component {
  constructor(props) {
    super(props);
    this.state={
        visible: false,
        actionFieldShowError: false,
        esbIdShowError: false,
        detailTableInfo: {
          showCopy: false,
          showCollapse: false,
          rowKey: "rowKey",
        },
        mainTableInfo: {
          showTitle: false,
          showAdd: false,
          showDelete: false,
          showCopy: false,
          rowKey: "rowKey",
          showCollapse: false,
        }
    };
    props.getInstanceOf && props.getInstanceOf(this);  
  }

  componentWillMount() {
    this.props.getInstanceOf && this.props.getInstanceOf(this);  
  }

  componentWillUnmount() {
    const { workflowFlowStore } = this.props;
    const { setState } = workflowFlowStore;

    setState({ operateSrc: '' });
  }

  componentWillReceiveProps(nextProps) {
    nextProps.getInstanceOf && nextProps.getInstanceOf(this);
  }
  
  // 是否有值
  checkHasValue = (allDatas=[], data, isTop, record) => {
    // isTop为false时，说明是明细，此时要判断data是否是明细的下级，是的话，进行之后的操作。
    let check = true;
    if(isTop == 0) {
      if(data.paramKey && record.paramKey) {
        check = (data.paramKey.split('.').length > record.paramKey.split('.').length) && (data.paramKey.split('.').slice(0, record.paramKey.split('.').length).join('.') === record.paramKey);
      }
    }
    if(check) {
      if(!data.arrs) {
        // 最后一级有值，其他的没有值
        let preData = allDatas.find(item => item.paramKey && item.paramKey.split('.').length === (data.paramKey.split('.').length + 1) && item.paramKey.slice(0, data.paramKey.length) === data.paramKey);
        if(!preData) {
          return true;
        }
        return false;
      };
      return true;  //明细的值变化会引起其下级数据的变化
    }
    return false;
  }

  // 自动映射的保存
  saveAutoMappingConfig = (datas=[], params) => {
    const {
      workflowFlowStore
    } = this.props, {
      status
    } = workflowFlowStore, {
      esbRequestDatas=[],
      detailFormTabDatas=[],
      selectType=[],
      detailRecord,
      isTop,
    } = toJS(status);
    let options = detailFormTabDatas.concat(selectType), 
      matchKey = params.matchType == '1' ? "paramKey" : "paramName",
      assignDatas = [...esbRequestDatas];  // 自动映射全部数据或者映射下级数据
      assignDatas && assignDatas.forEach((data, idx) => {
      if(this.checkHasValue(assignDatas, data, isTop, detailRecord)) {
        let isMatch = false;
        if(params.matchAll == 0) {
          if(!data.assignType) {
            isMatch = true;
          }else {
            if(!data.arrs) {
              if(!data.assignValue) {
                isMatch = true;
              }else {
                let isBrowser = options && options.find(item => item.key === data.assignType);
                if(isBrowser && isBrowser.browserType) {
                  try {
                    if(!JSON.parse(data.assignValue).id) {
                      isMatch = true;
                    }
                  }catch(err){}
                }
              }
            }
          }
        }
        if(params.matchAll == 1 || isMatch) {
          let index = datas.findIndex(v => {
            if(params.matchType == '1') {
              return data["paramName"] === v[matchKey];
              // return data[matchKey].split('.')[data[matchKey].split('.').length - 1] === v[matchKey];
            }else {
              return data["showName"] === v[matchKey];
            }
          });
          if(index != -1) {
            assignDatas[idx] = {
              ...data,
              assignValue: data.arrs ? "" : datas[index].assignValue,
              assignType: datas[index].assignType
            }
          }
        }
      }
    })
    workflowFlowStore.setState({esbRequestDatas: assignDatas});
    this.closeAutoMappingDialog();
  }

  // 自动映射
  closeAutoMappingDialog = () => {
    this.setState({
      visible: false
    });
    this.props.workflowFlowStore.setState({
      detailTableName: "",
      isTop: "0"
    })
  }

  getAutoMappingDatas = (isTop="0", detailTableName="", record="") => {
    const {
      workflowFlowStore
    } = this.props, {
      status
    } = workflowFlowStore, {
      from=""
    } = toJS(status);
    this.setState({
      visible: true
    });
    workflowFlowStore.setState({
      detailTableName,
      isTop,
      detailRecord: record,
    })
    workflowFlowStore.getAutoMappingFields({from});
  }

  willDelete = (allDatas, keys, flag) => {
    const {workflowFlowStore} = this.props;
    const {status: {tabSelectedKey}, detailFormInfo} = workflowFlowStore;
    doConfirm(
      getLabel(385625, '确定要删除选择的记录吗？'),
      () => {
        if(flag === "detail") {
          this[`detail_${tabSelectedKey}`].state.selectedRowKeys = [];
          let datas = {...detailFormInfo};
          datas[tabSelectedKey].paramDatas = allDatas;
          workflowFlowStore.detailFormInfo = datas;
        }
      }
    );
  }

  deleteData = (flag) => {
    const {
      workflowFlowStore
    } = this.props, {
      status,
      detailFormInfo
    } = workflowFlowStore, {
      selectedRowKeys,
      esbActionTableDatas=[],
      tabSelectedKey
    } = toJS(status);
    doConfirm(
      getLabel(385625, '确定要删除选择的记录吗？'),
      () => {
        let datas = [], orgDatas = [];
        if(flag) {
          orgDatas = [...esbActionTableDatas];
        }else {
          if(detailFormInfo && detailFormInfo[tabSelectedKey])
            orgDatas = [...toJS(detailFormInfo)[tabSelectedKey].paramDatas];
        }
        orgDatas && orgDatas.forEach(data => {
          if(selectedRowKeys.indexOf(data.rowKey) === -1) {
            datas.push(data);
          }
        });
        if(flag) {
          workflowFlowStore.setState({
            esbActionTableDatas: datas,
          })
        }else {
          let detailDatas = {...detailFormInfo};
          detailDatas[tabSelectedKey].paramDatas = datas;
          workflowFlowStore.detailFormInfo = detailDatas;
        }
        workflowFlowStore.setState({
          selectedRowKeys: []
        })
      }
    ) 
  }

  willAdd = (allDatas, addData, flag) => {
    const {
      workflowFlowStore
    } = this.props, {
      status, 
      detailFormInfo
    } = workflowFlowStore, {
      tabSelectedKey
    } = toJS(status);

    if(["mainForm", "detail"].includes(flag)) {
      allDatas && allDatas.forEach((v, index) => {
        if(v.paramKey === addData.paramKey) {
          allDatas[index] = {
            ...allDatas[index],
            tablename: tabSelectedKey
          }
        }
      })
    }
    if(flag === "mainForm") {
      workflowFlowStore.setState({esbActionTableDatas: allDatas});
    }else if(flag === "detail") {
      let datas = {...detailFormInfo};
      datas[tabSelectedKey].paramDatas = allDatas;
      workflowFlowStore.detailFormInfo = datas;
    }
    return allDatas;
  }

  willEdit = (allDatas=[], editData, flag) => {
    const {
      workflowFlowStore
    } = this.props, {
      status,
      detailFormInfo
    } = workflowFlowStore, {
      tabSelectedKey,
      detailFormTabDatas=[],
      selectType=[],
      from=""
    } = toJS(status);
    let {record, value, key, index} = editData;

    if(["mainForm", "detail"].includes(flag)) {
      if(key === "dbFieldName") {
        let dbFieldTypeKey = ["1", "2"].includes(`${from}`) ? "fielddbtype" : "dbtype";
        if(value && value[2]) {
          allDatas[index] = {
            ...allDatas[index],
            dbFieldName: value[0] || '',
            dbFieldNameSpan: JSON.stringify({id: value[0] || "", name: value[1] || ""}),
            dbFieldType: (value[2][0] && value[2][0][dbFieldTypeKey]) ? value[2][0][dbFieldTypeKey] : '',
            dbFieldNameChange: "0"
          }
        }
      }else if(key === "esbFieldName") {
        if(value && value[2]) {
          allDatas[index] = {
            ...allDatas[index],
            esbFieldName: value[0] || '',
            esbFieldNameSpan: JSON.stringify({id: value[0] || '', name: value[1] || ''}),
            esbFieldNameChange: "0"
          }
        }
      }else if(key === "nullSkip") {
        allDatas[index] = {
          ...allDatas[index],
          defaultValue: ''
        }
      }
    }else if(flag === "request") {
      let currentData = allDatas && allDatas.find(v => v.paramKey === record.paramKey);
      let recordKeys = record.paramKey ? record.paramKey.split('.') || [] : [];
      let childNode = allDatas && allDatas.find(v => {
        let dataParamKeys = v.paramKey ? v.paramKey.split('.') || [] : [];
        return (dataParamKeys.length > recordKeys.length) && (dataParamKeys.slice(0, recordKeys.length).join('.') === record.paramKey);
      })
      let isBrowser = detailFormTabDatas.concat(selectType).find(item => item.key === allDatas[index].assignType);
      if(key === "assignType") {
        currentData = {
          ...currentData,
          assignValue: (isBrowser && isBrowser.browserType) ? JSON.stringify({id: "", name: ""}) : "",
          assignValueChange: "0"
        }
        if(record.assignType !== value) {
          // 其下级的值也要清空
          allDatas && allDatas.forEach((v, index) => {
            let vKeys = v.paramKey ? v.paramKey.split('.') || [] : [];
            if(vKeys.length > recordKeys.length && (vKeys.slice(0, recordKeys.length).join('.') === record.paramKey)) {
              allDatas[index] = {
                ...allDatas[index],
                assignType: "",
                assignValue: JSON.stringify({id: "", name: ""})
              }
            }
          })
        }
        // if(currentData.arrs) {
        //   if(childNode) {
        //     this.setState({key: new Date().getTime()})
        //   }
        // }else {
        //   this.setState({key: new Date().getTime()})
        // }
      }else if(key === "assignValue") {
        if(isBrowser && isBrowser.browserType) {
          if(value[2]) {
            currentData = {
              ...currentData,
              assignValue: JSON.stringify({id: value[0], name: value[1]}),
              assignValueChange: "0"
            }
          }
        }else {
          currentData = {
            ...currentData,
            assignValue: value || ""
          }
        }
      }
      allDatas && allDatas.map((v, index) => {
        if(v.paramKey === record.paramKey) {
          allDatas[index] = {
            ...currentData
          }
        }
      })
    }
    if(flag === "mainForm") {
      workflowFlowStore.setState({esbActionTableDatas: allDatas});
    }else if(flag === "detail") {
      let detailForm = {...detailFormInfo};
      detailForm[tabSelectedKey].paramDatas = allDatas;
      workflowFlowStore.detailFormInfo = detailForm;
    }else if(flag === "request") {
      workflowFlowStore.setState({esbRequestDatas: allDatas});
    }
    return allDatas;
  }

  // 获取表单字段浏览框的参数
  getDBFieldNameParams = (flag, name, browserType) => {
    const {
      workflowFlowStore
    } = this.props, {
      newRegisterESBForm, 
      status
    } = workflowFlowStore, {
      from="",
      expandId="",
      tabSelectedKey,
    } = toJS(status);
    const formParams = newRegisterESBForm.getFormParams();
    if(flag === "mainForm") {
      if(["1", "2"].includes(from)) {
        return {
          [`${["expandId", "modeid"][Number(from)-1]}`]: expandId,
          comeFrom: "esbField",
        }
      }else {
        return {
          isDetail: 0,
          formId: formParams.formid,
          isBill: formParams.isbill
        };
      }
    } else {
      if(["1", "2"].includes(from)) {
        return {
          [`${["expandId", "modeid"][Number(from)-1]}`]: expandId,
          comeFrom: "esbField",
          detailTable: "requestDatas" === name ? browserType : tabSelectedKey,
        }
      }else {
        return {
          isDetail: 1,
          formId: formParams.formid,
          isBill: formParams.isbill,
          tableIndex: "requestDatas" === name ? browserType : tabSelectedKey
        };
      }
    }
  }

  renderColumns = (columns, flag, superParamKey) => {
    const {workflowFlowStore} = this.props;
    const {newRegisterESBForm} = workflowFlowStore;
    const formParams = newRegisterESBForm.getFormParams();

    if(["mainForm", "detail"].includes(flag)) {
      columns && columns.forEach((column, idx) => {
        if(["esbFieldName", "dbFieldName"].includes(column.dataIndex)) {
          let fields = {...column.com[0].browserConditionParam, inputStyle: {width: 115}};
          columns[idx].com = [{
            type: 'CUSTOM',
            key: column.dataIndex,
            render: (text, record, index, onEdit) => {
              if("dbFieldName" === column.dataIndex) {
                const dataParams = this.getDBFieldNameParams(flag);

                return <span>
                  <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@d4a30z@integrationWorkflowRegisterESBColumns${column.dataIndex}`}
                    {...fields}
                    replaceDatas={
                      record.dbFieldNameSpan 
                        ? [{id: JSON.parse(record.dbFieldNameSpan).id, name: JSON.parse(record.dbFieldNameSpan).name}]
                        : [{id: '', name: ''}]
                    }
                    completeParams={dataParams}
                    dataParams={dataParams}
                    conditionDataParams={dataParams}
                    onChange={(...value) => {
                      if(value) {
                        onEdit({
                          type: "CUSTOM",
                          record: record,
                          index,
                          key: "dbFieldName",
                          value: value
                        }); 
                      }
                    }}
                  />
                  <i 
                    style={{marginTop: -20, marginLeft: 10, color: "red", float: "right"}} 
                    title={`${record.dbFieldNameChange == 1 ? getLabel('510374','已被删除') : ""}`} 
                    className={`${record.dbFieldNameChange == 1 ? "icon-coms-form-delete" : ""}`} 
                  />
                </span>
              }else if ("esbFieldName" === column.dataIndex) {
                // let supers = encodeURIComponent(JSON.stringify([{paramKey: superParamKey}]));
                let supers = JSON.stringify([{ paramKey: superParamKey }]);
                let eventId = encodeURIComponent(formParams.esbid);
                return <span>
                  <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@bmrigp@integrationWorkflowRegisterESBColumns${column.dataIndex}`}
                    {...fields}
                    replaceDatas={
                      record.esbFieldNameSpan 
                        ? [{id: JSON.parse(record.esbFieldNameSpan).id, name: JSON.parse(record.esbFieldNameSpan).name}]
                        : [{id: '', name: ''}]
                    }
                    dataURL='/api/integration/esbaction/returnsContextData'
                    dataParams={
                      flag === "detail" ?
                        { currentArray: '0', eventId, supers, time: new Date().getTime() }
                        :
                        { currentArray: '0', eventId, time: new Date().getTime() }
                    }
                    needSelect={true}
                    contextType="1"
                    onChange={(...value) => {
                      if(value) {
                        onEdit({
                          type: "CUSTOM",
                          record: record,
                          index,
                          key: "esbFieldName",
                          value: value
                        }); 
                      }
                    }}
                  />
                  <i 
                    style={{marginTop: -20, marginLeft: 10, color: "red", float: "right"}} 
                    title={`${record.esbFieldNameChange == 1 ? getLabel('510374','已被删除') : ""}`} 
                    className={`${record.esbFieldNameChange == 1 ? "icon-coms-form-delete" : ""}`} 
                  />
                </span>
              }
            }
          }]
        }
      })
    }else if(flag === "request") {
      columns && columns.forEach(column => {
        if(["arrs", "required"].includes(column.dataIndex)) {
          column.com = [{
            ...column.com[0],
            type: 'CUSTOM',
            key: column.dataIndex,
            render: (text, record, index, onEdit) => {
              return record[column.dataIndex] ? getLabel('163','是') : getLabel('30587','否');
            }
          }]
        }else if(column.dataIndex === "paramName") {
          column.com = [{
            ...column.com[0],
            type: 'CUSTOM',
            key: "paramName",
            render: (text, record, index, onEdit) => {
              return <span>
                {record.paramName}
                <i 
                  style={{marginLeft: 10, color: "red"}} 
                  title={`${record.operation == 2 ? getLabel('510373','保存后该条数据将被删除') : record.operation == 1 ? getLabel('1421','新增') : ""}`} 
                  className={`${record.operation == 2 ? "icon-coms-form-delete" : record.operation == 1 ? "icon-coms-Add-to" : ""}`} 
                />
              </span>
            }
          }]
        }
      })
    }
    return columns;
  }

  getRequestCells = (datas=[]) => {
    const {
      workflowFlowStore
    } = this.props, {
      status,
    } = workflowFlowStore, {
      selectType, 
      detailFormTabDatas, 
      tabs,
      from
    } = toJS(status);
    let cells = [];
    selectType.unshift({key: "", showname: ""});
    detailFormTabDatas.unshift({key: "", showname: ""});
    datas && datas.length && datas.forEach(v => {
      let options = [];
      if(v.arrs) {
        options = detailFormTabDatas ? detailFormTabDatas.slice(0) : [];
      }else {
        options = selectType ? selectType.slice(0) : [];
        let paramKeys = v.paramKey.split('.');
        let idx = datas && datas.findIndex(data => {
          let dataParamKeys = data.paramKey.split('.');
          return (dataParamKeys.length > paramKeys.length) && (dataParamKeys.slice(0, paramKeys.length).join('.') === v.paramKey)
        });
        if(idx === -1) {
          let rs = v.paramKey.split('.');
          datas && datas.forEach(data => {
            let vs = data.paramKey.split('.');
            if((vs.length < rs.length)  && (rs.slice(0, vs.length).join('.') === data.paramKey) && data.arrs) {
              if(data.assignType) {
                detailFormTabDatas && detailFormTabDatas.forEach(detail => {
                  if((detail.key === data.assignType) && options && (options.findIndex(v => v.key === data.assignType) === -1)) {
                    options.push({
                      showname: detail.showname,
                      key: detail.key,
                      browserType: detail.browserType
                    })
                  }
                })
              }
            }
          })
        }else {
          options = [];
        }
      }
      if(options.length) {
        cells.push({
          paramKey: v.paramKey,
          assign: {
            com: [
              {
                type: 'CUSTOM',
                key: 'assign',
                render: (text, record, index, onEdit) => {
                  let item = options.find(v => v.key === record.assignType);
                  let browserType = item ? item.browserType : '', helpfulInfo={};
                  if(!browserType) {
                    if("1" === from && "3" === record.assignType) {
                      helpfulInfo = {helpfulTip: getLabel(12345, "仅在批量导入的接口动作中有效支持导入链接中拼接的特殊参数支持获取导入方式(importtype)")};
                    }
                  }
                  if(record.arrs) {
                    return <div>
                      <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@131yp7@integrationWorkflowRegisterESBCells${record.paramKey}`} 
                        options={options}
                        style={{width: 100, marginRight: 10}}
                        value={record.assignType || ''}
                        onChange={value => {
                          onEdit({
                            type: "CUSTOM",
                            record: record,
                            index,
                            key: "assignType",
                            value: value
                          })
                        }}
                      />
                      {
                        from
                        ?   <IconSet ecId={`${this && this.props && this.props.ecId || ''}_IconSet@hfl30j@integrationWorkflowRegisterESBCells${record.paramKey}`} 
                              title={getLabel('512734','自动映射')} 
                              className="icon-coms-form-copy" 
                              onClick={() => this.getAutoMappingDatas('0', record.assignType, record)}
                            />
                          : null
                      }
                    
                    </div> 
                  }
                  return <nobr>
                    <div className='wea-esb-setting-assign'>
                      <WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@eqzr64@integrationWorkflowRegisterESBCells${record.paramKey}`}
                        options={options}
                        style={{ width: 100, float: 'left' }}
                        value={record.assignType || ''}
                        onChange={value => {
                          onEdit({
                            type: "CUSTOM",
                            record: record,
                            index,
                            key: "assignType",
                            value: value
                          })
                        }}
                      />{record.assignType && item && <div style={{ width: 110, marginLeft: 10, float: 'left' }}><nobr>
                        {
                          (!browserType)
                            ? <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@hudga9`}
                              key={record.assignType}
                              {...helpfulInfo}
                              viewAttr={3}
                              style={{ width: helpfulInfo.helpfulTip ? 90 : 100 }}
                              value={record.assignValue}
                              onChange={(value) => {
                                onEdit({
                                  type: "CUSTOM",
                                  record: record,
                                  index,
                                  key: "assignValue",
                                  value: value
                                })
                              }}
                            />
                            : <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@yfycan`}
                              key={record.assignType}
                              textDecoration={true}
                              viewAttr={3}
                              icon="icon-coms-workflow"
                              iconBgcolor="#0079DE"
                              inputStyle={{ width: 100 }}
                              title={getLabel('18214', '请选择')}
                              replaceDatas={record.assignValue ? [{ id: JSON.parse(record.assignValue).id, name: JSON.parse(record.assignValue).name }] : [{ id: '', name: '' }]}
                              type={browserType}
                              dataParams={{
                                ...(item && item.dataParam ? item.dataParam : {}),
                                ...(record.assignType == '1'
                                  ? this.getDBFieldNameParams("mainForm")
                                  : tabs.includes(record.assignType)
                                    ? this.getDBFieldNameParams("detail", "requestDatas", item.key)
                                    : {})
                              }}
                              completeParams={
                                record.assignType == '1'
                                  ? this.getDBFieldNameParams("mainForm")
                                  : tabs.includes(record.assignType)
                                    ? this.getDBFieldNameParams("detail", "requestDatas", item.key)
                                    : {}
                              }
                              conditionDataParams={
                                record.assignType == '1'
                                  ? this.getDBFieldNameParams("mainForm")
                                  : tabs.includes(record.assignType)
                                    ? this.getDBFieldNameParams("detail", "requestDatas", item.key)
                                    : {}
                              }
                              onChange={(...value) => {
                                onEdit({
                                  type: "CUSTOM",
                                  record: record,
                                  index,
                                  key: "assignValue",
                                  value: value
                                })
                              }}
                            />
                        }</nobr></div>}
                      <i
                        style={{ marginTop: 8, marginLeft: 10, color: "red", float: 'right' }}
                        title={`${record.assignValueChange == 1 ? getLabel('510374', '已被删除') : ""}`}
                        className={`${record.assignValueChange == 1 ? "icon-coms-form-delete" : ""}`}
                      />
                    </div>
                  </nobr>
                }
              }
            ]
          }
        })
      }else {
        cells.push({
          paramKey: v.paramKey,
          assign: {
            com: [
              {
                type: 'CUSTOM',
                key: 'assign',
                render: (text, record, index, onEdit) => {
                  return <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@ch8d1q@integrationWorkflowRegisterESBCells${record.paramKey || record.id}`} viewAttr={1} />
                }
              }
            ]
          }
        })
      }
    });
    return cells;
  }

  onTabEdit = (tabKey, type, v) => {
    const {
      workflowFlowStore
    } = this.props, {
      status,
      getMainFields,
    } = workflowFlowStore, {
      from="",
      tabs=[],
      funTabs=[],
      mainTable=[],
      tableTabDatas=[],
    } = toJS(status);
    let datas = [], 
      mainTabKey = (mainTable && mainTable.length) ? (mainTable[0].key || "") : "",
      funTabKey = (funTabs && funTabs.length) ? (funTabs[0].key || "") : "";

    if (type === 'remove') {
      let index = tableTabDatas.findIndex(item => item.key === tabKey);
      if(index != -1) {
        let key = "";
        datas = tableTabDatas.slice(0);
        datas.splice(index, 1);
        if(datas.length) {
          if(datas.length > index) {
            key = datas[index].key;
          } else if(datas.length === index) {
            key = datas[index-1].key;
          }
        }
        // 删除的时候去除table的ref指向
        if(mainTabKey === tabKey) {
          this.mainTableEdit = null;
        } else if(funTabKey === tabKey) {
          workflowFlowStore.funForm = null;
        } else if(tabs.includes(tabKey)) {
          this[`detail_${tabKey}`] = null;
        }
        workflowFlowStore.setState({tabSelectedKey: key});
      }
    }else if (type === 'add') {
      datas = tableTabDatas.concat([{
        key: v.key,
        title: v.showname,
        mainTitle: v.showname,
        editable: true,
      }])
      if (v.key === mainTabKey) {
        getMainFields({from});
      } else if(tabs.includes(v.key)) {
        workflowFlowStore.getESBDetailFields(v.key, from);
      } else if(funTabKey === v.key) {
        workflowFlowStore.getFunFields();
      }
      workflowFlowStore.setState({
        tabSelectedKey: v.key,
      })
    }
    workflowFlowStore.setState({tableTabDatas: datas});
  }

  /**
   * datas 是从接口获取的已设置的tabs（新建的时候datas为空，编辑的时候datas为已有的设置的tab的数据）
   */
  getTableTab = (datas=[]) => {
    const { 
      workflowFlowStore 
    } = this.props, {
      status,
      newRegisterESBForm
    } = workflowFlowStore, {
      detailFormTabDatas=[], 
      mainTable=[],
      funTabs=[],
      from="",
    } = toJS(status);
    if(!("2" === from && newRegisterESBForm.getFormParams().tableType == '1')) {
      let mainFormKey = (mainTable && mainTable[0]) ? mainTable[0].key : '0'; 
      let index = datas.findIndex(v => v.key == -1);
      index != -1 && datas.splice(index, 1);
      // 已添加的tabs中是明细的需要添加可编辑的属性
      datas && datas.forEach((v, index) => {
        datas[index] = {
          ...datas[index],
          mainTitle: v.title,
          editable: true,
        }
      });
      let dropMenuDatas = [], dropSelectDatas = [...detailFormTabDatas];
      // 若是from不为空，则下拉框内应该包含主表和明细表
      dropSelectDatas = mainTable.concat(dropSelectDatas, funTabs);
      for(let i = 0; i < dropSelectDatas.length; i++) {
        let detail = dropSelectDatas[i];
        // 下拉框可选择的数据范围不能包含已设置的数据（datas）
        let index = datas && datas.findIndex(v => v.key === detail.key);
        if(index == -1) {
          dropMenuDatas.push(detail);
        }
      }
      if(dropMenuDatas.length) {
        const menu = (
          <Menu ecId={`${this && this.props && this.props.ecId || ''}_Menu@niyays`}>
            {dropMenuDatas.map((v, index) => {
              return <Menu.Item ecId={`${this && this.props && this.props.ecId || ''}_MenuItem@hmp1u8@integrationWorkflowRegisterESBtabDatas${v.key}`} key={index}>
                <label onClick={() => this.onTabEdit('', 'add', v)}>{v.showname}</label>
              </Menu.Item>
            })}
          </Menu>
        );
        datas.push({
          title: (
            <Dropdown ecId={`${this && this.props && this.props.ecId || ''}_Dropdown@evfgj8@integrationWorkflowRegisterESBtabDatas`} overlay={menu}>
              <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@6srpxp@integrationWorkflowRegisterESBtabDatasAdd`} 
                className="ant-dropdown-link" 
                style={{
                  color: "rgb(153, 153, 153)", 
                  borderStyle: "dashed", 
                  padding: '6px 13px'
                }}
                onMouseOver={e => e.target.title = ""}
              >
                <i className="icon-coms-plus" />
              </Button>
            </Dropdown>
          ),
          key: '-1'
        })
      }
    }
    return datas;
  }

  getTabRightButton = () => {
    const { 
      workflowFlowStore 
    } = this.props, {
      status, 
      newRegisterESBForm,
    } = workflowFlowStore, {
      tabSelectedKey, 
      selectedRowKeys, 
      mainTable=[],
      from,
    } = toJS(status);
    const formParams = newRegisterESBForm.getFormParams();
    if(tabSelectedKey && mainTable && mainTable[0] && ((tabSelectedKey == mainTable[0].key) || (from === "2" && "0" != formParams.tableType))) {
      return [
        <WeaButtonIcon ecId={`${this && this.props && this.props.ecId || ''}_WeaButtonIcon@nzhijv@integrationWorkflowRegisterESBButtonadd`} 
          buttonType="add" 
          type="primary" 
          disabled={formParams.formid == ''} 
          onClick={() => {
            if(from == "2" && "0" != formParams.tableType && (tabSelectedKey != mainTable[0].key)) {
              if(this[`detail_${tabSelectedKey}`]) {
                this[`detail_${tabSelectedKey}`].doAdd();
              }
            }else {
              if(this.mainTableEdit) {
                this.mainTableEdit.doAdd();
              }
            }
          }} 
        />,
        <WeaButtonIcon ecId={`${this && this.props && this.props.ecId || ''}_WeaButtonIcon@wkaxg9@integrationWorkflowRegisterESBButtondel`} 
          buttonType="del" 
          type="primary" 
          disabled={selectedRowKeys.length === 0} 
          onClick={() => this.deleteData(tabSelectedKey == mainTable[0].key)} 
        />
      ];
    }
    return [];
  }

  getMainRef = el => {
    if(el) {
      this.mainTableEdit = el;
    }
  }

  getMainRowSelection = selectedRowKeys => this.props.workflowFlowStore.setState({ selectedRowKeys });

  willAddMainTable = (allDatas, addData) => this.willAdd(allDatas, addData, "mainForm");

  willEditMainTable = (allDatas, editData) => this.willEdit(allDatas, editData, 'mainForm');

  onChangeMainTableDatas = datas => this.props.workflowFlowStore.setState({esbActionTableDatas: datas});

  getTableContent = () => {
    const { 
      workflowFlowStore 
    } = this.props, {
      status, 
      detailFormInfo,
      getMainValidator,
      getTableEditable,
      newRegisterESBForm, 
      funForm,
    } = workflowFlowStore, {
      esbActionTableSet, 
      esbActionTableDatas, 
      tableTabDatas, 
      esbDetailFormFlag, 
      tabs=[], 
      from="",
      operateSrc, 
      tabSelectedKey="0", 
      selectedRowKeys, 
      mainTable=[], 
      esbLoading,
      funFormCondition=[],
    } = toJS(status);
    const formParams = newRegisterESBForm.getFormParams(), mainKey = mainTable.length ? mainTable[0].key : "0";
    return (<div style={{marginLeft: -30, marginRight: -10}}>
      <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@ikka0h`} 
        ref="tab"
        datas={(("" === from && formParams.formid) || from) ? this.getTableTab(tableTabDatas) : []}
        keyParam="key"
        leftStyle={{paddingRight: 100}}
        type='editable-inline'
        selectedKey={tabSelectedKey}
        buttons={this.getTabRightButton()}
        onChange={v => {
          if(v != '-1') {
            workflowFlowStore.setState({tabSelectedKey: v});
            if("2" === from && "0" != formParams.tableType) {
              workflowFlowStore.setState({ selectedRowKeys: [] })
            }
          }
        }}
        onEdit={this.onTabEdit}
      />
      <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@yubrfj`} spinning={esbLoading}>
        {
          tabSelectedKey
            ? (tabSelectedKey === mainKey)
              ? <WeaTableEditable 
                  ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEditable@655grb`} 
                  {...this.state.mainTableInfo}
                  ref={this.getMainRef}
                  columns={this.renderColumns(esbActionTableSet, 'mainForm')}
                  datas={esbActionTableDatas}
                  cells={getTableEditable(esbActionTableDatas, "mainForm")}
                  validator={getMainValidator("mainForm")}
                  selectedRowKeys={selectedRowKeys}
                  onRowSelect={this.getMainRowSelection}
                  willAdd={this.willAddMainTable}
                  willEdit={this.willEditMainTable}
                  onChange={this.onChangeMainTableDatas}
                />
              : tabs.includes(tabSelectedKey)
                ? detailFormInfo && detailFormInfo[tabSelectedKey] 
                    ? <div>
                        {
                          ((("2" === from && formParams.tableType == '0') || from != "2") && (operateSrc ? true : esbDetailFormFlag)) 
                            ? this.getDetailSearchs(detailFormInfo[tabSelectedKey].form, toJS(detailFormInfo)[tabSelectedKey].condition, toJS(detailFormInfo)[tabSelectedKey].superParamKey)
                            : null
                        }
                        <WeaTableEditable ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEditable@dcxmgg`} 
                          {...this.state.detailTableInfo}
                          showTitle={true}
                          showAdd={true}
                          showDelete={true}
                          showTitle={("2" === from && "0" != formParams.tableType) ? false : true}
                          showAdd={("2" === from && "0" != formParams.tableType) ? false : true}
                          showDelete={("2" === from && "0" != formParams.tableType) ? false : true}
                          title={("2" === from && "0" != formParams.tableType) ? "" : (tableTabDatas && tableTabDatas.find(v => v.key === tabSelectedKey)) ? `${tableTabDatas.find(v => v.key === tabSelectedKey).title}${getLabel('21845','赋值设置')}` : getLabel('21845','赋值设置')}
                          ref={el => {
                            if(el) {
                              this[`detail_${tabSelectedKey}`] = el;
                            }
                          }}
                          columns={this.renderColumns(toJS(detailFormInfo[tabSelectedKey].paramConfig) || [], "detail", toJS(detailFormInfo)[tabSelectedKey].superParamKey)}
                          datas={toJS(detailFormInfo)[tabSelectedKey].paramDatas || []}
                          cells={getTableEditable(toJS(detailFormInfo)[tabSelectedKey].paramDatas, "detail")}
                          validator={getMainValidator("detail", tabSelectedKey)}
                          onRowSelect={selectedRowKeys => {
                            if("2" === from && "2" != formParams.del) {
                              workflowFlowStore.setState({ selectedRowKeys })
                            }
                          }}
                          willAdd={(allDatas, addData) => this.willAdd(allDatas, addData, "detail")}
                          willEdit={(allDatas, editData) => this.willEdit(allDatas, editData, "detail")}
                          willDelete={(allDatas, key) => this.willDelete(allDatas, key, "detail")}
                          onChange={(allDatas) => {
                            let datas = {...detailFormInfo};
                            datas[tabSelectedKey].paramDatas = allDatas;
                            workflowFlowStore.detailFormInfo = datas;
                          }}
                        />
                      </div>
                    : null
                : <div>
                    {
                      funForm 
                        ? getForm(funForm, funFormCondition, false, null, null, null, this && this.props && this.props.ecId || '', `workflowRegisterEsb${from}`)
                        : null
                    }
                  </div>
            : null
        }
      </Spin>
    </div>)
  }

  getSearchs = () => {
    const { 
      workflowFlowStore, 
      saveCallBack,
      showCollapse=true
    } = this.props, {
      status, 
      newRegisterESBForm, 
      getESBRequestDatas, 
      getSelectData
    } = workflowFlowStore, {
      esbRegisterFormCondition, 
      esbRequestParams, 
      esbRequestDatas,
      tableTabDatas,
      from,
      expandId,
      operateSrc
    } = toJS(status);
    const { isFormInit } = newRegisterESBForm;
    const formParams = newRegisterESBForm.getFormParams();
    let group = [];
    const { esbIdShowError, actionFieldShowError} = this.state;

    isFormInit && esbRegisterFormCondition && esbRegisterFormCondition.forEach((c, index) => {
      let items = [];
      if("requestSet" == c.key) {
        group.push(<div style={{marginLeft: 25, marginRight: 25}}>
          {
            ((formParams.formid && ("" == from)) || (["1", "2"].includes(from) && formParams.esbid))
              ? <WeaTableEditable 
                  ecId={`${this && this.props && this.props.ecId || ''}_WeaTableEditable@uzhd5d@integrationWorkflowRegisterESBForm${c.key}`} 
                  rowKey={"paramKey"}
                  className={'wea-esb-setting-edit-table'}
                  title={from ? [
                    <div style={{
                      display: "inline-block",
                      width: 100,
                      whiteSpace: "nowrap",
                      overflow: "hidden",
                      textOverflow: "ellipsis",
                    }}>{c.title}</div>, 
                    <div style={{
                      display: "inline-block",
                      width: "calc(100% - 125px)",
                      textAlign: "right",
                    }}>
                      <IconSet ecId={`${this && this.props && this.props.ecId || ''}_IconSet@e7t8we@integrationWorkflowRegisterESBForm${c.key}`} 
                        title={getLabel('512734','自动映射')} 
                        className="icon-coms-form-copy" 
                        onClick={() => this.getAutoMappingDatas("1")}
                      />
                    </div>
                  ] : c.title}
                  columns={this.renderColumns(esbRequestParams, "request")}
                  datas={esbRequestDatas || []}
                cells={((formParams.formid && (from === '')) || (["1", "2"].includes(from) && formParams.esbid)) ? this.getRequestCells(esbRequestDatas) : []}
                  showAdd={false}
                  showDelete={false}
                  showCopy={false}
                  showCollapse={true}
                  getRowSelection={(v) => {return false}}
                  willEdit={(allDatas, editData) => this.willEdit(allDatas, editData, "request")}
                  onChange={allDatas => {workflowFlowStore.setState({esbRequestDatas: allDatas})}}
                />
              : null
          }
        </div>);
      }else if("tableSet" == c.key) {
        if(from === "1" || formParams.formid || ("2" === from && formParams.tableType)) {
          items.push({
            com: this.getTableContent(),
            colSpan: 1
          })
          group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@hzbyf4@integrationWorkflowRegisterESBForm${c.key}`} col={1} needTigger={true} center={false} title={c.title} showGroup={c.defaultshow} items={items} />);
        }
      }else {
        c && c.items && c.items.forEach(fields => {
          let key = fields.domkey[0];
          if("actionField" === key && "browser" === fields.conditionType.toLocaleLowerCase() && fields.browserConditionParam) {
            const dataParams = {
              ...fields.browserConditionParam.dataParams,
              modeid: expandId,
              comeFrom: "esbField",
              isAll: "1"
            };
            fields.browserConditionParam.dataParams = dataParams;
          	fields.browserConditionParam.completeParams = dataParams;
            fields.browserConditionParam.conditionDataParams = dataParams;
          }
          if(!fields.hide) {
            items.push({
              com:(<div className="esbFormFields">
              <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@qn2xdw@integrationWorkflowRegisterESBForm${c.key}${key}`}
                label={`${fields.label}`}
                labelCol={{span: `${fields.labelcol}`}}
                wrapperCol={{span: `${fields.fieldcol}`}}
                error={newRegisterESBForm.getError(fields)}
                tipPosition="bottom"
              >
                <nobr>
                  <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@8a8ixt@integrationWorkflowRegisterESBForm${c.key}${key}`} fieldConfig={fields} form={newRegisterESBForm} formParams={formParams} onChange = {(v) => {
                    if(key === "actionname") {
                      if(!from) {
                        let checkParams = {
                          tableName: 'esb_actionset',
                          fieldName: 'actionname',
                          fieldValue: newRegisterESBForm.getFormParams().actionname.replace(/^(\s*)|(\s*)$/g, '')
                        };
                        checkTableFieldValueUnique(checkParams).then(result => {
                          if(result&&result.isNotUnique) {
                            newRegisterESBForm.showError('actionname',getLabel('129943','名称已存在'));
                          }
                        })
                      }
                    }else if(key === "esbid") {
                      this.setState({esbIdShowError: true});
                      let initTabDatas = [], tabSelectedKey = "";
                      if(from === "2" && "1" === newRegisterESBForm.getFormParams().tableType) {
                        initTabDatas = [...tableTabDatas];
                        tabSelectedKey = (tableTabDatas && tableTabDatas.length) ? tableTabDatas[0].key : "";
                      }
                      if(newRegisterESBForm.getFormParams().esbid) {
                        getESBRequestDatas({eventId: newRegisterESBForm.getFormParams().esbid, from}, () => {
                          workflowFlowStore.setState({
                            esbActionTableDatas: [],
                            tableTabDatas: initTabDatas,
                            tabSelectedKey
                          });
                          workflowFlowStore.detailFormInfo = {};
                          if(saveCallBack && (!from)) {
                            getSelectData({formId: newRegisterESBForm.getFormParams().formid});
                          }
                          if(from === "2" && "0" != newRegisterESBForm.getFormParams().detailIndex) {
                            workflowFlowStore.getESBDetailFields(tabSelectedKey, from);
                          }
                        });
                      }else {
                        if(from === "2" && "1" === newRegisterESBForm.getFormParams().tableType) {
                          if(workflowFlowStore.detailFormInfo) {
                            let detailDatas = {...workflowFlowStore.detailFormInfo};
                            detailDatas[tabSelectedKey].paramDatas = [];
                            workflowFlowStore.detailFormInfo = detailDatas;
                          }
                        }else {
                          workflowFlowStore.detailFormInfo = {};
                        }
                        workflowFlowStore.setState({
                          esbActionTableDatas: [],
                          esbRequestDatas: [],
                          tableTabDatas: initTabDatas,
                          tabSelectedKey
                        });
                      }
                    }else if(key === "formid" && (!from)) {
                      if(newRegisterESBForm.getFormParams().formid) {
                        getSelectData({formId: newRegisterESBForm.getFormParams().formid}, () => {
                          if(formParams.formid != newRegisterESBForm.getFormParams().formid) {
                            let datas = [];
                            esbRequestDatas && esbRequestDatas.forEach(v => datas.push({...v, assignType: "", assignValue: ""}));
                            workflowFlowStore.setState({esbActionTableDatas: [], esbRequestDatas: datas});
                            workflowFlowStore.detailFormInfo = {};
                          }
                        });
                        newRegisterESBForm.updateFields({isbill: v.formid.valueObj[0].isbill});
                      }else {
                        newRegisterESBForm.updateFields({isbill: ''});
                        workflowFlowStore.setState({esbActionTableDatas: []});
                        workflowFlowStore.detailFormInfo = {};
                      }
                    }else if("2" === from && "actionField" === key) {
                      this.setState({ actionFieldShowError: true })
                      if(v.actionField) {
                        if(v.actionField.valueObj && v.actionField.valueObj[0]) {
                          if(v.actionField.valueObj[0].detailindex != newRegisterESBForm.getFormParams().detailIndex) {
                            getSelectData({
                              actionId: operateSrc, 
                              modeId: expandId, 
                              from, 
                              tableType: v.actionField.valueObj[0].isdetail || "", 
                              tableName: v.actionField.valueObj[0].tablename || "",
                              detailIndex: v.actionField.valueObj[0].detailindex || ""
                            }, () => {
                              let datas = esbRequestDatas && esbRequestDatas.map(v => {
                                return {...v, assignType: "", assignValue: ""};
                              });
                              workflowFlowStore.setState({
                                esbActionTableDatas: [],
                                esbRequestDatas: datas || [],
                              });
                              workflowFlowStore.detailFormInfo = {};
                              if(v.actionField.valueObj[0].detailindex != "0") {
                                workflowFlowStore.getESBDetailFields(v.actionField.valueObj[0].tablename, from);
                              }else {
                                workflowFlowStore.setState({
                                  tableTabDatas: [],
                                  tabSelectedKey: "",
                                });
                              }
                            });
                          }
                          newRegisterESBForm.updateFields({
                            tableType: v.actionField.valueObj[0].isdetail || "",
                            tableName: v.actionField.valueObj[0].tablename || "",
                            detailIndex: v.actionField.valueObj[0].detailindex || "",
                          });
                          if(v.actionField.valueObj[0].isdetail == '1') {
                            newRegisterESBForm.updateFields({
                              del: "0"
                            });
                          }
                        }else {
                          newRegisterESBForm.updateFields({
                            tableType: "",
                            tableName: "",
                            detailIndex: "",
                            del: "0",
                          });
                        }
                      }
                    }
                  }}/>
                  {
                    key === "esbid" && (!esbIdShowError)
                      ? <i 
                          style={{color: "red", marginLeft: 15, position: "relative", top: -5}} 
                          title={`${fields.eventStatus == "0" ? getLabel('510374','已被删除') : ""}`} 
                          className={`${fields.eventStatus == "0" ? "icon-coms-form-delete" : ""}`} 
                        />
                      : ""
                  }
                  {
                      key === "actionField" && (!actionFieldShowError) 
                      ? <i
                        style={{ color: "red", marginLeft: 15, position: "relative", top: -5 }}
                          title={`${fields.isChange === '1' ? getLabel('510374', '已被删除') : ""}`}
                          className={`${fields.isChange === '1' ? "icon-coms-form-delete" : ""}`}
                      />
                      : ""
                  }
                </nobr>
              </WeaFormItem>
            </div>),
              colSpan:1,
              hide: newRegisterESBForm.isHide(fields, (keys, allParams) => {
                let bool = false;
                fields && fields.showWhere && fields.showWhere.length > 0 && fields.showWhere.forEach(w => {
                  if(!bool){
                    let show = false;
                    for(let val of w.value){
                        if(allParams[w.domkey] == val){
                            show = true;
                            break;
                        }
                    }
                    bool = !show;
                  }
                })
                return bool;
              })
            })
          }
        }) 
        group.push(
          <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@jgrmx2@integrationWorkflowRegisterESBFormBaseInfo`} 
            col={1}
            needTigger={index === 0 ? showCollapse : true}
            center={showCollapse}
            title={index === 0 ? (showCollapse ? c.title : "") : c.title}
            showGroup={c.defaultshow}
            items={items} 
          />
        );
      }
    })
    return group;
  }

  getDetailSearchs = (form, condition, superParamKey) => {
    const { workflowFlowStore, showCollapse = true } = this.props;
    const { newRegisterESBForm, status, detailFormInfo } = workflowFlowStore;
    const { tabSelectedKey, from } = toJS(status);
    const { isFormInit } = form;
    const formParams = form.getFormParams();
    const esbFormParams = newRegisterESBForm.getFormParams();
    let group = [], hideFieldsKeys=["isbill"];
    
    if(from == "2" && esbFormParams.del != '2') {
      hideFieldsKeys = hideFieldsKeys.concat(["dbFieldName", "esbFieldName", "addNewRow"]);
    }

    isFormInit && condition && condition.map((c, index) => {
      let items = [];  
      c && c.items && c.items.map(fields => {
        let key = fields.domkey[0];
        if(key === "dbFieldName") {
          let params = {};
          if(["1", "2"].includes(from)) {
            params = {
              ...fields.browserConditionParam.dataParams,
              ...this.getDBFieldNameParams("detail")
            };
          }else {
            params = {
              ...fields.browserConditionParam.dataParams,
              isDetail: 1,
              formId: esbFormParams.formid,
              isBill: esbFormParams.isbill,
              tableIndex: tabSelectedKey
            };
          }
          fields.browserConditionParam.dataParams = params;
          fields.browserConditionParam.completeParams = params;
          fields.browserConditionParam.conditionDataParams = params;
        }else if(key === "esbDetailField") {
          let eventId = encodeURIComponent(esbFormParams.esbid);
          fields.browserConditionParam.dataURL = `/api/integration/esbaction/returnsContextData`;
          fields.browserConditionParam.dataParams = { currentArray: '1', eventId, time: new Date().getTime() };
        }else if(key === "esbFieldName") {
          let supers = JSON.stringify([{paramKey: superParamKey}]);
          let eventId = encodeURIComponent(esbFormParams.esbid);
          fields.browserConditionParam.dataURL = `/api/integration/esbaction/returnsContextData`;
          fields.browserConditionParam.dataParams = { currentArray: '0', eventId, supers, time: new Date().getTime() };
        }
        if(!fields.hide) {
          if(!hideFieldsKeys.includes(key)) {
            items.push({
              com:(<div className="esbFormFields"><WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@knp20u@integrationWorkflowRegisterESBDetailForm${key}`}
                label={`${fields.label}`}
                labelCol={{span: `${fields.labelcol}`}}
                wrapperCol={{span: `${fields.fieldcol}`}}
                error={form.getError(fields)}
                tipPosition="bottom"
              >
                <nobr>
                <WeaSwitch ecId={`${this && this.props && this.props.ecId || ''}_WeaSwitch@xejkmf@integrationWorkflowRegisterESBDetailForm${key}`} fieldConfig={fields} form={form} formParams={formParams} onChange = {(v) => {
                  if(key === "esbDetailField") {
                    let datas = {...detailFormInfo};
                    datas[tabSelectedKey].esbDetailFieldChange = "0";
                    if(v.esbDetailField.valueObj && v.esbDetailField.valueObj.length) {
                      datas[tabSelectedKey].superParamKey = v.esbDetailField.valueObj[0].id || "";
                    }
                    this.props.workflowFlowStore.detailFormInfo = datas;
                  }else if(key === "dbFieldName") {
                    let datas = {...detailFormInfo};
                    datas[tabSelectedKey].dbFieldNameChange = "0";
                    this.props.workflowFlowStore.detailFormInfo = datas;
                  }else if(key === "esbFieldName") {
                    let datas = {...detailFormInfo};
                    datas[tabSelectedKey].esbFieldNameChange = "0";
                    this.props.workflowFlowStore.detailFormInfo = datas;
                  }
                }}/>
                <i 
                  style={{color: "red", marginLeft: 35, position: "relative", top: -5}} 
                  title={`${
                    ((key === "dbFieldName" && detailFormInfo[tabSelectedKey].dbFieldNameChange == 1) 
                      || (key === "esbFieldName" && detailFormInfo[tabSelectedKey].esbFieldNameChange == 1) 
                      || (key === "esbDetailField" && detailFormInfo[tabSelectedKey].esbDetailFieldChange == 1))
                    ? getLabel('510374','已被删除') : ""}`} 
                  className={`${
                    ((key === "dbFieldName" && detailFormInfo[tabSelectedKey].dbFieldNameChange == 1) 
                      || (key === "esbFieldName" && detailFormInfo[tabSelectedKey].esbFieldNameChange == 1) 
                      || (key === "esbDetailField" && detailFormInfo[tabSelectedKey].esbDetailFieldChange == 1))
                    ? "icon-coms-form-delete" : ""}`} 
                />
                </nobr>
              </WeaFormItem></div>),
              colSpan:1
            })
          }  
        }
      }) 
      group.push(<WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@9oayx1@integrationWorkflowRegisterESBDetailForm${index}`} col={1} needTigger={false} center={showCollapse} title={""} showGroup={c.defaultshow} items={items} />);
    })
    return group;
  }

  render() {
    const { 
      workflowFlowStore,
      showDialog = true,
      showCollapse = true
    } = this.props, { 
      status, 
      newRegisterESBForm,
      autoMappingForm, 
    } = workflowFlowStore, {
      operateSrc, 
      esbLoading, 
      eventStatus, 
      esbidName, 
      formidName,
      autoMappingCondition=[],
      from="",
      expandId="",
      isTop="0",
      detailTableName="",
    } = toJS(status);

    return (<Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@849h50`} spinning={esbLoading}>
      {
        showCollapse !== false && operateSrc && (newRegisterESBForm.getFormParams().isChange == 1 || eventStatus == "3") 
          ? <div style={{marginLeft: 20, marginRight: 20}}>
              <Alert ecId={`${this && this.props && this.props.ecId || ''}_Alert@b0dc0i`} 
                message={`${getLabel('506686','ESB事件')}${esbidName ? '【' + esbidName + '】' : ""}${getLabel('510375','或表单')}【${formidName}】${getLabel('510376','发生变化')}，${getLabel('510377','请重新配置')}`}
                description={eventStatus == "0" ? `${getLabel('506686','ESB事件')}${esbidName ? '【' + esbidName + '】' : ""}${getLabel('510374','已被删除')}` : eventStatus == "3" ? `${getLabel('506686','ESB事件')}【${esbidName}】${getLabel('510379','处于维护状态')}` : ""}
                type={eventStatus == "0" ? "error" : "warning"}
                showIcon
                closable
              />
            </div>
          : null
      }
      {this.getSearchs()}
      <AutoMapping ecId={`${this && this.props && this.props.ecId || ''}_AutoMapping@0s2rtq`} 
        visible={this.state.visible}
        form={autoMappingForm}
        condition={autoMappingCondition}
        onSave={(params) => {
          workflowFlowStore.getAutoMapping({
            from,
            isMain: isTop == 1,
            detailTableName: isTop == 1 ? "" : detailTableName,
            [`${from === "2" ? "modeid" : "expandId"}`]: expandId
          }, (datas) => this.saveAutoMappingConfig(datas, params));
        }}
        onCancel={this.closeAutoMappingDialog}
      />
    </Spin>)
  }
}
