/* eslint-disable */
import React, { Component } from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Layout, Spin, Slider, Tabs, Row, Col, Card } from 'antd';
import baseChar from '@/components/Common/baseChar'; /* 获取图表配置及数据 */
import CommonListTabEvent from '@/components/Common/CommonListTabEvent';/* 继承销售模块业务功能 */
import * as commonFunc from '@/components/Common/commonFunc';/* 通用单据方法 */ /* 通用单据方法 */
import Toolbar from '@/components/Common/ToolBar/ToolBarNew';
import StaticEditTable from '@/components/Common/CommonTable';/* 可编辑表格 */
import styles from '@/index.less';
import oeeStyle from './oee.less';
import CommonBase from '@/components/Common/CommonBase';/* 获取配置及数据 */
import * as commonBusiness from '@/components/Common/commonBusiness';/* 单据业务功能 */
import SearchComponent from '@/components/Common/SearchComponent';/* 搜索组件 */
import * as commonConfig from '@/utils/config';
import * as commonUtils from '@/utils/utils';
import StaticEditTree from '@/components/Common/Tree/StaticTree';
import Eject from '@/assets/eject.svg';/* 弹出图标 */
import Close from '@/assets/close.svg';/* 关闭图标 */
import AntdDraggableModal from '@/components/Common/AntdDraggableModal';
import CommonListSelect from '@/components/Common/CommonListSelect';/* 选择界面 */
import Bar from '../../components/Charts/Bar';
import Columnar from '../../components/Charts/Columnar';
import ColumnarGroup from '../../components/Charts/ColumnarGroup';
import BrokenLine from '../../components/Charts/BrokenLine';
import WaterWave from '../../components/Charts/WaterWave';
import Gauge from '../../components/Charts/Gauge';
import ColumnarStack from '../../components/Charts/ColumnarStack';
import PieGroup from '../../components//Charts/PieGroup';
import Pie from '../../components/Charts/Pie';
import TimeLineGroup from '../../components/Charts/TimeLineGroup';
import ColorBlock from '../../components/Charts/ColorBlock';
import AffixOeeMenu from "./AffixOeeMenu";
import OeeSearchComponent from "./oeeSearchComponent";
/**
 * 此组件是N个列表，以Tab页签方式展示
 */
const { Header, Content } = Layout;
const { TabPane } = Tabs;
let NoTotalData = '';
class OeeCommonListTab extends Component {

  // componentDidUpdate() {
  //   const tempActiveKey = this.props.activeKey;
  //   if (!this.props[`activeKey${tempActiveKey}flag`]) {
  //     this.props.onSaveState({ [`activeKey${tempActiveKey}flag`]: true });
  //   }
  // }

  handleEject = () => {
    const { currentPane, panes } = this.props.app;
    if (commonUtils.isNotEmptyArr(panes) && commonUtils.isNotEmptyObject(currentPane)) {
      // const index = panes.indexOf(currentPane);
      const index = panes.findIndex(item => item.formId === currentPane.formId && item.key === currentPane.key && item.notCurrentPane === currentPane.notCurrentPane && item.route === currentPane.route && item.title === currentPane.title && item.sModelsType === currentPane.sModelsType && item.sProcName === currentPane.sProcName);
      /* 当前页签 */
      let currentTab = document.getElementById('navTabWrap').children[index];
      if (commonUtils.isEmpty(currentTab)) {
        const oChildren = document.getElementById('navTabWrap').getElementsByClassName('ant-tabs-content')[0].children;
        for (const child of oChildren) {
          if (child.nodeName === 'DIV' && index !== undefined && child.getAttribute('id') === `navTabWrap-panel-${panes[index].key}`) {
            currentTab = child;
          }
        }
      }
      if (!commonUtils.isEmpty(currentTab)) {
        const filterTreeArr = currentTab.getElementsByClassName('xly-filter-tree');/* 获取当前页签下的树组件 */
        if (commonUtils.isNotEmptyArr(filterTreeArr)) {
          const filterTree = filterTreeArr[0];
          if (filterTree.style.display === 'block') {
            filterTree.style.display = 'none';
          } else {
            filterTree.style.display = 'block';
          }
        }
      }
    }
  };
  /**   树节点选中   */
  handleTreeSelect = (name, checkedKeys, e) => {
    this.props.onSelect(name, checkedKeys, e); /* 调用CommonListEvent通用处理 */
  };

  handleCancelModal = (modelVisible) => {
    this.props.onSaveState({
      [modelVisible]: false,
    });
  }

  handleSelectModal = (modelVisible) => {
    this.props.onSaveState({
      [modelVisible]: false,
    });
  }
  onTabChange = async (key) => {   /* 默认查第一张，第二张表 ，切换时根据key查对应表,若没数据则进行查询 否则不查询，搜索时 都进行查询 */
    let { activeMap, onlySlave, slaveData } = this.props;
    let addState = {};
    let tag = '-1';
    if(key === '1') {
      tag = 'slave';
    }else if(key === '2') {
      tag = 'slave0';
    }else if(key === '3') {
      tag = 'slave1';
    }else if(key === '4') {
      tag = 'slave2';
    }else if(key === '5') {
      tag = 'slave3';
    }else if(key === '6') {
      tag = 'slave4';
    }else if(key === '7') {
      tag = 'slave5';
    }else if(key === '8') {
      tag = 'slave6';
    }else if(key === '9') {
      tag = 'slave7';
    }else if(key === '10') {
      tag = 'slave8';
    }else if(key === '11') {
      tag = 'slave9';
    }else if(key === '12') {
      tag = 'slave10';
    }else if(key === '13') {
      tag = 'slave11';
    }else if(key === '14') {
      tag = 'slave12';
    }else if(key === '15') {
      tag = 'slave13';
    }else if(key === '16') {
      tag = 'slave14';
    }else if(key === '17') {
      tag = 'slave15';
    }else if(key === '18') {
      tag = 'slave16';
    }else if(key === '19') {
      tag = 'slave17';
    }else if(key === '20') {
      tag = 'slave18';
    }else if(key === '21') {
      tag = 'slave19';
    }else if(key === '22') {
      tag = 'slave20';
    }
    if( tag !== '-1') {
      const { [`${tag}Config`] : tableConfig, [`${tag}Data`] : tableData, [`${tag}FilterCondition`]: tableFilterCondition, slaveOrderBy, [`${tag}Pagination`] : tablePagination, slaveSelectedRowKeys,
      } = this.props;
      let bSearch = false; /* 默认不查询 */
      if(onlySlave && commonUtils.isNotEmptyArr(slaveData) && slaveData.length > 1) { /* 只有从表展示出来,并且从表数据超过2行11111 */
        if(commonUtils.isEmptyObject(activeMap)) {
          activeMap = {};
          bSearch = true;
          if(commonUtils.isNotEmptyArr(slaveSelectedRowKeys)) {
            activeMap[key] =  slaveSelectedRowKeys[0];
          }
        } else if(commonUtils.isNotEmptyArr(slaveSelectedRowKeys)) {
          const oldSlaveSelectedRowKey = activeMap[key];
          if(commonUtils.isEmptyObject(oldSlaveSelectedRowKey) || oldSlaveSelectedRowKey !== slaveSelectedRowKeys[0]) {
            bSearch = true;
            activeMap[key] =  slaveSelectedRowKeys[0];
          }
        }
      }
      if(commonUtils.isEmptyArr(tableData) || bSearch) {
        const iPageSize =  tableConfig.bPagination ? tableConfig.iPageSize : 10000 ; /* 根据后台主表配置bPagination判断 是否分页, 不分页默认10000，分页根据分页来  */
        this.props.onSaveState({ pageLoading: true });
        if( key!=="1" && commonUtils.isNotEmptyObject(tableConfig.sCharType)) { /* 加载图表 */
          addState.charConfigAndData = await this.props.onGetCharOne(tag, tableConfig, tableFilterCondition, commonUtils.isEmpty(tablePagination) ? 1 : tablePagination.current, commonUtils.isEmpty(tablePagination) ? iPageSize : tablePagination.pageSize, slaveOrderBy, undefined, true);
        } else {
          addState = await this.props.onGetDataOne(tag, tableConfig, tableFilterCondition, commonUtils.isEmpty(tablePagination) ? 1 : tablePagination.current, commonUtils.isEmpty(tablePagination) ? iPageSize : tablePagination.pageSize, slaveOrderBy, undefined, true);
        }
      }
    }
    this.props.onSaveState({ activeKey: key ,...addState,  pageLoading: false});
  };
   handleResizeLayout = (e) => {
     const { sTabId, sModelsId } = this.props;
    const originX = e.pageY;
    const originWidth = commonUtils.isNotEmptyArr(document.getElementsByClassName('commonListTab-sider') +  sTabId) ?  document.getElementsByClassName('commonListTab-sider' + sTabId )[0].offsetHeight : 0 ;
    let offset = 0;
    window.onmousemove = function (e2) {
      offset = e2.pageY - originX;
      document.getElementsByClassName('commonListTab-sider'+ sTabId)[0].style.height = `${originWidth + offset}px`;
      const slaveDiv = commonUtils.isNotEmptyArr(document.getElementsByClassName('commonListTab-sider'+ sTabId)) ? document.getElementsByClassName('commonListTab-sider'+ sTabId)[0] : [];
      if(commonUtils.isNotEmptyArr(slaveDiv)) {
        const slaveHeight = `${originWidth + offset}px`; /* 将拖动后的高度赋值给从表表格高度 */
        const slaveMaxHeight = `${originWidth + offset - 58}px`;
        slaveDiv.getElementsByClassName('ant-table-body')[0].style.height = slaveHeight;
        slaveDiv.getElementsByClassName('ant-table-body')[0].style.maxHeight = slaveMaxHeight;
        document.getElementsByClassName('commonListTab-content'+ sTabId)[0].style.height = `calc(100% - ${originWidth + offset + 10}px)`;
      }
    };
    window.onmouseup = function () {
      window.onmousemove = null;
      window.onmousemove = null;
      localStorage.setItem('customCommonListTabHeight_' + sModelsId,  originWidth + offset - 58); /* 取maxHeight高度 */
    };
  };


  handleGetChart = () => {
    let tag = '-1';
    const { activeKey: key} = this.props;
    const { charConfigAndData} = this.props;
    if(commonUtils.isEmptyObject(key)) { /* 没有选中默认第二个 */
      tag =  'slave0';
    }
    if(key === '1') {
      tag = 'slave';
    }else if(key === '2') {
      tag = 'slave0';
    }else if(key === '3') {
      tag = 'slave1';
    }else if(key === '4') {
      tag = 'slave2';
    }else if(key === '5') {
      tag = 'slave3';
    }else if(key === '6') {
      tag = 'slave4';
    }else if(key === '7') {
      tag = 'slave5';
    }else if(key === '8') {
      tag = 'slave6';
    }else if(key === '9') {
      tag = 'slave7';
    }else if(key === '10') {
      tag = 'slave8';
    }else if(key === '11') {
      tag = 'slave9';
    }else if(key === '12') {
      tag = 'slave10';
    }else if(key === '13') {
      tag = 'slave11';
    }else if(key === '14') {
      tag = 'slave12';
    }else if(key === '15') {
      tag = 'slave13';
    }else if(key === '16') {
      tag = 'slave14';
    }else if(key === '17') {
      tag = 'slave15';
    }else if(key === '18') {
      tag = 'slave16';
    }else if(key === '19') {
      tag = 'slave17';
    }else if(key === '20') {
      tag = 'slave18';
    }else if(key === '21') {
      tag = 'slave19';
    }else if(key === '22') {
      tag = 'slave20';
    }
    if( tag !== '-1') {
      const {
        [`${tag}Config`]: tableConfig,
      } = this.props;
      if (commonUtils.isNotEmptyObject(tableConfig) && commonUtils.isNotEmptyObject(charConfigAndData)) {
        const { sCharType } = tableConfig;
        const child = charConfigAndData;
        child.hasLend = true;
        let content = '';
        if (commonUtils.isNotEmptyObject(child)) {
          child.height = 300;
          if (sCharType === 'sBar') {
            /* 横向条形图1 */
            content = <Bar {...child} />;
          } else if (sCharType === 'sColumnar') {
            /* 纵向条形图 */
            content = <Columnar {...child} />;
          } else if (sCharType === 'sColumnarGroup') {
            /* 纵向条形图 */
            content = <ColumnarGroup {...child} />;
          } else if (sCharType === 'sBrokenLine') {
            content = <BrokenLine {...child} />;
          } else if (sCharType === 'sWaterWave') {
            content = <WaterWave {...child} />;
          } else if (sCharType === 'sGauge') {
            content = <Gauge {...child} />;
          } else if (sCharType === 'sColumnarStack') {
            content = <ColumnarStack {...child} />;
          } else if (sCharType === 'sPieGroup') {
            content = <PieGroup {...child} />;
          } else if (sCharType === 'sPie') {
            content = <Pie {...child} />;
          } else if (sCharType === 'TimeLineGroup') {
            content = <TimeLineGroup {...child} />;
          } else if (sCharType === 'commonList') {
            content = <CommonList {...child} />;
          } else if (sCharType === 'ColorBlock') {
            content = <ColorBlock {...child} />;
          }
        }
        return content;
      }
    }else {
      return '';
    }
  };

  render() {
    const { pageLoading } = this.props;
    return (
      <div style={{ height: '100%' }}>
        <Spin spinning={pageLoading}>
          <div style={{ height: '100%' }}>
            <CommonListTabComponent
              {...this.props}
              {...this.state}
              onEject={this.handleEject}
              onSelectTree={this.handleTreeSelect}
              onSelectModal={this.handleSelectModal}
              onCancelModal={this.handleCancelModal}
              onTabChange={this.onTabChange}
              onResizeLayout={this.handleResizeLayout}
              onGetChart= {this.handleGetChart}
            />
          </div>
        </Spin>
      </div>
    );
  }
}

const CommonListTabComponent = Form.create({
  mapPropsToFields(props) {
    const { masterData } = props;
    const obj = commonFunc.mapPropsToFields(masterData, Form);
    return obj;
  },
})((props) => {
  const {
    form, onReturnForm, slavePagination, slaveConfig, slaveColumn, isSmall, iHeight, logVisible, sModelsType, slaveData, app, iPageSize, masterConfig,
    onlySlave,
    onlySlave0,
    onlyChart0,
    onlySlave1,
    onlyChart1,
    onlyslave2,
    onlyChart2,
    onlyslave3,
    onlyChart3,
    onlyslave4,
    onlyChart4,
    onlyslave5,
    onlyChart5,
    onlyslave6,
    onlyChart6,
    onlyslave7,
    onlyChart7,
    onlyslave8,
    onlyChart8,
    onlyslave9,
    onlyChart9,
    onlyslave10,
    onlyChart10,
    onlyslave11,
    onlyChart11,
    onlyslave12,
    onlyChart12,
    onlyslave13,
    onlyChart13,
    onlyslave14,
    onlyChart14,
    onlyslave15,
    onlyChart15,
    slave0Data,
    slave1Data,
    slave2Data,
    slave3Data,
    slave4Data,
    slave5Data,
    slave6Data,
    slave7Data,
    slave8Data,
    slave9Data,
    slave10Data,
    slave11Data,
    slave12Data,
    slave13Data,
    slave14Data,
    slave15Data,
    slave0Config,
    slave1Config,
    slave2Config,
    slave3Config,
    slave4Config,
    slaveSelectedRowKeys,
    slave0SelectedRowKeys,
    slave1SelectedRowKeys,
    slave2SelectedRowKeys,
    slave3SelectedRowKeys,
    slave4SelectedRowKeys,
    slave0Pagination,
    slave1Pagination,
    slave2Pagination,
    slave3Pagination,
    slave4Pagination,
    slave5Pagination,
    slave6Pagination,
    slave7Pagination,
    slave8Pagination,
    slave9Pagination,
    slave10Pagination,
    slave11Pagination,
    slave12Pagination,
    slave13Pagination,
    slave14Pagination,
    slave15Pagination,
    slavePageSize,
    slave0PageSize,
    slave1PageSize,
    slave2PageSize,
    slave3PageSize,
    slave4PageSize,
    slave5PageSize,
    slave6PageSize,
    slave7PageSize,
    slave8PageSize,
    slave9PageSize,
    slave10PageSize,
    slave11PageSize,
    slave12PageSize,
    slave13PageSize,
    slave14PageSize,
    slave15PageSize,
  } = props;
  // isSmall将分页变小，以及去掉跳转页面和总条数记录3333333
  /*   回带表单   */
  if (commonUtils.isNotEmptyObject(slavePagination)) {
    if (isSmall) {
      slavePagination.showTotal = null;
    }
  }
  onReturnForm(form);

  let customHeight= 128; /* 取从表高度 */
  if (localStorage.getItem('customCommonListTabHeight_' + props.sModelsId) !== '') {
    const localHeight = localStorage.getItem('customCommonListTabHeight_' + props.sModelsId);
    if(localHeight) {
      customHeight = Number(localHeight);
    }
  }

  const pagination = {
    pageSize: commonUtils.isNotEmptyNumber(props.iPageSize) && props.iPageSize !== 0 ? props.iPageSize : commonConfig.pageSize,
    ...slavePagination,
    size: isSmall ? 'small' : 'large',
    pageSizeOptions: commonConfig.pageSizeOptions,
    showSizeChanger: !isSmall,
    showQuickJumper: !isSmall,
    hideOnSinglePage: true,
  };
  const pagination0 = {
    pageSize: commonUtils.isNotEmptyNumber(slave0PageSize) && slave0PageSize !== 0 ? slave0PageSize : commonConfig.pageSize,
    total: commonUtils.isEmptyArr(slave0Data) ? 0 : slave0Data.length,
    current: commonUtils.isEmptyObject(slave0Pagination) ? 1 : slave0Pagination.current,
    ...slave0Pagination,
    // showQuickJumper: true,
    hideOnSinglePage: false,
    size: isSmall ? 'small' : 'large',
    pageSizeOptions: commonConfig.pageSizeOptions,
    showSizeChanger: !isSmall,
    showQuickJumper: !isSmall,
  };
  const pagination1 = {
    pageSize: commonUtils.isNotEmptyNumber(slave1PageSize) && slave1PageSize !== 0 ? slave1PageSize : commonConfig.pageSize,
    total: commonUtils.isEmptyArr(slave1Data) ? 0 : slave1Data.length,
    current: commonUtils.isEmptyObject(slave1Pagination) ? 1 : slave1Pagination.current,
    ...slave1Pagination,
    // showQuickJumper: true,
    hideOnSinglePage: false,
    size: isSmall ? 'small' : 'large',
    pageSizeOptions: commonConfig.pageSizeOptions,
    showSizeChanger: !isSmall,
    showQuickJumper: !isSmall,
  };
  const pagination2 = {
    pageSize: commonUtils.isNotEmptyNumber(slave2PageSize) && slave2PageSize !== 0 ? slave2PageSize : commonConfig.pageSize,
    total: commonUtils.isEmptyArr(slave2Data) ? 0 : slave2Data.length,
    current: commonUtils.isEmptyObject(slave2Pagination) ? 1 : slave2Pagination.current,
    ...slave2Pagination,
    // showQuickJumper: true,
    hideOnSinglePage: false,
    size: isSmall ? 'small' : 'large',
    pageSizeOptions: commonConfig.pageSizeOptions,
    showSizeChanger: !isSmall,
    showQuickJumper: !isSmall,
  };
  const pagination3 = {
    pageSize: commonUtils.isNotEmptyNumber(slave3PageSize) && slave3PageSize !== 0 ? slave3PageSize : commonConfig.pageSize,
    total: commonUtils.isEmptyArr(slave3Data) ? 0 : slave3Data.length,
    current: commonUtils.isEmptyObject(slave3Pagination) ? 1 : slave3Pagination.current,
    ...slave3Pagination,
    // showQuickJumper: true,
    hideOnSinglePage: false,
    size: isSmall ? 'small' : 'large',
    pageSizeOptions: commonConfig.pageSizeOptions,
    showSizeChanger: !isSmall,
    showQuickJumper: !isSmall,
  };
  const pagination4 = {
    pageSize: commonUtils.isNotEmptyNumber(slave4PageSize) && slave4PageSize !== 0 ? slave4PageSize : commonConfig.pageSize,
    total: commonUtils.isEmptyArr(slave4Data) ? 0 : slave4Data.length,
    current: commonUtils.isEmptyObject(slave4Pagination) ? 1 : slave4Pagination.current,
    ...slave4Pagination,
    // showQuickJumper: true,
    hideOnSinglePage: false,
    size: isSmall ? 'small' : 'large',
    pageSizeOptions: commonConfig.pageSizeOptions,
    showSizeChanger: !isSmall,
    showQuickJumper: !isSmall,
  };

  const pagination5 = {
    pageSize: commonUtils.isNotEmptyNumber(slave5PageSize) && slave5PageSize !== 0 ? slave5PageSize : commonConfig.pageSize,
    total: commonUtils.isEmptyArr(slave5Data) ? 0 : slave5Data.length,
    current: commonUtils.isEmptyObject(slave5Pagination) ? 1 : slave5Pagination.current,
    ...slave5Pagination,
    // showQuickJumper: true,
    hideOnSinglePage: false,
    size: isSmall ? 'small' : 'large',
    pageSizeOptions: commonConfig.pageSizeOptions,
    showSizeChanger: !isSmall,
    showQuickJumper: !isSmall,
  };
  const pagination6 = {
    pageSize: commonUtils.isNotEmptyNumber(slave6PageSize) && slave6PageSize !== 0 ? slave6PageSize : commonConfig.pageSize,
    total: commonUtils.isEmptyArr(slave6Data) ? 0 : slave6Data.length,
    current: commonUtils.isEmptyObject(slave6Pagination) ? 1 : slave6Pagination.current,
    ...slave6Pagination,
    // showQuickJumper: true,
    hideOnSinglePage: false,
    size: isSmall ? 'small' : 'large',
    pageSizeOptions: commonConfig.pageSizeOptions,
    showSizeChanger: !isSmall,
    showQuickJumper: !isSmall,
  };
  const pagination7 = {
    pageSize: commonUtils.isNotEmptyNumber(slave7PageSize) && slave7PageSize !== 0 ? slave7PageSize : commonConfig.pageSize,
    total: commonUtils.isEmptyArr(slave7Data) ? 0 : slave7Data.length,
    current: commonUtils.isEmptyObject(slave7Pagination) ? 1 : slave7Pagination.current,
    ...slave7Pagination,
    // showQuickJumper: true,
    hideOnSinglePage: false,
    size: isSmall ? 'small' : 'large',
    pageSizeOptions: commonConfig.pageSizeOptions,
    showSizeChanger: !isSmall,
    showQuickJumper: !isSmall,
  };
  const pagination8 = {
    pageSize: commonUtils.isNotEmptyNumber(slave8PageSize) && slave8PageSize !== 0 ? slave8PageSize : commonConfig.pageSize,
    total: commonUtils.isEmptyArr(slave8Data) ? 0 : slave8Data.length,
    current: commonUtils.isEmptyObject(slave8Pagination) ? 1 : slave8Pagination.current,
    ...slave8Pagination,
    // showQuickJumper: true,
    hideOnSinglePage: false,
    size: isSmall ? 'small' : 'large',
    pageSizeOptions: commonConfig.pageSizeOptions,
    showSizeChanger: !isSmall,
    showQuickJumper: !isSmall,
  };
  const pagination9 = {
    pageSize: commonUtils.isNotEmptyNumber(slave9PageSize) && slave9PageSize !== 0 ? slave9PageSize : commonConfig.pageSize,
    total: commonUtils.isEmptyArr(slave9Data) ? 0 : slave9Data.length,
    current: commonUtils.isEmptyObject(slave9Pagination) ? 1 : slave9Pagination.current,
    ...slave9Pagination,
    // showQuickJumper: true,
    hideOnSinglePage: false,
    size: isSmall ? 'small' : 'large',
    pageSizeOptions: commonConfig.pageSizeOptions,
    showSizeChanger: !isSmall,
    showQuickJumper: !isSmall,
  };
  const pagination10 = {
    pageSize: commonUtils.isNotEmptyNumber(slave10PageSize) && slave10PageSize !== 0 ? slave10PageSize : commonConfig.pageSize,
    total: commonUtils.isEmptyArr(slave10Data) ? 0 : slave10Data.length,
    current: commonUtils.isEmptyObject(slave10Pagination) ? 1 : slave10Pagination.current,
    ...slave10Pagination,
    // showQuickJumper: true,
    hideOnSinglePage: false,
    size: isSmall ? 'small' : 'large',
    pageSizeOptions: commonConfig.pageSizeOptions,
    showSizeChanger: !isSmall,
    showQuickJumper: !isSmall,
  };
  const pagination11 = {
    pageSize: commonUtils.isNotEmptyNumber(slave11PageSize) && slave11PageSize !== 0 ? slave11PageSize : commonConfig.pageSize,
    total: commonUtils.isEmptyArr(slave11Data) ? 0 : slave11Data.length,
    current: commonUtils.isEmptyObject(slave11Pagination) ? 1 : slave11Pagination.current,
    ...slave11Pagination,
    // showQuickJumper: true,
    hideOnSinglePage: false,
    size: isSmall ? 'small' : 'large',
    pageSizeOptions: commonConfig.pageSizeOptions,
    showSizeChanger: !isSmall,
    showQuickJumper: !isSmall,
  };
  const pagination12 = {
    pageSize: commonUtils.isNotEmptyNumber(slave12PageSize) && slave12PageSize !== 0 ? slave12PageSize : commonConfig.pageSize,
    total: commonUtils.isEmptyArr(slave12Data) ? 0 : slave12Data.length,
    current: commonUtils.isEmptyObject(slave12Pagination) ? 1 : slave12Pagination.current,
    ...slave12Pagination,
    // showQuickJumper: true,
    hideOnSinglePage: false,
    size: isSmall ? 'small' : 'large',
    pageSizeOptions: commonConfig.pageSizeOptions,
    showSizeChanger: !isSmall,
    showQuickJumper: !isSmall,
  };
  const pagination13 = {
    pageSize: commonUtils.isNotEmptyNumber(slave13PageSize) && slave13PageSize !== 0 ? slave13PageSize : commonConfig.pageSize,
    total: commonUtils.isEmptyArr(slave13Data) ? 0 : slave13Data.length,
    current: commonUtils.isEmptyObject(slave13Pagination) ? 1 : slave13Pagination.current,
    ...slave13Pagination,
    // showQuickJumper: true,
    hideOnSinglePage: false,
    size: isSmall ? 'small' : 'large',
    pageSizeOptions: commonConfig.pageSizeOptions,
    showSizeChanger: !isSmall,
    showQuickJumper: !isSmall,
  };
  const pagination14 = {
    pageSize: commonUtils.isNotEmptyNumber(slave14PageSize) && slave14PageSize !== 0 ? slave14PageSize : commonConfig.pageSize,
    total: commonUtils.isEmptyArr(slave14Data) ? 0 : slave14Data.length,
    current: commonUtils.isEmptyObject(slave14Pagination) ? 1 : slave14Pagination.current,
    ...slave14Pagination,
    // showQuickJumper: true,
    hideOnSinglePage: false,
    size: isSmall ? 'small' : 'large',
    pageSizeOptions: commonConfig.pageSizeOptions,
    showSizeChanger: !isSmall,
    showQuickJumper: !isSmall,
  };
  const pagination15 = {
    pageSize: commonUtils.isNotEmptyNumber(slave15PageSize) && slave15PageSize !== 0 ? slave15PageSize : commonConfig.pageSize,
    total: commonUtils.isEmptyArr(slave15Data) ? 0 : slave15Data.length,
    current: commonUtils.isEmptyObject(slave15Pagination) ? 1 : slave15Pagination.current,
    ...slave15Pagination,
    // showQuickJumper: true,
    hideOnSinglePage: false,
    size: isSmall ? 'small' : 'large',
    pageSizeOptions: commonConfig.pageSizeOptions,
    showSizeChanger: !isSmall,
    showQuickJumper: !isSmall,
  };
  let slaveTreeData = [];
  /* 包含子节点的通用列表 */
  if (commonUtils.isNotEmptyObject(sModelsType) && sModelsType.includes('childrenList') && commonUtils.isNotEmptyArr(slaveData)) {
    const addSate = props.onGetSlaveTreeData(slaveData);
    if (commonUtils.isNotEmptyObject(addSate)) {
      // eslint-disable-next-line prefer-destructuring
      slaveTreeData = addSate.slaveTreeData;
    }
  } else {
    slaveTreeData = slaveData;
  }

  const tableProps = {
    ...commonBusiness.getTableTypes('slave', props),
    data: slaveTreeData,
    tableProps: { rowKey: 'sSlaveId', pagination, onChange: props.onTitleChange.bind(this, 'slave'), AutoTableHeight: customHeight },
    onSaveState: props.onSaveState,
    clearArray: props.clearArray,
    readOnly: true,
    isSmall,
    sGroupByList: props.sGroupByList,
    customConfig: props.customConfig,
  };

  const slave0TableProps = {
    ...commonBusiness.getTableTypes('slave0', props),
    tableBelone: true ? 'list' : '', /*  新需求：做个1带N的只可查看不可编辑的表格，模块类型名：commonMultiList */
    tableProps: {
       pagination : pagination0, onChange: props.onTitleChange.bind(this, 'slave0'),
    },
    onSaveState: props.onSaveState,
  };
  const slave1TableProps = {
    ...commonBusiness.getTableTypes('slave1', props),
    tableBelone: true ? 'list' : '', /*  新需求：做个1带N的只可查看不可编辑的表格，模块类型名：commonMultiList */
    tableProps: {
      pagination: pagination1, onChange: props.onTitleChange.bind(this, 'slave1'),
    },
  };
  const slave2TableProps = {
    ...commonBusiness.getTableTypes('slave2', props),
    tableBelone: true ? 'list' : '', /*  新需求：做个1带N的只可查看不可编辑的表格，模块类型名：commonMultiList */
    tableProps: {
      pagination: pagination2, onChange: props.onTitleChange.bind(this, 'slave2'),
    },
    onSaveState: props.onSaveState,
  };
  const slave3TableProps = {
    ...commonBusiness.getTableTypes('slave3', props),
    tableBelone: true ? 'list' : '', /*  新需求：做个1带N的只可查看不可编辑的表格，模块类型名：commonMultiList */
    data: slave3Data,
    tableProps: {
      pagination: pagination3, onChange: props.onTitleChange.bind(this, 'slave3'),
    },
    onSaveState: props.onSaveState,
  };
  const slave4TableProps = {
    ...commonBusiness.getTableTypes('slave4', props),
    tableBelone: true ? 'list' : '', /*  新需求：做个1带N的只可查看不可编辑的表格，模块类型名：commonMultiList */
    tableProps: {
       pagination: pagination4, onChange: props.onTitleChange.bind(this, 'slave4'),
    },
  };
  const slave5TableProps = {
    ...commonBusiness.getTableTypes('slave5', props),
    tableBelone: true ? 'list' : '', /*  新需求：做个1带N的只可查看不可编辑的表格，模块类型名：commonMultiList */
    tableProps: {
      pagination: pagination5, onChange: props.onTitleChange.bind(this, 'slave5'),
    },
  };

  const slave6TableProps = {
    ...commonBusiness.getTableTypes('slave6', props),
    tableBelone: true ? 'list' : '', /*  新需求：做个1带N的只可查看不可编辑的表格，模块类型名：commonMultiList */
    tableProps: {
       pagination: pagination6, onChange: props.onTitleChange.bind(this, 'slave6'),
    },
  };

  const slave7TableProps = {
    ...commonBusiness.getTableTypes('slave7', props),
    tableBelone: true ? 'list' : '', /*  新需求：做个1带N的只可查看不可编辑的表格，模块类型名：commonMultiList */
    tableProps: {
       pagination: pagination7, onChange: props.onTitleChange.bind(this, 'slave7'),
    },
  };

  const slave8TableProps = {
    ...commonBusiness.getTableTypes('slave8', props),
    tableBelone: true ? 'list' : '', /*  新需求：做个1带N的只可查看不可编辑的表格，模块类型名：commonMultiList */
    tableProps: {
     pagination: pagination8, onChange: props.onTitleChange.bind(this, 'slave8'),
    },
  };

  const slave9TableProps = {
    ...commonBusiness.getTableTypes('slave9', props),
    tableBelone: true ? 'list' : '', /*  新需求：做个1带N的只可查看不可编辑的表格，模块类型名：commonMultiList */
    tableProps: {
     pagination: pagination9, onChange: props.onTitleChange.bind(this, 'slave9'),
    },
  };

  const slave10TableProps = {
    ...commonBusiness.getTableTypes('slave10', props),
    tableBelone: true ? 'list' : '', /*  新需求：做个1带N的只可查看不可编辑的表格，模块类型名：commonMultiList */
    tableProps: {
      pagination: pagination10, onChange: props.onTitleChange.bind(this, 'slave10'),
    },
  };

  const slave11TableProps = {
    ...commonBusiness.getTableTypes('slave11', props),
    tableBelone: true ? 'list' : '', /*  新需求：做个1带N的只可查看不可编辑的表格，模块类型名：commonMultiList */
    tableProps: {
      pagination: pagination11, onChange: props.onTitleChange.bind(this, 'slave11'),
    },
  };
  const slave12TableProps = {
    ...commonBusiness.getTableTypes('slave12', props),
    tableBelone: true ? 'list' : '', /*  新需求：做个1带N的只可查看不可编辑的表格，模块类型名：commonMultiList */
    tableProps: {
      pagination: pagination12, onChange: props.onTitleChange.bind(this, 'slave12'),
    },
  };

  const slave13TableProps = {
    ...commonBusiness.getTableTypes('slave13', props),
    tableBelone: true ? 'list' : '', /*  新需求：做个1带N的只可查看不可编辑的表格，模块类型名：commonMultiList */
    tableProps: {
      pagination: pagination13, onChange: props.onTitleChange.bind(this, 'slave13'),
    },
  };
  const slave14TableProps = {
    ...commonBusiness.getTableTypes('slave14', props),
    tableBelone: true ? 'list' : '', /*  新需求：做个1带N的只可查看不可编辑的表格，模块类型名：commonMultiList */
    tableProps: {
      pagination: pagination14, onChange: props.onTitleChange.bind(this, 'slave14'),
    },
  };
  const slave15TableProps = {
    ...commonBusiness.getTableTypes('slave15', props),
    tableBelone: true ? 'list' : '', /*  新需求：做个1带N的只可查看不可编辑的表格，模块类型名：commonMultiList */
    tableProps: {
      pagination: pagination15, onChange: props.onTitleChange.bind(this, 'slave15'),
    },
  };

  /* 有树形的不用虚拟列表 */
  if (commonUtils.isNotEmptyObject(sModelsType) && sModelsType.includes('childrenList') && commonUtils.isNotEmptyArr(slaveTreeData)) {
    tableProps.noVlist = true;
  }
  let slaveInfo = '';
  let materialsInfo = '';
  let checkInfo = '';
  let slaveInfo0 = '';
  let slaveInfo1 = '';
  let slaveInfo2 = '';
  let slaveInfo3 = '';
  let slaveInfo4 = '';
  let slaveInfo5 = '';
  let slaveInfo6 = '';
  let slaveInfo7 = '';
  let slaveInfo8 = '';
  let slaveInfo9 = '';
  let slaveInfo10 = '';
  let slaveInfo11 = '';
  let slaveInfo12 = '';
  let slaveInfo13 = '';
  if (commonUtils.isNotEmptyObject(slaveConfig) && commonUtils.isNotEmptyArr(slaveConfig.gdsconfigformslave)) {
    slaveInfo = commonUtils.isNotEmptyArr(slaveConfig.gdsconfigformslave.filter(item => item.sControlName === 'MainContent')) ? slaveConfig.gdsconfigformslave.filter(item => item.sControlName === 'MainContent')[0].showName : commonFunc.showMessage(app.commonConst, 'MainContent'); /* 从表信息 */
    materialsInfo = commonUtils.isNotEmptyArr(slaveConfig.gdsconfigformslave.filter(item => item.sControlName === 'zMaterials')) ? slaveConfig.gdsconfigformslave.filter(item => item.sControlName === 'zMaterials')[0].showName : commonFunc.showMessage(app.commonConst, 'zMaterials'); /* 表一 */
    checkInfo = commonUtils.isNotEmptyArr(slaveConfig.gdsconfigformslave.filter(item => item.sControlName === 'zCheck')) ? slaveConfig.gdsconfigformslave.filter(item => item.sControlName === 'zCheck')[0].showName : commonFunc.showMessage(app.commonConst, 'zCheck'); /* 表二 */
    slaveInfo0 = commonUtils.isNotEmptyArr(slaveConfig.gdsconfigformslave.filter(item => item.sControlName === 'zSlaveInfo0')) ? slaveConfig.gdsconfigformslave.filter(item => item.sControlName === 'zSlaveInfo0')[0].showName : commonFunc.showMessage(app.commonConst, 'zSlaveInfo0'); /* 表三 */
    slaveInfo1 = commonUtils.isNotEmptyArr(slaveConfig.gdsconfigformslave.filter(item => item.sControlName === 'zSlaveInfo1')) ? slaveConfig.gdsconfigformslave.filter(item => item.sControlName === 'zSlaveInfo1')[0].showName : commonFunc.showMessage(app.commonConst, 'zSlaveInfo1'); /* 表四 */
    slaveInfo2 = commonUtils.isNotEmptyArr(slaveConfig.gdsconfigformslave.filter(item => item.sControlName === 'zSlaveInfo2')) ? slaveConfig.gdsconfigformslave.filter(item => item.sControlName === 'zSlaveInfo2')[0].showName : commonFunc.showMessage(app.commonConst, 'zSlaveInfo2'); /* 表五 */
    slaveInfo3 = commonUtils.isNotEmptyArr(slaveConfig.gdsconfigformslave.filter(item => item.sControlName === 'zSlaveInfo3')) ? slaveConfig.gdsconfigformslave.filter(item => item.sControlName === 'zSlaveInfo3')[0].showName : commonFunc.showMessage(app.commonConst, 'zSlaveInfo3'); /* 表六 */
    slaveInfo4 = commonUtils.isNotEmptyArr(slaveConfig.gdsconfigformslave.filter(item => item.sControlName === 'zSlaveInfo4')) ? slaveConfig.gdsconfigformslave.filter(item => item.sControlName === 'zSlaveInfo4')[0].showName : commonFunc.showMessage(app.commonConst, 'zSlaveInfo4'); /* 表七 */
    slaveInfo5 = commonUtils.isNotEmptyArr(slaveConfig.gdsconfigformslave.filter(item => item.sControlName === 'zSlaveInfo5')) ? slaveConfig.gdsconfigformslave.filter(item => item.sControlName === 'zSlaveInfo5')[0].showName : commonFunc.showMessage(app.commonConst, 'zSlaveInfo5'); /* 表八 */
    slaveInfo6 = commonUtils.isNotEmptyArr(slaveConfig.gdsconfigformslave.filter(item => item.sControlName === 'zSlaveInfo6')) ? slaveConfig.gdsconfigformslave.filter(item => item.sControlName === 'zSlaveInfo6')[0].showName : commonFunc.showMessage(app.commonConst, 'zSlaveInfo6'); /* 表九 */
    slaveInfo7 = commonUtils.isNotEmptyArr(slaveConfig.gdsconfigformslave.filter(item => item.sControlName === 'zSlaveInfo7')) ? slaveConfig.gdsconfigformslave.filter(item => item.sControlName === 'zSlaveInfo7')[0].showName : commonFunc.showMessage(app.commonConst, 'zSlaveInfo7'); /* 表十 */
    slaveInfo8 = commonUtils.isNotEmptyArr(slaveConfig.gdsconfigformslave.filter(item => item.sControlName === 'zSlaveInfo8')) ? slaveConfig.gdsconfigformslave.filter(item => item.sControlName === 'zSlaveInfo8')[0].showName : commonFunc.showMessage(app.commonConst, 'zSlaveInfo8'); /* 表十一 */
    slaveInfo9 = commonUtils.isNotEmptyArr(slaveConfig.gdsconfigformslave.filter(item => item.sControlName === 'zSlaveInfo9')) ? slaveConfig.gdsconfigformslave.filter(item => item.sControlName === 'zSlaveInfo9')[0].showName : commonFunc.showMessage(app.commonConst, 'zSlaveInfo9'); /* 表十一 */
    slaveInfo10 = commonUtils.isNotEmptyArr(slaveConfig.gdsconfigformslave.filter(item => item.sControlName === 'zSlaveInfo10')) ? slaveConfig.gdsconfigformslave.filter(item => item.sControlName === 'zSlaveInfo10')[0].showName : commonFunc.showMessage(app.commonConst, 'zSlaveInfo10'); /* 表十一 */
    slaveInfo11 = commonUtils.isNotEmptyArr(slaveConfig.gdsconfigformslave.filter(item => item.sControlName === 'zSlaveInfo11')) ? slaveConfig.gdsconfigformslave.filter(item => item.sControlName === 'zSlaveInfo11')[0].showName : commonFunc.showMessage(app.commonConst, 'zSlaveInfo11'); /* 表十一 */
    slaveInfo12 = commonUtils.isNotEmptyArr(slaveConfig.gdsconfigformslave.filter(item => item.sControlName === 'zSlaveInfo12')) ? slaveConfig.gdsconfigformslave.filter(item => item.sControlName === 'zSlaveInfo12')[0].showName : commonFunc.showMessage(app.commonConst, 'zSlaveInfo12'); /* 表十一 */
    slaveInfo13 = commonUtils.isNotEmptyArr(slaveConfig.gdsconfigformslave.filter(item => item.sControlName === 'zSlaveInfo13')) ? slaveConfig.gdsconfigformslave.filter(item => item.sControlName === 'zSlaveInfo13')[0].showName : commonFunc.showMessage(app.commonConst, 'zSlaveInfo13'); /* 表十一 */
  }
  const masterSum = commonUtils.isNotEmptyObject(slaveConfig) ? slaveConfig.gdsconfigformslave.filter(item => item.bSum && item.sName !== '') : [];
  const masterTitleGroup = commonUtils.isNotEmptyObject(slaveColumn) ? slaveColumn.filter(item => commonUtils.isNotEmptyObject(item.title) && item.title.indexOf('-') > -1) : [];
  const hasColumnGroup = masterTitleGroup.length;
  if (masterSum.length > 0) {
    NoTotalData = hasColumnGroup > 0 ? 'TitleGroup' : 'NoTitleGroup';
  } else {
    NoTotalData = hasColumnGroup > 0 ? 'NoTotalData TitleGroup' : 'NoTotalData NoTitleGroup';
  }
  // const mProps = { ...commonBusiness.createMemoProps('master', props)};

  const name = 'filterTree';
  const treeProps = {
    ...commonBusiness.getTreeTypes('tree', props),
    isSearch: false,
    checkable: false,
    disabled: false,
    checkedAll: false,
    unChecked: false,
    [`${name}Column`]: props[`${name}Column`],
    [`${name}Config`]: props[`${name}Config`],
    [`${name}Data`]: props[`${name}Data`],
    getFloatNum: props.getFloatNum,
    getSqlDropDownData: props.getSqlDropDownData,
    getSqlCondition: props.getSqlCondition,
    handleSqlDropDownNewRecord: props.handleSqlDropDownNewRecord,
    getDateFormat: props.getDateFormat,
    onDoubleClick: props.onDoubleClick,
    onSelect: props.onSelectTree,
    expandedKeys: props.expandedKeys,
  };
  const logProps = {
    app: {
      ...props.app,
      currentPane: {
        ...props.app.currentPane,
        formRoute: '/indexPage/commonList',
        route: '/indexPage/commonList',
        name: 'logView',
        config: props.logConfig,
        select: props.onSelectModal.bind(this, 'logVisible'),
        selectCancel: props.onCancelModal.bind(this, 'logVisible'),
        sModelsType: 'modal/logView',
      },
    },
    token: props.app.token,
    slaveColumn: props.logColumn, /*   表头111111   */
    slaveConfig: props.logConfig,
    slaveData: props.logData,
    dispatch: props.dispatch,
    content: props.content,
    id: new Date().getTime().toString(),
    pageLoading: false,
  };
  const buttonConfig = commonUtils.isNotEmptyObject(slaveConfig) ? slaveConfig.gdsconfigformslave.filter(item => item.sName === '' && item.showName !== '' && item.sControlName !== '' && item.bVisible && item.sControlName.indexOf('Btn') > -1) : [];
  return (
    <Form style={{ height: '100%' }}>
      <Layout style={{ height: '100%' }} className="xly-list">
        <Layout className="table">
          <Content >
            {
              onlySlave ? <StaticEditTable {...tableProps} footer="hidden" tableBelone="list" /> : ''}
              <Content style={{ height: '67vh' }}  className="listTabs">
              <Tabs activeKey={props.activeKey} onChange={props.onTabChange} tabBarStyle={{ margin: '0 8px' }} >
                {
                  onlySlave0 ?
                    <TabPane tab={materialsInfo} key={2}>
                      {
                        props.activeKey === '2' || props.activeKey === undefined ?
                        onlyChart0 ?
                          <div className={oeeStyle.mychart}>
                            {
                              props.onGetChart()
                            }
                        </div> :
                          <StaticEditTable {...slave0TableProps} tableBelone="list" /> : ''
                      }
                    </TabPane> : ''
                }
                {
                  onlySlave1 ?
                    <TabPane tab={checkInfo}  key={3}>
                      {
                        props.activeKey === '3' ?
                        onlyChart1 ?
                          <div className={oeeStyle.mychart}>
                            {
                              props.onGetChart()
                            }
                          </div> :
                          <StaticEditTable {...slave1TableProps} tableBelone="list" /> : ''
                      }
                    </TabPane> : ''
                }
                {
                  onlyslave2 ?
                    <TabPane tab={slaveInfo0}  key={4}>
                      {
                        onlyChart2 ?
                          <div className={oeeStyle.mychart}>
                            {
                              props.onGetChart()
                            }
                          </div> :
                          <StaticEditTable {...slave2TableProps}  tableBelone="list" />
                      }
                    </TabPane> : ''
                }
                {
                  onlyslave3 ?
                    <TabPane tab={slaveInfo1}  key={5}>
                      {
                        onlyChart3 ?
                          <div className={oeeStyle.mychart}>
                            {
                              props.onGetChart()
                            }
                          </div> :
                          <StaticEditTable {...slave3TableProps}  tableBelone="list" />
                      }
                    </TabPane> : ''
                }
                {
                  onlyslave4 ?
                    <TabPane tab={slaveInfo2}  key={6}>
                      {
                        onlyChart4 ?
                          <div className={oeeStyle.mychart}>
                            {
                              props.onGetChart(slave4Config)
                            }
                          </div> :
                          <StaticEditTable {...slave4TableProps} tableBelone="list" />
                      }
                    </TabPane> : ''
                }
                {
                  onlyslave5 ?
                    <TabPane tab={slaveInfo3}  key={7}>
                      <StaticEditTable {...slave5TableProps} tableBelone="list" />
                    </TabPane> : ''
                }
                {
                  onlyslave6 ?
                    <TabPane tab={slaveInfo4}  key={8}>
                      <StaticEditTable {...slave6TableProps} tableBelone="list" />
                    </TabPane>: ''
                }
                {
                  onlyslave7 ?
                    <TabPane tab={slaveInfo5}  key={9}>
                      <StaticEditTable {...slave7TableProps} tableBelone="list" />
                    </TabPane> : ''
                }
                {
                  onlyslave8 ?
                    <TabPane tab={slaveInfo6} key={10}>
                      <StaticEditTable {...slave8TableProps} tableBelone="list" />
                    </TabPane> : ''
                }
                {
                  onlyslave9 ?
                    <TabPane tab={slaveInfo7}  key={11}>
                      <StaticEditTable {...slave9TableProps} tableBelone="list" />
                    </TabPane> : ''
                }
                {
                  onlyslave10 ?
                    <TabPane tab={slaveInfo8}  key={12}>
                      <StaticEditTable {...slave10TableProps} tableBelone="list" />
                    </TabPane> : ''
                }
                {
                  onlyslave11 ?
                    <TabPane tab={slaveInfo9} key={13}>
                      <StaticEditTable {...slave11TableProps} tableBelone="list" />
                    </TabPane> : ''
                }
                {
                  onlyslave12 ?
                    <TabPane tab={slaveInfo10}  key={14}>
                      <StaticEditTable {...slave12TableProps} tableBelone="list" />
                    </TabPane> : ''
                }
                {
                  onlyslave13 ?
                    <TabPane tab={slaveInfo11}  key={15}>
                      <StaticEditTable {...slave13TableProps} tableBelone="list" />
                    </TabPane> : ''
                }
                {
                  onlyslave14 ?
                    <TabPane tab={slaveInfo12}  key={16}>
                      <StaticEditTable {...slave14TableProps} tableBelone="list" />
                    </TabPane> : ''
                }
                {
                  onlyslave15 ?
                    <TabPane tab={slaveInfo13}  key={17}>
                      <StaticEditTable {...slave15TableProps} tableBelone="list" />
                    </TabPane> : ''
                }
              </Tabs>
            </Content>
          </Content>
        </Layout>
        <div className={oeeStyle.bottomBtns}>
          <div className={oeeStyle.btnBrints}>
            {
              commonUtils.isNotEmptyArr(buttonConfig) ?
                buttonConfig.map((item, index) => {
                  if (item.sControlName === 'BtnSet') {
                    return (
                      // eslint-disable-next-line jsx-a11y/anchor-is-valid,react/no-array-index-key
                      <a key={index} className="oeeAffixBtnContainer" style={{ background: `${item.sColorTerms}` }} onClick={() => onBtnClick(item)}>
                        {item.showName}<AffixOeeMenu{...props}/>
                      </a>
                    );
                  } else {
                    return (
                      // eslint-disable-next-line jsx-a11y/anchor-is-valid,react/no-array-index-key
                      <a key={index} style={{ background: `${item.sColorTerms}` }} onClick={() => onBtnClick(item)}>
                        {item.showName}
                      </a>
                    );
                  }
                }) : ''
            }
          </div>
          <div className={oeeStyle.searchComponent}>
            <OeeSearchComponent {...props} />
          </div>
        </div>
      </Layout>
    </Form>
  );
});

export default CommonBase(CommonListTabEvent(OeeCommonListTab));