/* eslint-disable */
import React, { Component } from 'react';
import { Form, Icon } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Layout, Spin, Slider, Button, Input, message, Tooltip  } from 'antd';
import { MessageOutlined, MinusOutlined, NodeExpandOutlined } from '@ant-design/icons';
import CommonListEvent from '@/components/Common/CommonListEvent';/* 继承销售模块业务功能 */
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 selfstyles from '@/components/Common/CommonListLeft/index.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 leftTreeEdit from '@/assets/leftTreeEdit.svg';/* 编辑节点*/
import leftTreeDel from '@/assets/leftTreeDel.svg';/* 删除节点 */
import leftTreeAddChild from '@/assets/leftTreeAddChild.svg';/* 新增节点 */
import AntdDraggableModal from '@/components/Common/AntdDraggableModal';
import CommonListSelect from '@/components/Common/CommonListSelect';/* 选择界面2222 */
import WorkOrderSystemAddModal from '@/components/Common/WorkOrderSystem/WorkOrderSystemAdd';
import WorkOrderSystemDetailModal from '@/components/Common/WorkOrderSystem/WorkOrderSystemDetail';

const { Header, Content } = Layout;

const { TextArea } = Input;

let NoTotalData = '';
class CommonList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      expandAll: true,
      expandedTreeKeys: [],
      defaultKey: 'unset',
      slideFlag: localStorage.getItem(`treeSlide_${this.props.sModelsId}`) ? +localStorage.getItem(`treeSlide_${this.props.sModelsId}`) : 0,
      treeId: `treeId_${commonUtils.createSid()}`
    };
    this.treeDiv = null;
  }
  componentDidMount() {
    if (!this.state.slideFlag) {
      this.treeDiv.getElementsByClassName('listTree-sider')[0].style.display = 'block';
      const originWidth = this.treeDiv.getElementsByClassName('listTree-sider')[0].offsetWidth;
      this.treeDiv.getElementsByClassName('listTree-content')[0].style.width = `calc(100% - ${originWidth + 10}px)`;
    } else {
      this.treeDiv.getElementsByClassName('listTree-sider')[0].style.display = 'none';
      this.treeDiv.getElementsByClassName('listTree-content')[0].style.width = `calc(100%)`;
    }
    this.handleDefaultExpandTree();
  }
  componentDidUpdate() {
    if (window.xlyListLeftTreeExpand) {
      this.handleDefaultExpandTree();
      window.xlyListLeftTreeExpand = false;
    }
  }
  handleDefaultExpandTree = () => {
    let count = 0;
    const timer = setInterval(() => {
      count += 1;
      if (count > 10) {
        clearInterval(timer);
      }
      const { expandedKeys } = this.props;
      if (commonUtils.isNotEmptyArr(expandedKeys)) {
        clearInterval(timer);
        this.handleExpandTreeAll(2);
      }
    }, 500);
  }
  onTreeExpandChange = () => {
    const oldState = this.state.expandAll;
    const arr = [];
    if (!oldState) {
      this.props.treeData.forEach((item) => {
        arr.push(item.sId + item.sProcessId + item.iOrder);
      });
    }
    this.setState({
      expandAll: !oldState,
      expandedTreeKeys: arr,
    });
  }
  toggleSlide = () => {
    let flag = this.state.slideFlag ? 0 : 1;
    localStorage.setItem('treeSlide_' + this.props.sModelsId, flag);
    this.setState({
      slideFlag: flag
    })
  }

  handleSlideToggle = () => {
    if (this.state.slideFlag) {
      this.treeDiv.getElementsByClassName('listTree-sider')[0].style.display = 'block';
      const originWidth = this.treeDiv.getElementsByClassName('listTree-sider')[0].offsetWidth;
      this.treeDiv.getElementsByClassName('listTree-content')[0].style.width = `calc(100% - ${originWidth + 10}px)`;
      this.toggleSlide();
    } else {
      this.treeDiv.getElementsByClassName('listTree-sider')[0].style.display = 'none';
      this.treeDiv.getElementsByClassName('listTree-content')[0].style.width = `calc(100%)`;
      this.toggleSlide();
    }
  }
  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,
    });
  }
  /* 新增左侧树节点 */
  handleLeftTreeAddChild = () => {
    this.props.onSaveState({ leftTreeNodeVisible: true, leftTreeNodeHandleType: 'add',  leftTreeNodeTitle: '新增子节点'  })


  }

  /* 编辑左侧树节点 */
  handleLeftTreeAddEdit = () => {
    const { treeSelectedKeys, treeTreeNode} = this.props;
    if(commonUtils.isEmptyArr(treeSelectedKeys)) {
      message.error('请选择树节点!');
      return;
    }
    const leftTreeNodeName = treeTreeNode.showName;
    this.props.onSaveState({ leftTreeNodeVisible: true, leftTreeNodeName: leftTreeNodeName, leftTreeNodeTitle: '编辑树节点', leftTreeNodeHandleType: 'update'  })
  }

  /* 删除左侧树节点 */
  handleLeftTreeAddDel = () => {
    const { treeSelectedKeys, treeTreeNode, leftTreeNodeHandleType, slaveConfig,slaveData, slaveDelData} = this.props;
    if(commonUtils.isEmptyArr(treeSelectedKeys)) {
      message.error('请选择树节点!');
      return;
    }
    const newNodeData = [];
    const newNodeDelData = [];
    const newNodeObj ={};
    newNodeObj.sId = treeTreeNode.sId;
    newNodeObj.sName = treeTreeNode.showName;
    newNodeObj.sParentId = treeTreeNode.sId;
    newNodeObj.sAllId = treeTreeNode.sAllId;
    newNodeObj.handleType = 'del';
    newNodeData.push(newNodeObj);
    newNodeDelData.push(newNodeObj);
    const data = [];
    if (!commonBusiness.validateTable(slaveConfig, slaveData, this.props)) {
      this.props.onSaveState({
        loading: false,
      });
      return;
    }
    data.push(commonBusiness.mergeData('slave', slaveConfig.sTbName, newNodeData, newNodeDelData));
    this.handleSaveData({ data, sClientType: '1' });
  }

  // 展开收起全部树节点
  handleExpandTreeAll = (level = 999) => {
    const { expandedKeys: expandedKeysOld, treeData } = this.props;
    let expandedKeys = [];
    const getExpandedKeys = (arr, lv) => {
      for (let i = 0; i < arr.length; i++) {
        const obj = arr[i];
        expandedKeys.push(obj.key);
        if (obj.children && lv < level) {
          getExpandedKeys(obj.children, lv + 1);
        }
      }
    }
    getExpandedKeys(treeData, 0);
    if (expandedKeysOld.length >= expandedKeys.length && level === 999) {
      expandedKeys = [];
    }
    this.props.onSaveState({ expandedKeys });
  }

  handleLeftTreeNodeOk = () => {
    /* 调用接口 新增保存 */
    const { treeSelectedKeys, treeTreeNode, leftTreeNodeHandleType, slaveConfig,slaveData, slaveDelData} = this.props;
    // const {treeNodeValue } = this.state;
    const nodeName = commonUtils.isNotEmptyObject(document.getElementById('treeNodeName')) ? document.getElementById('treeNodeName').value : '' ;
    if(commonUtils.isEmptyArr(treeSelectedKeys)) {
      message.error('请选择树节点!');
      return;
    }
    if(commonUtils.isEmptyObject(nodeName)) {
      message.error('请输入子节点名称!');
      return;
    }
    let filterTreeConfig = {};
    let picArrConfig = {};
    const filterTreeConfigArr = slaveConfig.gdsconfigformslave.filter(item => item.bTree);
    if (commonUtils.isNotEmptyArr(filterTreeConfigArr)) {
      filterTreeConfig = filterTreeConfigArr[0];
    }
    const picArrConfigArr = slaveConfig.gdsconfigformslave.filter(item => item.sName === 'picArr');
    if (commonUtils.isNotEmptyArr(picArrConfigArr)) {
      picArrConfig = picArrConfigArr[0];
    }

    const { sActiveId: sFormId } = picArrConfig;
    if (!sFormId) {
      message.error('sFormId不能为空!');
      return;
    }

    const { sName = 'sName' } = filterTreeConfig;
    const newNodeData = [];
    const newNodeDelData = [];
    /* 新增节点 */
    if(leftTreeNodeHandleType && leftTreeNodeHandleType === 'add') {
      const newNodeObj ={};
      newNodeObj.sId = commonUtils.createSid();
      newNodeObj[sName] = nodeName;
      newNodeObj.sParentId = treeTreeNode.sId;
      newNodeObj.sAllId = newNodeObj.sId + newNodeObj.sParentId;
      newNodeObj.handleType = leftTreeNodeHandleType;
      newNodeObj.sFormId = sFormId;
      newNodeData.push(newNodeObj);
    }else if(leftTreeNodeHandleType && leftTreeNodeHandleType === 'update') {
      const newNodeObj ={};
      newNodeObj.sId = treeTreeNode.sId;
      newNodeObj[sName] = nodeName;
      newNodeObj.sParentId = treeTreeNode.sParentId;
      newNodeObj.sAllId = treeTreeNode.sAllId;
      newNodeObj.handleType = leftTreeNodeHandleType;
      newNodeData.push(newNodeObj);
    }
    const data = [];
    if (!commonBusiness.validateTable(slaveConfig, slaveData, this.props)) {
      this.props.onSaveState({
        loading: false,
      });
      return;
    }
    data.push(commonBusiness.mergeData('slave', slaveConfig.sTbName, newNodeData, newNodeDelData));
    this.handleSaveData({ data, sClientType: '1' });
  }

  handleSaveData = async (params) => {
    const {
      token, sModelsId, currentId, masterData, masterConfig, slaveConfig, checkConfig, billnosetting, app, sModelsType, controlConfig, materialsConfig, processConfig, colorConfig, packConfig, orderDetailConfig, dispatch,
    } = this.props;
    const {userinfo} = app;
    const {copyTo} = app.currentPane;
    const BtnSave = commonFunc.showMessage(app.commonConst, 'BtnSave');/* 保存 */
    params.optName = BtnSave;
    const returnData = await commonBusiness.saveData({token, value: params, sModelsId});
    if (commonUtils.isNotEmptyObject(returnData)) {
      if(returnData.code === 1) {
        /* 回刷树 */
        this.handleRefleshTree();
      }

    }
  }
  handleRefleshTree = async () => {
    const { slaveConfig, filterCondition, treeSelectedKeys } = this.props;
    const filterTreeConfigArr = slaveConfig.gdsconfigformslave.filter(item => item.bTree);
    const addState = {};
    let bInData = true;
    if (commonUtils.isNotEmptyArr(filterTreeConfigArr)) {
      const filterTreeConfig = filterTreeConfigArr[0];
      const { treeData } = await this.handleGetFilterTreeData(filterTreeConfig, filterCondition, 1);
      addState.treeData = treeData;
    }
    if (commonUtils.isNotEmptyArr(addState.treeData) && commonUtils.isNotEmptyArr(treeSelectedKeys)) {
      const findObjectById = (arr, key) => {
        for (let i = 0; i < arr.length; i++) {
          const obj = arr[i];
          if (obj.key === key) {
            return obj;
          }
          if (obj.children) {
            const child = findObjectById(obj.children, key);
            if (child) {
              return child;
            }
          }
        }
        return null;
      }
      
      bInData = findObjectById(addState.treeData, treeSelectedKeys[0]);
    }
    this.props.onSaveState({ leftTreeNodeVisible: false, ...addState }, () => {
      if (!bInData) {
        const oFirstNode = this.treeRef?.querySelector('.ant-tree-node-content-wrapper');
        if (oFirstNode) {
          oFirstNode.click();
        }
      }
    });
  }

  handleGetFilterTreeData= async (slaveConfig, slaveFilterCondition, page, slaveOrderBy, props) => {
    const { app } = props === undefined ? this.props : props;
    const conditonValues = app.currentPane.conditonValues;
    const pageNum = commonUtils.isEmpty(page) ? 1 : page;
    return await this.props.handleGetTreeDataSet({
      name: 'slave',
      configData: slaveConfig,
      condition: {
        pageNum, pageSize: commonConfig.pageSize, bFilter: slaveFilterCondition, sFilterOrderBy: slaveOrderBy, sSqlCondition: conditonValues, isTreeList: "1",
      },
      flag: true,
      clearSelectData: true,
      isWait: true
    });
  };

  render() {
    const { pageLoading } = this.props;
    return (
      <div style={{ height: '100%' }}>
        <Spin spinning={pageLoading}>
          <div ref={(ref) => this.treeDiv = ref} style={{ height: '100%' }}>
            <CommonListComponent
              {...this.props}
              {...this.state}
              treeDiv={this.treeDiv}
              onEject={this.handleEject}
              onSelectTree={this.handleTreeSelect}
              onSelectModal={this.handleSelectModal}
              onCancelModal={this.handleCancelModal}
              onLeftTreeAddChild = {this.handleLeftTreeAddChild}
              onLeftTreeAddEdit = {this.handleLeftTreeAddEdit}
              onLeftTreeDel = {this.handleLeftTreeAddDel}
              onLeftTreeNodeOk = {this.handleLeftTreeNodeOk}
              onSaveTreeRef={(ref) => { this.treeRef = ref; }}
              onExpandTreeAll={this.handleExpandTreeAll}
            />
          </div>
        </Spin>
      </div>
    );
  }
}

const CommonListComponent = Form.create({
  mapPropsToFields(props) {
    const { masterData, masterConfig } = props;
    const obj = commonFunc.mapPropsToFields(masterData, Form, masterConfig);
    return obj;
  },
})((props) => {
  const {
    form, onReturnForm, slavePagination, slaveConfig, slaveColumn, isSmall, iHeight, logVisible, sModelsType, slaveData, slaveFilterCondition, onTreeExpandChange,
    flowHistroyId, flowHistroyVisible, app, expandAll, leftTreeNodeVisible, leftTreeNodeTitle, leftTreeNodeName,
  } = props;
  const { userinfo, token } = app;
  // isSmall将分页变小，以及去掉跳转页面和总条数记录
  /*   回带表单   */
  if (commonUtils.isNotEmptyObject(slavePagination)) {
    // if (isSmall) {
    //   slavePagination.showTotal = null;
    // }
  }
  onReturnForm(form);
  // 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,
  // };
  const pagination = false;
  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 },
    onSaveState: props.onSaveState,
    clearArray: props.clearArray,
    readOnly: true,
    isSmall,
    sGroupByList: props.sGroupByList,
    customConfig: props.customConfig,
  };
  /* 有树形的不用虚拟列表 */
  if (commonUtils.isNotEmptyObject(sModelsType) && sModelsType.includes('childrenList') && commonUtils.isNotEmptyArr(slaveTreeData)) {
    tableProps.noVlist = true;
  }
  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 filterTreeData = (treeData) => {
    if (commonUtils.isNotEmptyArr(treeData)) {
      if (commonUtils.isNotEmptyArr(treeData[0].children)) {
        return treeData[0].children;
      }
      return treeData;
    } else {
      return [];
    }
  }

  // const name = 'filterTree';
  const treeProps = {
    ...commonBusiness.getTreeTypes('tree', props),
    isSearch: false,
    checkable: false,
    disabled: false,
    checkedAll: false,
    unChecked: false,
    showLine: true,
    treeData: filterTreeData(props.treeData),
    // [`${name}Column`]: props[`${name}Column`],
    // [`${name}Config`]: props[`${name}Config`],
    // [`${name}Data`]: filterTreeData(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,
    onSaveState: props.onSaveState,
    onExpandTree: () => {},
  };

  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, /*   表头   */
    slaveConfig: props.logConfig,
    slaveData: props.logData,
    dispatch: props.dispatch,
    content: props.content,
    id: new Date().getTime().toString(),
    pageLoading: false,
  };

  const refreshSlaveTable = () => {
    props.handleGetDataSet({
      name: 'slave',
      configData: props.slaveConfig,
      condition: {
        pageNum: 1,
        pageSize: slavePagination.pageSize,
        bFilter: slaveFilterCondition,
      },
      flag: true,
      clearSelectData: true,
    });
  };
  const workOrderSystemAddProps = {
    ...props,
    onAddWorkOrderSuccess: () => {
      props.onSaveState({ workOrderSystemAddModalVisible: false });
      refreshSlaveTable();
    },
  };

  let workOrderSystemDetailTitle = '';
  if (commonUtils.isNotEmptyObject(props.slaveCurrentData)) {
    const { sTitle, sModuleName, tCreateDate } = props.slaveCurrentData;
    /* eslint-disable */
    workOrderSystemDetailTitle = (
    <>
      <span style={{ opacity: 0 }}>{sTitle}</span>
      <span
        style={{ position: 'absolute', right: 70 }}
      >{`菜单名称: ${sModuleName} ${Array(10)
        .fill('\xa0')
        .join('')} 创建时间: ${tCreateDate.split(' ')[0]}`}
      </span>
      <Button
        type="link"
        style={{
          position: 'absolute',
          right: 30,
          top: 6,
          color: '#4a495f',
        }}
        onClick={() => {
          props.onSaveState({ bMin: true });
        }}
      >
        <MinusOutlined />
      </Button>
    </>);
    /* eslint-enable */
  }

  let customWidth = 224;
  if (localStorage.getItem(`customProductionScheduleTreeWidth_${props.sModelsId}`) !== '') {
    customWidth = localStorage.getItem(`customProductionScheduleTreeWidth_${props.sModelsId}`);
  }

  const workOrderSystemDetailProps = {
    ...props,
    sId: commonUtils.isNotEmptyObject(props.slaveCurrentData) ? props.slaveCurrentData.sId : '',
    refreshSlaveTable,
  };

  let addressStr = `${location.protocol}//${location.host}`;
  if (sModelsType && sModelsType.includes('http')) {
    addressStr = location.host;
  }

  const sFlowUrl = `${commonConfig.server_host}process/historyListerp/{sBillId}/{sBrandsId}/{sSubsidiaryId}/{sUserName}/{token}`;
  const flowHistrory = sFlowUrl !== undefined ? sFlowUrl.replace('{sBrandsId}', userinfo.sBrandsId).replace('{sSubsidiaryId}', userinfo.sSubsidiaryId).replace('{sUserName}', userinfo.sUserName).replace('{sUserId}', userinfo.sId)
    .replace('{token}', token)
    .replace('{ipAddress}', addressStr)
    .replace('{sBillId}', flowHistroyId) : '';

  const handleResizeLayout = (e) => {
    const originX = e.pageX;
    const originWidth = props.treeDiv.getElementsByClassName('listTree-sider')[0].offsetWidth;
    let offset = 0;
    window.onmousemove = function (e2) {
      offset = e2.pageX - originX;
      props.treeDiv.getElementsByClassName('listTree-sider')[0].style.width = `${originWidth + offset}px`;
      props.treeDiv.getElementsByClassName('listTree-content')[0].style.width = `calc(100% - ${originWidth + offset + 10}px)`;
    };
    window.onmouseup = function () {
      window.onmousemove = null;
      window.onmousemove = null;
      localStorage.setItem(`customProductionScheduleTreeWidth_${props.sModelsId}`, originWidth + offset + 10);
    };
  };

  return (
    <Form style={{ height: '100%' }}>
      <Layout style={{ height: '100%' }} className="xly-list">
        {!commonUtils.isEmpty(props.routing) ? '' :
        <Header className={styles.header}>
          <Toolbar {...props} />
        </Header>}
        <Layout className={styles.clayout}>
          <div style={{ maxHeight: '100%', zIndex: 20 }}>
            <SearchComponent {...props} />
          </div>

          <div className="listTree-container">
            <div className="listTree-sider" style={{ width: `${customWidth}px`, marginRight: '10px' }}>
              <div className="resize-controller" onMouseDown={handleResizeLayout} />
              <div className="listTree-sider-title">
                <span>操作</span> &nbsp;&nbsp;&nbsp;&nbsp;
                {/* <img src={leftTreeAddChild} alt="新增节点" width="16px" height="16px" onClick={props.onLeftTreeAddChild} />
                <img src={leftTreeEdit} alt="编辑节点" width="16px" height="16px" onClick={props.onLeftTreeAddEdit} />
                <img src={leftTreeDel} alt="删除节点" width="16px" height="16px" onClick={props.onLeftTreeDel} /> */}
                <Tooltip title="全部展开/全部收起" placement="right">
                  <NodeExpandOutlined style={{ marginLeft: 0 }} onClick={() => { props.onExpandTreeAll(); }} />
                </Tooltip>
              </div>
              <div className="listTree-sider-content">
                <div className="xly-filter-left-tree" ref={(ref) => { props.onSaveTreeRef(ref); }}>
                  <StaticEditTree {...treeProps} />
                </div>

              </div>
            </div>

            <div className="listTree-content" style={{ width: props.slideFlag === 0 ? `calc(100% - ${customWidth}px - 10px)` : 'calc(100%)' }} >
              <Content style={{ height: iHeight || 'auto' }} className={`xly-normal-list ${NoTotalData}`} >
                <StaticEditTable {...tableProps} tableBelone="list" />
              </Content>
            </div>

          </div>


        </Layout>
      </Layout>
      {/* {!commonUtils.isEmpty(props.routing) ? '' : <SlaveMemo {...props} />} */}
      {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
      {true ? '' : <div className="xly-eject"> <a onClick={props.onEject}> <img src={Eject} alt="eject" /></a> </div>}
      {true ? '' :
      <div className="xly-filter-tree">
        <StaticEditTree {...treeProps} />
        <div className="xly-tree-close" >
          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
          <a onClick={props.onEject}> <img src={Close} alt="close" /></a>
        </div>
      </div>
      }
      {
        logVisible ?
          <AntdDraggableModal
            width="1200"
            title="查看操作日志"
            visible={logVisible}
            onCancel={props.onCancelModal.bind(this, 'logVisible')}
            onOk={props.onSelectModal.bind(this, 'logVisible')}
            footer={null}
          >
            <CommonListSelect {...logProps} />
          </AntdDraggableModal> : ''
      }
      {
        props.bDataAuditProgress ?
          <div className="dataAuditProgress">
            <Slider
              min={1}
              max={props.dataAuditProcessMaxValue}
              tooltipVisible
              step={1}
              draggableTrack
              defaultValue={3}
              value={props.dataAuditProcessValue}
            />
          </div> : ''

      }
      {
        commonUtils.isNotEmptyObject(slaveConfig) &&
        slaveConfig.sTbName === 'sys_workorder' &&
        props.bMin &&
        <Button
          style={{
            position: 'absolute',
            left: 0,
            top: '78%',
            background:
              '#ff822d',
            borderColor:
              '#ff822d',
          }}
          type="primary"
          shape="circle"
          size="large"
          onClick={() => {
            props.onSaveState({ bMin: false });
            if (window.setBMin) {
              window.setBMin(false);
            }
          }}
        >
          <MessageOutlined />
        </Button>
      }
      {
        props.workOrderSystemAddModalVisible &&
        <AntdDraggableModal
          width="70%"
          title={
            /* eslint-disable */
            <>
              <span>新增</span>
              <Button
                type="link"
                style={{
                  position: 'absolute',
                  right: 30,
                  top: 6,
                  color: '#4a495f',
                }}
                onClick={() => {
                  props.onSaveState({ bMin: true });
                }}
              >
                <MinusOutlined />
              </Button>
            </>
            /* eslint-enable */
          }
          style={{ top: 10 }}
          className={styles.workOrderSystemModal}
          visible={props.workOrderSystemAddModalVisible && !props.bMin}
          onCancel={props.onCancelModal.bind(this, 'workOrderSystemAddModalVisible')}
          onOk={props.onSelectModal.bind(this, 'workOrderSystemAddModalVisible')}
          footer={null}
        >
          <WorkOrderSystemAddModal {...workOrderSystemAddProps} />
        </AntdDraggableModal>
      }
      {
        props.workOrderSystemDetailModalVisible &&
        <AntdDraggableModal
          width="70%"
          title={workOrderSystemDetailTitle}
          style={{ top: 10 }}
          className={styles.workOrderSystemModal}
          visible={props.workOrderSystemDetailModalVisible && !props.bMin}
          onCancel={props.onCancelModal.bind(this, 'workOrderSystemDetailModalVisible')}
          onOk={props.onSelectModal.bind(this, 'workOrderSystemDetailModalVisible')}
          footer={null}
        >
          <WorkOrderSystemDetailModal {...workOrderSystemDetailProps} />
        </AntdDraggableModal>
      }
      {
        flowHistroyVisible ?
          <AntdDraggableModal
            width="90%"
            title="审批历史"
            visible={props.flowHistroyVisible}
            onCancel={props.onCancelModal.bind(this, 'flowHistroyVisible')}
            onOk={props.onCancelModal.bind(this, 'flowHistroyVisible')}
            footer={null}
          >
            {/* eslint-disable-next-line jsx-a11y/iframe-has-title */}
            <iframe src={flowHistrory} style={{ width: '100%', height: '550px' }} frameBorder="0" />
            {/* <div id="strToLabel" dangerouslySetInnerHTML={{ __html: flowHistroryData }} /> */}
          </AntdDraggableModal> : ''
      }
      {
        leftTreeNodeVisible ?
          <AntdDraggableModal
            bodyStyle={{
 paddingBottom: 0, height: 100, maxHeight: 460, zIndex: 2000,
}}
            width={800}
            title={leftTreeNodeTitle}
            visible={leftTreeNodeVisible}
            onCancel={props.onCancelModal.bind(this, 'leftTreeNodeVisible')}
            onOk={props.onLeftTreeNodeOk}
          >
            <div id="searchColumn" >
              <Input addonBefore="节点名字" id="treeNodeName" disabled={false} defaultValue={leftTreeNodeName} />
            </div>
          </AntdDraggableModal> : ''
      }
    </Form>
  );
});

export default CommonBase(CommonListEvent(CommonList));