/*
 * Create:      柿子
 * CreateDate:  2022/10/09
 * Describe：   界面动态配置-界面参数维护
 * */
import React, { Component } from 'react';
import { Row, Col, Input, Button, message, Card, Tooltip, Icon, Modal, Empty } from 'antd';
import { Util } from 'tools';
import store from 'store';
import PublicTablePagination from 'pages/common/PubilcTablePagination';
import PublicModalFormHooks from 'pages/common/PublicModalFormHooks';
import DynamicRenderingForm from 'pages/common/DynamicRenderingForm';
import InterfaceLoading from 'pages/menuManagement/component/InterfaceLoading';
import iconListVisits from 'assets/images/icon_listvisits.png';
import './style/index.less';

class InterfaceParameterMaintenance extends Component {
  constructor(props) {
    super(props);
    let userData = React.$getSessionData();
    this.state = {
      userData,
      selectData: {},
      code: undefined,
      describe: undefined,
      page: 1,
      pageSize: 20,
      total: 0,
      loading: false,
      tableWidth: 650,
      tableData: [],
      columns: [],
      formData: [],
      rowID: '',
      rowData: {},
      saveReroce: {}, // 点击编辑存储行数据
      interfaceTypeSelectData: [{
        id: 'singleTable',
        descripts: '单表操作',
        descriptsSPCode: 'DBCZ',
        linkAddress: '../pages/dynamicComponent/SingleTableOperation.jsx',
        params: 'params=interfaceType:singleTable&componentName:MenuDetailMaintenance&queryCode:2301&recordID:ID&isRowClick:Y&addCode:2302&editCode:2303&deleteCode:2304',
        introduceDesc: '查询条件，列表信息可动态配置。新增、编辑和删除根据维护的对应接口代码展示对应按钮。'
      }, {
        id: 'parentChildTable',
        descripts: '父子表操作',
        descriptsSPCode: 'FZBZSGC',
        linkAddress: '../pages/dynamicComponent/ParentChildTableOperation.jsx',
        params: 'params=interfaceType:parentChildTable&selectCode:01040252&componentName:HospitalGroupMaintenance&queryCode:01040253&childQueryCode:01040255&recordID:hospGroupID&childRecordID:hospGroupLinkID&childComponentNameForm:HospitalGroupMDetailForm&childRowClick:Y&addCode:01040254&childAddCode:01040256&cardDesc:医院组列表&childCadDesc:医院组详细列表&interfaceTypeDesc:父子表操作',
        introduceDesc: '包括查询条件，列表信息，新增按钮等功能都是可动态配置的。'
      }, {
        id: 'warehouseVP',
        descripts: '采购制单样式',
        descriptsSPCode: 'CGZD',
        linkAddress: '../pages/dynamicComponent/InventoryManagement.jsx',
        params: 'params=interfaceType:warehouseVP&selectCode:17060033&cardTitle:采购计划&detailCardTitle:采购明细&componentName:IMProcurementPlan&queryCode:17060035&queryDetailCode:17060036&idIndex:optPurPlanID&detailIDIndex:optPurPlanDetailID&deleteCode:17060038&saveCode:17060037&revokeCode:17060039&auxiliaryModalCode:17060034&groupType:H&auditBtnTitle:完成&revokeBtnTitle:撤销完成&auxiliaryBtnTitle:选择订单&orderModalType:purPlan&auxiliaryLocIDIndex:locID&stepsFlag:Y&scanningInputFlag:N&detailRowClickFlag:N&totalAmountFlag:Y&entrySequenceBtnFlag:Y&addBtnFlag:Y&printBtnFlag:N&operationFixedFlag:Y&interfaceTypeDesc:采购制单样式',
        introduceDesc: '包括查询条件，表单录入数据等界面上能看到的都可动态配置。'
      }, {
        id: 'voucherPreparation',
        descripts: '入库制单样式',
        descriptsSPCode: 'RKZD',
        linkAddress: '../pages/dynamicComponent/NewVoucherPreparation.jsx',
        params: 'params=interfaceType:voucherPreparation&selectCode:17030029&cardTitle:入库制单&detailCardTitle:入库明细&componentName:NVPReceiptVP&queryCode:17030030&queryDetailCode:17030031&idIndex:metStkRecID&detailIDIndex:metStkRecDetailID&deleteCode:17030035&saveCode:17030032&revokeCode:17030050&auxiliaryBtnTitle:依据订单&scanningPlaceholder:扫码入库&orderModalType:InOperate&auxiliaryLocIDIndex:locID&stateSpreadingFlag:N&auxiliaryBtnFlag:Y&totalAmountFlag:Y&entrySequenceBtnFlag:Y&addBtnFlag:Y&interfaceTypeDesc:入库制单样式',
        introduceDesc: '包括查询条件，表单录入数据等界面上能看到的都可动态配置。'
      }, {
        id: 'orderReview',
        descripts: '上下列表或单列表操作样式(订单审核样式)',
        descriptsSPCode: 'DDSH',
        linkAddress: '../pages/dynamicComponent/OrderReviewComponent.jsx',
        params: 'params=interfaceType:orderReview&selectCode:17060064&componentName:HospitalReturnReview&detailComponentName:VisualReturnReviewDetail&queryCode:17060071&queryDetailCode:17060072&idIndex:returnHandleID&detailIDIndex:returnHandleDetailID&cardTitle:退货单列表&examineCode:17060073&currentAuditStatus:20&groupType:H&defaultPageSize:10&isShowDetailTable:Y&operationFixedFlag:N&detailPaginationFlag:Y&auditBtnFlag:Y&batchAuditBtnFlag:Y&independentQueryConditions:N&interfaceTypeDesc:订单审核样式',
        introduceDesc: '支持上下父子列表结构，支持单表查询加操作列表结构。包括查询条件，表单录入数据等界面上能看到的都可动态配置。'
      }, {
        id: 'leftConditionRightList',
        descripts: '查询导出(左右结构)',
        descriptsSPCode: 'CXDC_ZYJG',
        linkAddress: '../pages/dynamicComponent/LeftConditionRightList.jsx',
        params: 'params=interfaceType:orderReview&selectCode:17060064&componentName:HospitalReturnReview&detailComponentName:VisualReturnReviewDetail&queryCode:17060071&queryDetailCode:17060072&idIndex:returnHandleID&detailIDIndex:returnHandleDetailID&cardTitle:退货单列表&examineCode:17060073&currentAuditStatus:20&groupType:H&defaultPageSize:10&isShowDetailTable:Y&operationFixedFlag:N&detailPaginationFlag:Y&auditBtnFlag:Y&batchAuditBtnFlag:Y&independentQueryConditions:N&interfaceTypeDesc:订单审核样式',
        introduceDesc: '包括查询条件，表单录入数据等界面上能看到的都可动态配置。'
      }, {
        id: 'leftConditionRightReports',
        descripts: '左侧条件右侧报表(左右结构)',
        descriptsSPCode: 'ZCTJYCBB_ZYJG',
        linkAddress: '../pages/dynamicComponent/LeftConditionRightReports.jsx',
        params: 'params=interfaceType:leftConditionRightReports&selectCode:123&componentName:OptometryReceiptSummary&raqName:123&queryCode:123&rightCardTitle:none&interfaceTypeDesc:左侧条件右侧报表(左右结构)',
        introduceDesc: '包括查询条件，表单录入数据等界面上能看到的都可动态配置。'
      }, {
        id: 'other',
        descripts: '其他',
        descriptsSPCode: 'QT',
      }],
      paramFormData: [],
      configFormData: [],
      configReroce: {}
    };
    this.staticColumns = [{
      key: 1,
      title: '代码',
      dataIndex: 'Code',
      align: 'center',
      width: 150
    }, {
      key: 2,
      title: '描述',
      dataIndex: 'Descripts',
      align: 'center',
      width: 200
    }, {
      key: 3,
      title: '英文描述',
      dataIndex: 'ENDesc',
      align: 'center',
      width: 300
    }, {
      key: 4,
      title: '界面类型',
      dataIndex: 'interfaceType',
      align: 'center',
      width: 150
    }];
  }

  componentDidMount() {
    this.getColumnsData();
    this.getTableData();
    this.getConfigFormData();
    this.getSelectData();
  }

  componentWillUnmount() {
    // 组件销毁前将静止让setState修改state的状态
    this.setState = (state, callback) => { return; }
  }

  // 获取产品分类下拉数据
  getSelectData = async () => {
    try {
      let res = await React.$asyncPost(this, '2308');
      let selectData = {
        productCat: res.result
      };
      this.setState({ selectData });
    } catch (error) {
      this.setState({ selectData: {} });
    }
  }

  // 获取表头数据
  getColumnsData = async () => {
    try {
      let { interfaceTypeSelectData } = this.state;
      let data = {
        params: [{
          type: 'C',
          compontName: 'InterfaceParameterMaintenance',
        }]
      }
      let res = await React.$asyncPost(this, '01040073', data);
      let columns = res.result && 'C' in res.result && Array.isArray(res.result.C) ? res.result.C : [];
      if (columns && columns.length > 0) {
        columns = columns.map(item => {
          return {
            ...item,
            render: (text, record) => {
              if (item.dataIndex === 'interfaceType') {
                let interfaceTypeTitle = Util.returnDataCccordingToAttributes(interfaceTypeSelectData, record.interfaceType)?.descripts || '其他';
                return (
                  <Tooltip title={interfaceTypeTitle}>
                    <span className="ellipsis" style={{ width: '100%', display: 'block' }}>{interfaceTypeTitle}</span>
                  </Tooltip>
                )
              } else {
                return (
                  <Tooltip title={text}>
                    <span className="ellipsis" style={{ width: '100%', display: 'block' }}>{text}</span>
                  </Tooltip>
                )
              }
            }
          }
        })
        this.setState({ columns, tableWidth: res.totalWidth });
      }
      // 表单操作数据
      let formData = res.result && res.result.formData && res.result.formData.length > 0 ? res.result.formData : [];
      if (formData && formData.length > 0) {
        for (var i = 0; i < formData.length; i++) {
          if (formData[i].dataIndex === 'interfaceType') {
            formData[i].detailItem = interfaceTypeSelectData;
            formData[i].defaultValue = formData[i]?.default || 'singleTable';
            formData[i].callBackResult = 'Fn';
            formData[i].changeCallBack = this.handleInterfaceTypeChange;
            formData[i].leftCol = 24;
            formData[i].rightCol = 0;
            formData[i].btnRender = (
              <Button
                type="link"
                style={{ position: 'absolute', right: '-58px', top: '4px' }}
                onClick={this.handleLookUp}
              >
                预览
              </Button>
            )
          }
        }
        this.setState({ formData });
      }
    } catch (error) {
      console.log(error)
    }
  }

  // 界面类型change事件
  handleInterfaceTypeChange = (e) => {
    if (e !== 'other') {
      this.handleModifyLinkAddress();
    } else {
      this.handleModifyLinkAddress('Y');
    }
  }

  // 参数配置弹窗
  getConfigFormData = async () => {
    try {
      let data = {
        params: [{
          type: 'C',
          compontName: 'IPMConfigFormData',
        }]
      }
      let res = await React.$asyncPost(this, '01040073', data);
      // 表单操作数据
      let formData = res.result && res.result.formData && res.result.formData.length > 0 ? res.result.formData : [];
      if (formData && formData.length > 0) {
        for (var i = 0; i < formData.length; i++) {
          formData[i].defaultValue = formData[i]?.default || undefined
        }
        this.setState({ configFormData: formData });
      }
    } catch (error) {
      this.setState({ configFormData: [] })
    }
  }

  // 查询
  handleQuery = () => {
    this.setState({ page: 1 }, () => {
      this.getTableData('Y');
    })
  }

  // 提供修改page和pageSize的回调函数
  compilePage = (page, pageSize) => {
    this.setState({ page, pageSize }, () => {
      this.getTableData('Y');
    })
  }

  // 获取列表数据
  getTableData = async (isClear) => {
    try {
      this.setState({ loading: true });
      const { page, pageSize, code, describe } = this.state;
      let data = {
        params: [{
          Code: code,
          Descripts: describe
        }],
        pagination: [{
          pageSize,
          currentPage: page,
        }]
      };
      let res = await React.$asyncPost(this, '2301', data);
      let tableData = res.result?.Data || [];
      for (var i = 0; i < tableData.length; i++) {
        tableData[i].key = i + 1;
        tableData[i].productCatID = tableData[i]?.ProductCatDr || undefined; // 产品分类
        tableData[i].productModuleID = tableData[i]?.ProductModuleDr || undefined; // 产品模块
      }
      this.setState({ tableData: this.filterTableData(tableData), total: res.result?.TotalCount || 0, loading: false }, () => {
        isClear === 'Y' ? this.resetFields() : '';
      });
    } catch (error) {
      this.setState({ tableData: [], total: 0, loading: false }, () => {
        isClear === 'Y' ? this.resetFields() : '';
      });
    }
  }

  // 处理列表数据 - params=componentName:ReturnVoucherPreparation&selectCode:17060001&queryCode:17033004&idIndex:adjID&queryDetailCode:17030031&modalTableName:ReceiptVPModalTable
  filterTableData = (data) => {
    if (data && Array.isArray(data) && data.length > 0) {
      return data.map((item, index) => {
        return {
          ...item,
          key: index,
          ...this.getValueByParas(item.Paras),
        }
      })
    } else {
      return [];
    }
  }

  // 解析参数 - interfaceType - 界面类型(单表增删改查:singleTable/parentChildTable)
  getValueByParas = (params) => {
    let paramObj = {};
    let formData = [];
    try {
      if (params && params.indexOf('=') > -1) { // 动态配置界面params=
        let equalSplit = params.split('=');
        let equalSignKey = equalSplit[0];
        let urlStr = equalSplit[1];
        paramObj.equalSignKey = equalSignKey;
        if (urlStr && urlStr.indexOf('&') > -1) {
          let paramsData = urlStr.split('&');
          for (let i = 0; i < paramsData.length; i++) {
            if (paramsData[i].indexOf(':') > -1) {
              let key = paramsData[i].split(':')[0];
              let value = paramsData[i].split(':')[1];
              paramObj[key] = value;
              formData.push({
                title: key,
                dataIndex: key,
                typeCode: 'Input',
                col: 24,
                labelCol: 5,
                wrapperCol: 16
              })
            }
          }
        } else if (urlStr && urlStr.indexOf(':') > -1) {
          let key = urlStr.split(':')[0];
          let value = urlStr.split(':')[1];
          paramObj[key] = value;
          formData.push({
            title: key,
            dataIndex: key,
            typeCode: 'Input',
            col: 24,
            labelCol: 5,
            wrapperCol: 16
          })
        } else {
          formData.push({
            title: equalSignKey,
            dataIndex: urlStr,
            typeCode: 'Input',
            col: 24,
            labelCol: 5,
            wrapperCol: 16
          })
        }
      }
    } catch (error) {
      console.log(error)
    }
    return { ...paramObj, interfaceType: paramObj?.interfaceType || 'other', paramFormData: formData };
  }

  // 操作行
  onClickRowPublic = (record) => {
    return {
      // 单击行选中
      onClick: () => {
        if (this.state.rowID === '' || (this.state.rowID && this.state.rowID !== record.ID)) {
          // 保存行数据以及ID
          this.setState({ rowID: record.ID, rowData: { ...record } }, () => {
            this.getFormData();
          });
        } else {
          this.resetFields();
        }
      }
    }
  }

  // 修改链接地址显隐状态
  handleModifyLinkAddress = (display = 'N') => {
    let { formData } = this.state;
    for (var i = 0; i < formData.length; i++) {
      if (formData[i].dataIndex === 'LinkAddress') {
        formData[i].display = display;
        break;
      }
    }
    this.setState({});
  }

  // 获取表单数据
  getFormData = async () => {
    try {
      let { rowData, interfaceTypeSelectData } = this.state;
      let interfaceType = rowData && 'interfaceType' in rowData && rowData.interfaceType ? rowData.interfaceType : '';
      let oldFormData = this[rowData.interfaceType + 'FormData'] || []; // 获取历史表单数据，防止重复接口获取
      if (interfaceType !== 'other' && !(oldFormData && oldFormData.length > 0)) {
        let data = {
          params: [{
            type: 'C',
            compontName: rowData.interfaceType + 'FormData',
          }]
        }
        let res = await React.$asyncPost(this, '01040073', data);
        // 表单操作数据
        let formData = res.result && res.result.formData && res.result.formData.length > 0 ? res.result.formData : [];
        if (formData && formData.length > 0) {
          for (var i = 0; i < formData.length; i++) {
            if (formData[i].dataIndex === 'interfaceType') {
              formData[i].detailItem = interfaceTypeSelectData;
            }
          }
        }
        this[rowData.interfaceType + 'FormData'] = formData;
        this.setState({ paramFormData: formData });
      } else {
        this.setState({ paramFormData: oldFormData && oldFormData.length > 0 ? oldFormData : (rowData?.paramFormData || []) })
      }
    } catch (error) {
      this.setState({ paramFormData: [] })
    }
  }

  // 选中行操作
  setRowClassNamePublic = (record) => {
    return record.ID === this.state.rowID ? 'clickRowStyle' : '';
  }

  // 重置表单
  resetFields = () => {
    let { rowID } = this.state;
    if (rowID) {
      this.setState({ rowID: '' });
    }
    this.setState({ rowData: {} }, () => {
      this.paramFormRef && this.paramFormRef.resetFields && this.paramFormRef.resetFields();
    })
  }

  // 记录表单的值
  recordFormInput = (record, dataIndex) => {
    this.state[dataIndex] = { ...this.state[dataIndex], ...record }
    this.setState({});
  }

  // 保存
  handleSave = values => {
    let { saveReroce } = this.state;
    let ID = saveReroce && 'ID' in saveReroce && saveReroce.ID ? saveReroce.ID : undefined;
    let interfaceType = values && 'interfaceType' in values && values.interfaceType ? values.interfaceType : '';
    if (ID && saveReroce && 'interfaceType' in saveReroce && saveReroce.interfaceType && saveReroce.interfaceType !== interfaceType) {
      Modal.confirm({
        title: '界面类型变动提醒',
        content: '界面类型修改后原有配置的参数将不保存，确定修改吗？',
        okText: '确定',
        cancelText: '取消',
        onOk: () => this.handleConfirmSave(values, 'Y'),
        onCancel: () => { },
      });
    } else {
      this.handleConfirmSave(values, 'Y');
    }
  }

  // 确定保存
  handleConfirmSave = async (values, isModifyParas, paramsVal, isClear = 'Y') => {
    try {
      let { saveReroce, userData, interfaceTypeSelectData, rowID } = this.state;
      let ID = saveReroce && 'ID' in saveReroce && saveReroce.ID ? saveReroce.ID : (paramsVal ? rowID : undefined);
      let interfaceType = values && 'interfaceType' in values && values.interfaceType ? values.interfaceType : '';
      let data = {
        params: [{
          ...values,
          ID,
          MenuGroup: 'N',
          UpdateUserDr: userData?.userID || '',
          LinkAddress: interfaceType !== 'other' ? (Util.returnDataCccordingToAttributes(interfaceTypeSelectData, interfaceType)?.linkAddress || saveReroce.LinkAddress) : saveReroce.LinkAddress,
          Paras: paramsVal ? paramsVal : isModifyParas !== 'Y' ? saveReroce.Paras : (interfaceType !== 'other' ? 'params=interfaceType:' + interfaceType : ''),
        }]
      }
      let res = await React.$asyncPost(this, ID ? '2303' : '2302', data);
      message.success(res.errorMessage ? res.errorMessage : '保存成功');
      this.modalFormRef && this.modalFormRef.modifyVisible(false, 'Y');
      this.setState({ saveReroce: {} }, () => {
        this.getTableData(isClear);
      });
    } catch (error) {
      console.log(error);
    }
  }

  // 新增
  handleAdd = () => {
    let { saveReroce } = this.state;
    if (saveReroce && 'ID' in saveReroce && saveReroce.ID) {
      this.setState({ saveReroce: {} }, () => {
        this.handleModifyLinkAddress();
      })
    }
    this.modalFormRef && this.modalFormRef.modifyVisible(true);
  }

  // 编辑
  handleModify = (record, e) => {
    e?.stopPropagation();
    if (record && 'interfaceType' in record && record.interfaceType !== 'other') {
      this.handleModifyLinkAddress();
    } else {
      this.handleModifyLinkAddress('Y');
    }
    this.setState({ saveReroce: record }, () => {
      this.modalFormRef && this.modalFormRef.modifyVisible(true);
    })
  }

  // 参数保存
  handleParamSave = async () => {
    try {
      let { rowData, paramFormData } = this.state;
      let values = await this.paramFormRef.handleSave();
      if (!values?.error) {
        let equalSignKey = (rowData?.equalSignKey || 'params')
        let paramsVal = equalSignKey + '=';
        for (var keys in values) {
          let val = values[keys]
          if (paramFormData && paramFormData.length === 1 && equalSignKey === keys) { // 只存在一个等号的情况
            paramsVal += val
          } else if (values && val) {
            paramsVal += keys + ':' + val + '&'
          }
        }
        let endStr = paramsVal.slice(paramsVal.length - 1);
        if (endStr === '&') { // 截取最后一个&
          paramsVal = paramsVal.slice(0, paramsVal.length - 1)
        }
        this.handleConfirmSave(rowData, '', paramsVal, 'N');
      }
    } catch (error) {
      console.log(error)
    }
  }

  // 添加参数
  handleAddParams = () => {
    this.configFormRef && this.configFormRef.modifyVisible(true);
  }

  // 保存参数
  handleConfigSave = values => {
    let { paramFormData } = this.state;
    paramFormData.push({ ...values, typeCode: 'Input' });
    this.setState({}, () => {
      this.configFormRef && this.configFormRef.modifyVisible(false, 'Y');
    });
  }

  // 查看界面轮廓
  handleLookUp = () => {
    const { interfaceTypeSelectData } = this.state;
    let values = this.modalFormRef && this.modalFormRef.getFieldsValue();
    if (values && 'interfaceType' in values && values.interfaceType) {
      let record = Util.returnDataCccordingToAttributes(interfaceTypeSelectData, values.interfaceType);
      if (record && 'params' in record && record.params) {
        let linkAddress = record?.linkAddress || '';
        let linkAddressSplit = linkAddress && linkAddress.indexOf('/') > -1 ? linkAddress.split('/') : [];
        let componentName = linkAddressSplit && linkAddressSplit.length > 0 ? linkAddressSplit[linkAddressSplit.length - 1] : '';
        let sessionKey = componentName && componentName.indexOf('.') > -1 ? componentName.split('.')[0] : componentName;
        React.$setSessionData(sessionKey, record.params, false);
        this.setState({ lookUpSessionkey: sessionKey });
        linkAddress = linkAddress.indexOf('../') > -1 ? linkAddress.split('../')[1] : linkAddress;
        this.interfaceRef && this.interfaceRef.modifyVisible(true, linkAddress, record?.descripts || '', record?.params || '', record);
      } else {
        message.info(values.interfaceTypeDesc + '暂未维护预览界面，如带来不便敬请谅解！');
      }
    } else {
      message.error('请选择需要预览的界面');
    }
  }

  // 清除查看数据
  clearLookUpSessionData = () => {
    const { lookUpSessionkey } = this.state;
    React.$removeSessionData(lookUpSessionkey);
  }

  render() {
    const { selectData, code, describe, page, total, loading, tableWidth, tableData, columns, formData, saveReroce, paramFormData, rowID, rowData, configFormData, configReroce } = this.state;
    let operation = {
      title: '操作',
      dataIndex: 'operation',
      align: 'center',
      fixed: 'right',
      width: 80,
      render: (text, record) => (
        <span>
          <Icon type="edit" style={{ color: '#108EE9' }}></Icon>
          <span className="span" onClick={(e) => this.handleModify(record, e)}>编辑</span>
        </span>
      ),
    };
    // 组件所需参数
    let param = {
      page, // 当前页数
      total, // 数据总条数
      loading,
      pageSize: '20',
      x: tableWidth, // 表格的宽度
      data: tableData, // 表格数据
      componentName: 'InterfaceParameterMaintenance',
      y: store.getState().tableHeight.y + 22,
      height: store.getState().tableHeight.y + 72 + 'px',
      // 表头配置
      columns: columns && columns.length > 0 ? [...columns, operation] : [...this.staticColumns, operation],
    }
    return (
      <div className="interface-parameter-maintenance">
        <Row className="common-query-header">
          <Col span={18}>
            代码：<Input
              value={code}
              className="common-query-input"
              title="输入内容后可回车检索"
              placeholder="请输入( Enter )"
              onPressEnter={this.handleQuery}
              onChange={Util.commonInputChange.bind(this, 'code')}
            />
            描述：<Input
              value={describe}
              className="common-query-input"
              title="输入内容后可回车检索"
              placeholder="请输入( Enter )"
              onPressEnter={this.handleQuery}
              onChange={Util.commonInputChange.bind(this, 'describe')}
            />
            <Button onClick={this.handleQuery}>查询</Button>
          </Col>
          <Col span={6} style={{ textAlign: 'right' }}>
            <Button
              icon="plus"
              className="add-btn add-btn-nohover"
              onClick={this.handleAdd}
            >
              新增界面
            </Button>
          </Col>
        </Row>
        <div className="common-query-split-line" style={{ height: 8 }}></div>
        <Row>
          <Col span={12}>
            <div className="table-body-height" style={{ paddingRight: '8px', position: 'relative' }}>
              <Card
                size="small"
                bordered={false}
                title={(
                  <div className="common-card-title-img">
                    <img src={iconListVisits} alt="" />
                    动态界面列表
                  </div>
                )}
              >
                <PublicTablePagination
                  param={param}
                  compilePage={this.compilePage}
                  getColumns={this.getColumnsData}
                  onClickRowPublic={this.onClickRowPublic}
                  setRowClassNamePublic={this.setRowClassNamePublic}
                />
              </Card>
              <div className='common-card-right-split-line' style={{ width: 8 }}></div>
            </div>
          </Col>
          <Col span={12} className="ipm-right-col">
            <Card
              size="small"
              bordered={false}
              title={(
                <div className="common-card-title-img">
                  <img src={iconListVisits} alt="" />
                  参数配置
                </div>
              )}
            // extra={(
            //   <Button disabled={!(rowData && 'interfaceType' in rowData && rowData.interfaceType === 'other')} type="link" onClick={this.handleAddParams}>添加参数</Button>
            // )}
            >
              <div style={{ height: rowID && paramFormData && paramFormData.length > 0 && rowData?.interfaceType !== 'other' ? store.getState().tableHeight.y + 110 + 'px' : 'auto' }}>
                <div style={{ height: 'calc(100% - 46px)', paddingBottom: '6px', display: rowID && paramFormData && paramFormData.length > 0 && rowData?.interfaceType !== 'other' ? 'block' : 'none' }}>
                  <div className="scroll-bar-style" style={{ height: '100%', overflow: 'auto' }}>
                    <DynamicRenderingForm
                      isEnterJump='Y'
                      rowData={rowData}
                      formData={rowID && rowData?.interfaceType !== 'other' ? paramFormData : []}
                      onRef={ref => this.paramFormRef = ref}
                    />
                  </div>
                </div>
                {rowID && paramFormData && paramFormData.length > 0 && rowData?.interfaceType !== 'other' ? (
                  <div className="flex-center" style={{ paddingTop: '12px', borderTop: '1px solid #e8e8e8' }}>
                    <Button style={{ marginRight: '24px' }} onClick={this.resetFields}>{rowID ? '取消修改' : '重置'}</Button>
                    <Button type='primary' onClick={this.handleParamSave}>{rowID ? '确认修改' : '保存'}</Button>
                  </div>
                ) : <Empty style={{ marginTop: 200 }} description={rowData?.interfaceType !== 'other' ? '请选中左侧列表维护对应的配置' : ((rowData?.Descripts || '') + '不是可配置界面，暂不支持配置参数！')} />}
              </div>
            </Card>
          </Col>
        </Row>

        {/* 新增菜单 */}
        <PublicModalFormHooks
          // maskClosable={false}
          onRef={ref => this.modalFormRef = ref}
          formData={formData}
          rowData={saveReroce}
          selectData={selectData}
          recordFormInput={(record) => this.recordFormInput(record, 'saveReroce')}
          handleSave={this.handleSave}
        />

        {/* 新增配置 */}
        <PublicModalFormHooks
          onRef={ref => this.configFormRef = ref}
          formData={configFormData}
          rowData={configReroce}
          recordFormInput={(record) => this.recordFormInput(record, 'configReroce')}
          handleSave={this.handleConfigSave}
        />

        {/* 查看界面轮廓 */}
        <InterfaceLoading onRef={ref => this.interfaceRef = ref} clearSessionData={this.clearLookUpSessionData} />
      </div>
    )
  }
};

export default InterfaceParameterMaintenance;