/* eslint-disable */
import React, { Component } from 'react';
import { MinusCircleOutlined, PlusOutlined, SettingOutlined } from '@ant-design/icons';
import { Form, Icon as LegacyIcon } from '@ant-design/compatible';
// import '@ant-design/compatible/assets/index.css';
import { Row, Col, Button, message, Space } from 'antd-v4';
import moment from 'moment';
import commonConfig from '@/utils/config';
import * as commonUtils from '@/utils/utils';
import * as commonFunc from '@/components/Common/commonFunc';
import * as commonServices from '@/services/services';
import ShowType from '@/components/Common/CommonComponent';
import StaticEditTable from '@/components//Common/CommonTable';
import * as commonBusiness from '@/components/Common/commonBusiness';/* 单据业务功能 */
import AntdDraggableModal from '@/components/Common/AntdDraggableModal';
import styles from './index.less';
import SvgIcon from "../../SvgIcon";

const FormItem = Form.Item;

export default class SearchComponent extends Component {
  constructor(props) {
    super(props);
    this.sDateFormat = 'YYYY-MM-DD';
  }

  async componentWillMount(sSearchSolutionId) {
    const { token, sModelsId, formSrcRoute, sModelsType, app} = this.props;
    const dataUrl = `${commonConfig.server_host}syssearch/getSyssearchData/${sModelsId}?sModelsId=${sModelsId}&sName=${formSrcRoute}`; /* 获取快捷查找方案 */
    const dataReturn = (await commonServices.getService(token, dataUrl)).data;
    if (dataReturn.code === 1) {
      const returnData = dataReturn.dataset.rows;
      let addState = {};
      if (!commonUtils.isEmpty(sSearchSolutionId)) { // 保存后重新获取快捷查找，直接默认到最新
        const { masterData, searchRowKeys } = this.props;
        masterData.sSearchSolutionId = sSearchSolutionId;
        masterData.bCheck = true; // 为了复制到
        masterData.sSolutionName = returnData.filter(item => item.sId === sSearchSolutionId)[0].sName;
        if (commonUtils.isNotEmptyArr(searchRowKeys)) {
          searchRowKeys.forEach((item) => {
            masterData[`${item}disabled`] = false;
          });
        }
        addState.masterData = masterData;
        addState.modalVisible = false;
        addState.modalSolutionNameVisible = false;
      } else if (commonUtils.isNotEmptyArr(returnData)) { /* 初始化默认查询方案的参数 */
        const iIndex = returnData.findIndex(item => item.bDefault);
        const defaultSearchSolution = iIndex > -1 ? returnData[iIndex] : returnData[0];
        addState = await this.defaultSearchSolution(defaultSearchSolution);
        if(commonUtils.isNotEmptyArr(addState.newFilterCondition)) {
          const newFilterConditionStr = JSON.stringify(addState.newFilterCondition) ;
          const newConditionStr = JSON.stringify(defaultSearchSolution.sCondition) ;
          if(commonUtils.isNotEmptyObject(newFilterConditionStr) && commonUtils.isNotEmptyObject(newConditionStr)){
            if(newFilterConditionStr !== defaultSearchSolution.sCondition){
              returnData[0].sCondition = newFilterConditionStr;
            }
          }
        }
      }
      this.props.onSaveState({ sGroupByList: addState.sGroupByList, searchSolution: returnData, ...addState });
    } else {
      this.props.getServiceError(dataReturn);
    }
  }

  async componentWillReceiveProps(nextProps) {
    const {
      formData, slaveConfig, bSearchConfig, searchSolution,
    } = nextProps;
    let {
      searchColumns, searchRowKeys, masterData,
    } = nextProps;
    const { sModelsType } = nextProps;
    if (commonUtils.isEmptyArr(searchColumns) && formData.length > 0 && !bSearchConfig && slaveConfig) {
      const findFilter = commonFunc.getConfigFieldNameData(slaveConfig, 'bFind');
      searchColumns = [];
      findFilter.forEach((item) => {
        searchColumns.push({
          sValue: item.showName, sId: item.sName, sDropDownType: item.sDropDownType, showDropDown: item.showDropDown, sConfigId: item.sId, sAssignField: item.sAssignField,
          sSqlCondition: item.sSqlCondition,
        });
      });
      let addState;
      if (commonUtils.isEmptyArr(searchRowKeys)) { /* 初始化没有默认方案时的 默认查询值 */
        searchRowKeys = [];
        if (commonUtils.isNotEmptyArr(searchColumns)) {
          const key = commonUtils.createSid();
          searchRowKeys.push(key);
          masterData = commonUtils.isEmptyObject(masterData) ? (sModelsType === 'commonClassify' ? { bCheck: false } : { bCheck: true }) : masterData;
          const sFirstValue = searchColumns[0].sId;
          masterData[`sFirst-${key}`] = searchColumns[0].sId;
          const firstDataIndex = commonUtils.isEmpty(sFirstValue) ? 's' : sFirstValue.substring(0, 1) === 't' ? 'p' : sFirstValue.substring(0, 1);
          masterData[`sSecond-${key}`] = commonConfig.seaJudge[firstDataIndex][0].sId;
        }
      } else {
        addState = await this.defaultSearchSolution(searchSolution[0]);
      }
      this.props.onSaveState({
        searchColumns, searchRowKeys, masterData, bSearchConfig: true, ...addState,
      });
    }
    const { masterConfig, app } = nextProps;
    if (commonUtils.isNotEmptyObject(masterConfig)) {
      let { searchColumnShowColumn } = nextProps;
      if (commonUtils.isEmptyArr(searchColumnShowColumn)) {
        const searchColumnShowConfig = {};
        const columniOrder = commonFunc.showMessage(app.commonConst, 'columniOrder');/* 排序 */
        const columnShowName = commonFunc.showMessage(app.commonConst, 'columnShowName');/* 显示名 */
        const columniFitWidth = commonFunc.showMessage(app.commonConst, 'columniFitWidth');/* 宽度 */
        const columnbVisible = commonFunc.showMessage(app.commonConst, 'columnbVisible');/* 是否显示 */
        const columnChinese = commonFunc.showMessage(app.commonConst, 'columnChinese');/* 中文 */
        const columnEnglish = commonFunc.showMessage(app.commonConst, 'columnEnglish');/* 英文 */
        const columnBig5 = commonFunc.showMessage(app.commonConst, 'columnBig5');/* 繁体 */
        const columnsType = commonFunc.showMessage(app.commonConst, 'columnsType');/* 汇总类型 */
        const columnSQL = commonFunc.showMessage(app.commonConst, 'columnSQL');/* SQL语句 */
        searchColumnShowConfig.gdsconfigformslave = [
          {
            bVisible: false,
            sName: 'sId',
            bNotEmpty: true,
            showName: 'sId',
          }, {
            bVisible: true,
            sName: 'iOrder',
            bNotEmpty: true,
            showName: '排序',
          }, {
            bVisible: true,
            sName: 'sName',
            bNotEmpty: true,
            bReadonly: true,
            showName: '字段名',
          }, {
            bVisible: true,
            sName: 'sChinese',
            bNotEmpty: true,
            showName: '中文名',
          }, {
            bVisible: true,
            sName: 'sEnglish',
            bNotEmpty: true,
            showName: '英文名',
          }, {
            bVisible: true,
            sName: 'sBig5',
            bNotEmpty: true,
            showName: '繁体',
          }, {
            bVisible: true,
            sName: 'iFitWidth',
            bNotEmpty: true,
            showName: '宽度',
          }, {
            bVisible: true,
            sName: 'sType',
            sDropDownType: 'const',
            bNotEmpty: true,
            showName: '汇总类型',
            iVisCount: 1,
            showDropDown: [{ value: '请选择', sId: '' },
              { value: '分组', sId: 'groupBy' },
              { value: '最大值', sId: 'max' },
              { value: '最小值', sId: 'min' },
              { value: '平均数', sId: 'avg' },
              { value: '求和', sId: 'sum' },
              { value: '行数', sId: 'count' },
              { value: 'sql语句', sId: 'sql' }],
          }, {
            bVisible: true,
            sName: 'sSql',
            bNotEmpty: true,
            showName: 'SQL语句',
          }, {
            bVisible: true,
            sName: 'bShow',
            bNotEmpty: true,
            showName: '是否显示',
          }];
        searchColumnShowColumn = [{
          title: columniOrder,
          dataIndex: 'iOrder',
          width: 60,
        }, {
          title: columnShowName,
          dataIndex: 'sName',
          width: 120,
        }, {
          title: columnChinese,
          dataIndex: 'sChinese',
          width: 80,
        }, {
          title: columnEnglish,
          dataIndex: 'sEnglish',
          width: 80,
        }, {
          title: columnBig5,
          dataIndex: 'sBig5',
          width: 80,
        }, {
          title: columniFitWidth,
          dataIndex: 'iFitWidth',
          width: 80,
        }, {
          title: columnbVisible,
          dataIndex: 'bShow',
          width: 60,
        }, {
          title: columnsType,
          dataIndex: 'sType',
          width: 120,
        }, {
          title: columnSQL,
          dataIndex: 'sSql',
          width: 269,
        }];
        const tableConfig = masterConfig.gdsconfigformslave;
        const searchColumnShowData = [];
        for (const child of tableConfig) {
          if (child.sName !== '' && child.bVisible && child.showName !== '') {
            searchColumnShowData.push({
              sId: child.sId,
              iOrder: child.iOrder,
              sChinese: child.sChinese,
              sEnglish: child.sEnglish,
              sBig5: child.sBig5,
              sName: child.sName,
              iFitWidth: child.iFitWidth,
              sType: '',
              sSql: '',
              bShow: false,
            });
          }
        }
        const searchColumnShowAllData = JSON.parse(JSON.stringify(searchColumnShowData));
        this.props.onSaveState({
          searchColumnShowColumn, searchColumnShowData, searchColumnShowAllData, searchColumnShowConfig,
        });
      }
    }
  }

  componentDidMount() {
    this.props.onSaveState({ onBtnSearch: this.handleSearch });
  }

  onKeyUp = (e) => {
    if (e.key === 'Enter') {
      setTimeout(() => {
        this.handleSearch();
      }, 500);
    }
  }

  async defaultSearchSolution(searchSolutionDataRow) {
    /* 判断是否有分组 */
    const sGroupByList = commonUtils.isNotEmptyObject(searchSolutionDataRow) ? searchSolutionDataRow.sGroupByList : '[]';
    const column = [];
    if (commonUtils.isNotEmptyArr(sGroupByList)) {
      /* 有分组查询 */
      for (const child of sGroupByList) {
        if (child.sName !== '' && child.bShow) {
          column.push({
            title: child.sChinese,
            dataIndex: child.sName,
            width: child.iFitWidth,
            bFind: true,
            bNotEmpty: false,
          });
        }
      }
    }
    const { expand } = false;
    const highlightColor = false;
    const { sModelsType, sModelsId, app } = this.props;
    const { userinfo } = app;
    const masterData = sModelsType && sModelsType.includes('commonClassify') ? { bCheck: false } : { bCheck: true };
    const searchRowKeys = [];
    masterData.sSearchSolutionId = searchSolutionDataRow.sId;
    masterData.sSolutionName = searchSolutionDataRow.sName; /* 修改方案名称，拿到选中方案名称 */
    const filterCondition = JSON.parse(searchSolutionDataRow.sCondition);
    const ownerFlag = userinfo.sId === searchSolutionDataRow.sUserId || (searchSolutionDataRow.sType === 'common' && this.props.app.userinfo.sType === 'sysadmin');
    const filterConditionAsync = async () => {
      for (let i = 0, len = filterCondition.length; i < len; i += 1) {
        const item = filterCondition[i];
        const key = commonUtils.createSid();
        searchRowKeys.push(key);
        const sFirstValue = item.bFilterName;
        masterData[`${key}disabled`] = !ownerFlag;
        masterData[`sFirst-${key}`] = sFirstValue;
        const sSecondValue = item.bFilterCondition;
        const firstDataIndex = commonUtils.isEmpty(sFirstValue) ? 's' :
          (sSecondValue === 'betweenTime' || sSecondValue === 'between' || sSecondValue === 'betweenDay' || sSecondValue === 'betweenYestday' || sSecondValue === 'week'|| sSecondValue === 'weekPre' || sSecondValue === 'month' || sSecondValue === 'monthPre') && sFirstValue.substring(0, 1) === 't' ? 'p' : sFirstValue.substring(0, 1);
        masterData[`sSecond-${key}`] = item.bFilterCondition;
        if (sSecondValue === 'day') {
          masterData[`${firstDataIndex}Third-${key}`] = moment().format(this.sDateFormat);
        } else if (sSecondValue === 'unDayDo') {
          masterData[`${firstDataIndex}Third-${key}`] = moment().format(this.sDateFormat);
        } else if (sSecondValue === 'daybefore') { /* 今天之前 */
          masterData[`${firstDataIndex}Third-${key}`] = moment().subtract(1,"days").format(this.sDateFormat);
          if(sFirstValue?.includes('_pro')){
            item.bFilterValue = masterData[`${firstDataIndex}Third-${key}`]
          }
        } else if (sSecondValue === 'tomorrowbefore') { /* 明天之前 */
          masterData[`${firstDataIndex}Third-${key}`] = moment().add(1,"days").format(this.sDateFormat);
          if(sFirstValue?.includes('_pro')){
            item.bFilterValue = masterData[`${firstDataIndex}Third-${key}`]
          }
        } else if (sSecondValue === 'aftertomorrowbefore') { /* 后天之前 */
          masterData[`${firstDataIndex}Third-${key}`] = moment().add(2,"days").format(this.sDateFormat);
          if(sFirstValue?.includes('_pro')){
            item.bFilterValue = masterData[`${firstDataIndex}Third-${key}`]
          }
        } else if (sSecondValue === 'betweenDay') {
          const dateBetween = [];
          console.log('bFilterValue', item.bFilterValue);
          if(commonUtils.isEmptyObject(item.bFilterValue) || item.bFilterValue.split(',').length < 2) {
            dateBetween.push(moment());
            dateBetween.push(moment());
            if(sFirstValue?.includes('_pro') && commonUtils.isNotEmptyArr(dateBetween)){
              const tStartDate = moment(dateBetween[0]).format(this.sDateFormat);
              const tEndDate = moment(dateBetween[1]).add(1,"days").format(this.sDateFormat);
              let bFilterNewValue = `${tStartDate},${tEndDate}`;
              item.bFilterValue = bFilterNewValue;
            }
          } else if (item.bFilterValue.split(',').length === 2) {
            if (item.bFilterValue.split(',')[0] !== 'null') {
              dateBetween.push(moment(item.bFilterValue.split(',')[0]));
              dateBetween.push(moment(item.bFilterValue.split(',')[1]).subtract(1, 'days')); /* 日期区间需要将bFilterValue日期减一天 */
            }
          }
          masterData[`${firstDataIndex}Third-${key}`] = dateBetween;
        } else if (sSecondValue === 'betweenYestday') {
          const dateBetween = [];
          if(commonUtils.isEmptyObject(item.bFilterValue) || item.bFilterValue.split(',').length < 2) {
            dateBetween.push(moment().subtract(1,"days"));
            dateBetween.push(moment().subtract(1,"days"));
            if(sFirstValue?.includes('_pro') && commonUtils.isNotEmptyArr(dateBetween)){
              const tStartDate = moment(dateBetween[0]).format(this.sDateFormat);
              const tEndDate = moment(dateBetween[1]).add(1,"days").format(this.sDateFormat);
              let bFilterNewValue = `${tStartDate},${tEndDate}`;
              item.bFilterValue = bFilterNewValue;
            }
          } else if (item.bFilterValue.split(',').length === 2) {
            if (item.bFilterValue.split(',')[0] !== 'null') {
              dateBetween.push(moment(item.bFilterValue.split(',')[0]));
              dateBetween.push(moment(item.bFilterValue.split(',')[1]).subtract(1, 'days')); /* 日期区间需要将bFilterValue日期减一天 */
            }
          }
          masterData[`${firstDataIndex}Third-${key}`] = dateBetween;
        } else if (sSecondValue === 'month') {
          const dateBetween = [];
          dateBetween.push(moment().startOf('month'));
          dateBetween.push(moment().endOf('month'));
          masterData[`${firstDataIndex}Third-${key}`] = dateBetween;
        } else if (sSecondValue === 'monthPre') {
          const dateBetween = [];
          dateBetween.push(moment().startOf('month').subtract('month', 1));
          dateBetween.push(moment().endOf('month').subtract('month', 1).endOf('month'));
          masterData[`${firstDataIndex}Third-${key}`] = dateBetween;
        } else if (sSecondValue === 'week') {
          const dateBetween = [];
          dateBetween.push(moment().startOf('week'));
          dateBetween.push(moment().endOf('week'));
          masterData[`${firstDataIndex}Third-${key}`] = dateBetween;
        } else if (sSecondValue === 'weekPre') {
          const dateBetween = [];
          dateBetween.push(moment(moment().week(moment().week() - 1).startOf('week').valueOf()));
          dateBetween.push(moment(moment().week(moment().week() - 1).endOf('week').valueOf()));
          masterData[`${firstDataIndex}Third-${key}`] = dateBetween;
        } else if (item.bFilterCondition === 'between' || item.bFilterCondition === 'betweenTime') {
          if (item.bFilterValue.split(',').length === 2) {
            const dateBetween = [];
            if (item.bFilterValue.split(',')[0] !== 'null') {
              dateBetween.push(moment(item.bFilterValue.split(',')[0]));
              dateBetween.push(moment(item.bFilterValue.split(',')[1]).subtract(1, 'days')); /* 日期区间需要将bFilterValue日期减一天 */
            }
            masterData[`${firstDataIndex}Third-${key}`] = dateBetween;
          } else {
            masterData[`${firstDataIndex}Third-${key}`] = moment(item.bFilterValue);
          }
        } else if (sSecondValue === 'period') {
          if (firstDataIndex === 'p') {
            const dateBetween = [];
            dateBetween.push(moment().startOf('month'));
            dateBetween.push(moment().endOf('month'));
            masterData[`${firstDataIndex}Third-${key}`] = dateBetween;
          } else if (firstDataIndex === 'm') {
            masterData[`${firstDataIndex}Third-${key}`] = moment(new Date());
          } else if (firstDataIndex === 'y') {
            masterData[`${firstDataIndex}Third-${key}`] = moment(new Date());
          }
        } else if (firstDataIndex === 't') {
          masterData[`${firstDataIndex}Third-${key}`] = moment(item.bFilterValue);
        } else if(sModelsId === '12710101117200946822170' && sFirstValue === 'sTXT50' && commonUtils.isEmptyObject(item.bFilterValue)){
          if(commonUtils.isNotEmptyObject(app)&& commonUtils.isNotEmptyObject(app.currentPane)) {
            const { conditonValues } = app.currentPane;
            if(commonUtils.isNotEmptyObject(conditonValues)) {
              masterData[`${firstDataIndex}Third-${key}`] = commonUtils.isNotEmptyObject(conditonValues.sAnlnName) ?
                conditonValues.sAnlnName : '';
            }
          }
        } else {
          const { slaveConfig } = this.props;
          if (commonUtils.isNotEmptyObject(slaveConfig)) {
            const iIndex = slaveConfig.gdsconfigformslave.findIndex(itemData => itemData.sName === sFirstValue);
            if (iIndex > -1 && slaveConfig.gdsconfigformslave[iIndex].sDropDownType === 'sql') {
              const sqlDropDownData = await this.props.getSqlDropDownData(this.props.sModelsId, 'master', slaveConfig.gdsconfigformslave[iIndex]);
              const { dropDownData } = sqlDropDownData;
              const iValueIndex = dropDownData.findIndex(itemData => itemData.sId === item.bFilterValue);
              if (iValueIndex > -1) {
                masterData[`${firstDataIndex}Third-${key}`] = dropDownData[iValueIndex].sName;
                masterData[`${firstDataIndex}Third-${key}Id`] = item.bFilterValue;
              }
            } else {
              masterData[`${firstDataIndex}Third-${key}`] = item.bFilterValue;
            }
          } else {
            masterData[`${firstDataIndex}Third-${key}`] = item.bFilterValue;
          }
        }
      }
    };
    filterConditionAsync();
    return {
      masterData, searchRowKeys, slaveGroupColumn: column, sGroupByList, expand, highlightColor, newFilterCondition: filterCondition
    };
  }
  handeToggle = () => {
    /* 是否展开多出的条件内容 */
    const { expand } = this.props;
    this.props.onSaveState({ expand: !expand });
  };

  handleSearchProps(showConfig) {
    const { masterData } = this.props;
    return {
      form: this.props.form,
      getSqlDropDownData: this.props.getSqlDropDownData,
      getSqlCondition: this.props.getSqlCondition,
      handleSqlDropDownNewRecord: this.props.handleSqlDropDownNewRecord,
      getFloatNum: this.props.getFloatNum,
      getDateFormat: this.props.getDateFormat,
      onChange: this.handleMasterChange,
      showConfig,
      formItemLayout: {},
      textArea: false,
      enabled: true,
      dataValue: commonUtils.isNotEmptyObject(masterData) ? masterData[showConfig.sName] : '',
      bTable: false,
      formRoute: this.props.formRoute,
      sSqlCondition:showConfig.sSqlCondition,
      name: 'master',
      record: masterData,
      noDebounce: true
    };
  }

  handleSearch = (_, isQueryCondition) => {
    window.vlistNewSearh = true;
    const {
      searchRowKeys, masterData, slaveConfig, slaveInfoConfig, setSearchSlaveInfo,
      slave0Config, slave1Config, slave2Config, slave3Config, slave4Config, slave5Config, slave6Config, slave7Config, slave8Config, slave9Config, slave10Config, slave11Config, slave12Config,
      slave13Config, slave14Config, slave15Config, slaveOrderBy, sModelsId,
    } = this.props;
    const filterCondition = []; /* 数据筛选条件 */
    searchRowKeys.map((key) => {
      const { [`sFirst-${key}`]: sFirstValue, [`sSecond-${key}`]: sSecondValue } = masterData;
      const firstDataIndex = commonUtils.isEmpty(sFirstValue) ? 's' :
        (sSecondValue === 'betweenTime' || sSecondValue === 'between' || sSecondValue === 'betweenDay' || sSecondValue === 'betweenYestday' || sSecondValue === 'week'|| sSecondValue === 'weekPre' || sSecondValue === 'month' || sSecondValue === 'monthPre') && sFirstValue.substring(0, 1) === 't' ? 'p' : sFirstValue.substring(0, 1);
      const sThirdName = `${firstDataIndex}Third-${key}`;
      let thirdValue = masterData[sThirdName];
      const iIndex = slaveConfig.gdsconfigformslave.findIndex(item => item.sName === sFirstValue);
      if (iIndex > -1 && slaveConfig.gdsconfigformslave[iIndex].sDropDownType === 'sql') {
        if (!commonUtils.isEmpty(masterData[`${sThirdName}Id`])) {
          thirdValue = masterData[`${sThirdName}Id`];
        } if (!commonUtils.isEmpty(masterData[sFirstValue])) {
          thirdValue = masterData[sFirstValue];
        }
      }
      if (!commonUtils.isEmpty(thirdValue) || firstDataIndex === 'b') {
        if (firstDataIndex === 'p') {
          const tStartDate = sSecondValue === 'betweenTime' ? (commonUtils.isNotEmptyObject(thirdValue[0]) ? moment(thirdValue[0]).format('YYYY-MM-DD HH:mm:ss') : null) : (commonUtils.isNotEmptyObject(thirdValue[0]) ? moment(thirdValue[0]).format(this.sDateFormat) : null);
          const tEndDate = sSecondValue === 'betweenTime' ? (commonUtils.isNotEmptyObject(thirdValue[1]) ? moment(thirdValue[1]).format('YYYY-MM-DD HH:mm:ss') : null) : (commonUtils.isNotEmptyObject(thirdValue[1]) ? moment(thirdValue[1]).add(1, 'days').format(this.sDateFormat) : null);
          filterCondition.push({
            bFilterName: sFirstValue,
            bFilterCondition: sSecondValue,
            bFilterValue: `${tStartDate},${tEndDate}`,
          });
        } else if (firstDataIndex === 'm') {
          const tStartDate = sSecondValue === 'betweenTime' ? moment(thirdValue).format('YYYY-MM-DD HH:mm:ss') : moment(thirdValue).startOf('month').format(this.sDateFormat);
          const tEndDate = sSecondValue === 'betweenTime' ? moment(thirdValue).format('YYYY-MM-DD HH:mm:ss') : moment(thirdValue).endOf('month').add(1, 'days').format(this.sDateFormat);
          filterCondition.push({
            bFilterName: `t${sFirstValue.substring(1, sFirstValue.length)}`,
            bFilterCondition: sSecondValue,
            bFilterValue: `${tStartDate},${tEndDate}`,
          });
        }else if (firstDataIndex === 'y') {
          const tStartDate = sSecondValue === 'betweenTime' ? moment(thirdValue).format('YYYY-MM-DD HH:mm:ss') : moment(thirdValue).startOf('year').format(this.sDateFormat);
          const tEndDate = sSecondValue === 'betweenTime' ? moment(thirdValue).format('YYYY-MM-DD HH:mm:ss') : moment(thirdValue).endOf('year').add(1, 'days').format(this.sDateFormat);
          filterCondition.push({
            bFilterName: `t${sFirstValue.substring(1, sFirstValue.length)}`,
            bFilterCondition: sSecondValue,
            bFilterValue: `${tStartDate},${tEndDate}`,
          });
        } else if (firstDataIndex === 't') {
          filterCondition.push({
            bFilterName: sFirstValue,
            bFilterCondition: sSecondValue,
            bFilterValue: moment(thirdValue).format(this.sDateFormat),
          });
        } else if (firstDataIndex === 'b') {
          filterCondition.push({
            bFilterName: sFirstValue,
            bFilterCondition: sSecondValue,
            bFilterValue: thirdValue ? true : false,
          });
        } else {
          filterCondition.push({
            bFilterName: sFirstValue,
            bFilterCondition: sSecondValue,
            bFilterValue: thirdValue,
          });
        }
      }
      return true;
    });
    /* 判断是否要加载过滤树数据 */
    const filterTreeConfigArr = slaveConfig.gdsconfigformslave.filter(item => item.bTree);
    if (commonUtils.isNotEmptyArr(filterTreeConfigArr)) {
      const filterTreeConfig = filterTreeConfigArr[0];
      this.props.onGetFilterTreeData(filterTreeConfig, filterCondition, 1);
      let { treeSelectedKeys } = this.props;
      if (commonUtils.isNotEmptyArr(treeSelectedKeys)) { /* 清除原来选中树节点 */
        treeSelectedKeys = [];
        this.props.onSaveState({
          treeSelectedKeys, treeFilterCondition: [],
        });
      }
    }
    /*
      修改日期：2021-03-17
      修改人：吕杰
      区域：以下一行
      需求变更：fix 2135 搜索时添加loading动画
    */
    // 添加props传入的判断条件
    // let customfilterCondition = filterCondition.slice(0);
    // if (customSlaveFilterCondition) {
    //   customfilterCondition = filterCondition.concat(customSlaveFilterCondition);
    // }

    /**
     * 获取 bFilterName 首字母为t
     */
    if (isQueryCondition && sModelsId === '12710101117253309349270') {
      return filterCondition.filter(i => i && ['t', 'p'].includes(i.bFilterName?.[0]));;
    }

    this.props.onSaveState({ pageLoading: true });
    /* commonListTab搜索时 根据当前Tab页签所在表格进行查询 */
    if(commonUtils.isNotEmptyObject(location.pathname) && location.pathname.includes('commonListTab')) {
      this.props.onGetSearchData(slaveConfig, filterCondition, undefined,undefined,undefined,undefined,undefined,undefined,undefined, slave0Config);
    } else {
      this.props.onGetData(slaveConfig, filterCondition, undefined,undefined,slaveOrderBy,undefined,undefined,undefined,undefined,
        slave0Config, slave1Config, slave2Config, slave3Config, slave4Config, slave5Config, slave6Config, slave7Config, slave8Config, slave9Config, slave10Config, slave11Config, slave12Config, slave13Config, slave14Config, slave15Config);
    }
    if (setSearchSlaveInfo === 'Y') {
      if (commonUtils.isNotEmptyObject(slaveInfoConfig)) {
        this.props.onGetDataInfo(slaveInfoConfig, filterCondition);
      }
    } else {
      this.props.onSaveState({
        expKeys: [],
        slaveInfoSelectedRowKeys: [],
        slaveInfoSelectedData: [],
        slaveInfoData: [], /* 清除生产主计划,生产排程明细表数据 */
      });
    }
  }

  /**
   * @param {*} name json
   * @param {*} bFilterName 首字母修改
   * @returns
   */
  handleFirstNameEqual = (name, bFilterName) => {
    if (typeof bFilterName === 'string' && typeof name === 'string' && ['m', 'y'].includes(name[0])) {
      return bFilterName.substring(1) === name.substring(1);
    }
  }

  /** 修改主表数据 */
  handleMasterChange = async (name, sFieldName, changeValue, sId, dropDownData) => {
    // let { expand } = false;
    if (sFieldName === 'sSearchSolutionId'  && false &&  !location.pathname.toLowerCase().includes('productionmainplan')) {
      const {
        searchSolution, slaveConfig, slaveInfoConfig, setSearchSlaveInfo,
      } = this.props;

      const searchCondition = this.handleSearch(_ , true);
      const iIndex = searchSolution.findIndex(item => item.sId === changeValue[sFieldName]);
      let filterCondition = JSON.parse(searchSolution[iIndex].sCondition || "[]");
      if (Array.isArray(searchCondition) && searchCondition.length) {
        if (Array.isArray(filterCondition) && filterCondition.length) {
          const keys = searchCondition.map(i => i?.bFilterName).filter(Boolean);
          filterCondition = filterCondition.filter(i => !keys.includes(i?.bFilterName) && !keys.find(j => this.handleFirstNameEqual(i?.bFilterName, j)));
        }
        filterCondition = [...searchCondition, ...filterCondition || []];
      }

      const addState = await this.defaultSearchSolution({ ...searchSolution[iIndex] || {}, sCondition: JSON.stringify(filterCondition) });
      this.props.onSaveState({ ...addState }, () => {
        this.props.onGetData(slaveConfig, filterCondition, '', '', '', '', addState.sGroupByList,);
      });
      /* 判断是否要加载过滤树数据 */
      const filterTreeConfigArr = slaveConfig.gdsconfigformslave.filter(item => item.bTree);
      if (commonUtils.isNotEmptyArr(filterTreeConfigArr)) {
        const filterTreeConfig = filterTreeConfigArr[0];
        this.props.onGetFilterTreeData(filterTreeConfig, filterCondition, 1);
        let { treeSelectedKeys } = this.props;
        if (commonUtils.isNotEmptyArr(treeSelectedKeys)) { /* 清除原来选中树节点 */
          treeSelectedKeys = [];
          this.props.onSaveState({
            treeSelectedKeys, treeFilterCondition: [],
          });
        }
      }
      if (setSearchSlaveInfo === 'Y') {
        if (commonUtils.isNotEmptyObject(slaveInfoConfig)) {
          this.props.onGetDataInfo(slaveInfoConfig, JSON.parse(searchSolution[iIndex].sCondition));
        }
      }
      // /* 当搜索条件有一个为空时，则展开 */
      // const searchSolutions = JSON.parse(searchSolution[iIndex].sCondition);
      // const showConfigArr = searchSolutions.filter(item => commonUtils.isEmpty(item.bFilterValue) || item.bFilterValue === false);
      // /* 当搜索条件只有一行时，不展开 */
      // if (searchSolutions.length > 1 && commonUtils.isNotEmptyArr(showConfigArr) && showConfigArr.length > 0) {
      //   expand = true;
      // }
      // this.props.onSaveState({ expand });
    } else if (sFieldName === 'sSearchSolutionId' ) {
      const {
        searchSolution, slaveConfig, slaveInfoConfig, setSearchSlaveInfo,
      } = this.props;
      const iIndex = searchSolution.findIndex(item => item.sId === changeValue[sFieldName]);
      const addState = await this.defaultSearchSolution(searchSolution[iIndex]);
      const filterCondition = JSON.parse(searchSolution[iIndex].sCondition);

      this.props.onSaveState({ ...addState }, () => {
        this.props.onGetData(slaveConfig, JSON.parse(searchSolution[iIndex].sCondition), '', '', '', '', addState.sGroupByList);
      });
      /* 判断是否要加载过滤树数据 */
      const filterTreeConfigArr = slaveConfig.gdsconfigformslave.filter(item => item.bTree);
      if (commonUtils.isNotEmptyArr(filterTreeConfigArr)) {
        const filterTreeConfig = filterTreeConfigArr[0];
        this.props.onGetFilterTreeData(filterTreeConfig, filterCondition, 1);
        let { treeSelectedKeys } = this.props;
        if (commonUtils.isNotEmptyArr(treeSelectedKeys)) { /* 清除原来选中树节点 */
          treeSelectedKeys = [];
          this.props.onSaveState({
            treeSelectedKeys, treeFilterCondition: [],
          });
        }
      }
      if (setSearchSlaveInfo === 'Y') {
        if (commonUtils.isNotEmptyObject(slaveInfoConfig)) {
          this.props.onGetDataInfo(slaveInfoConfig, JSON.parse(searchSolution[iIndex].sCondition));
        }
      }
    } else if (sFieldName.includes('sFirst-')) {
      const { slaveConfig } = this.props;
      const { masterData } = this.props.onChange(name, sFieldName, changeValue, sId, dropDownData, true);
      const sFirstValue = masterData[sFieldName];
      const firstDataIndex = commonUtils.isEmpty(sFirstValue) ? 's' : sFirstValue.substring(0, 1);
      const key = sFieldName.substring('sFirst-'.length, sFieldName.length);
      const sSecondConditionPro = firstDataIndex === 's' && sFirstValue.endsWith('_pro'); /* 字段名以s开头，sFilterName以pro结尾，则只有等于条件 */
      const iIndex = slaveConfig.gdsconfigformslave.findIndex(item => item.sName === sFirstValue);
      masterData[`sSecond-${key}`] = sSecondConditionPro && iIndex > -1 && slaveConfig.gdsconfigformslave[iIndex].sDropDownType === 'sql' ?
        commonConfig.seaJudge.s_proDropDown[0].sId : sSecondConditionPro ?
          commonConfig.seaJudge.s_pro[0].sId : commonConfig.seaJudge[firstDataIndex][0].sId;
      masterData[`${firstDataIndex}Third-${key}`] = firstDataIndex === 'b' ? false : firstDataIndex === 't' ? moment().format(this.sDateFormat) : masterData[`${firstDataIndex}Third-${key}`];
      this.props.onSaveState({ masterData });
    } else if (sFieldName.includes('sSecond-')) {
      const { masterData } = this.props.onChange(name, sFieldName, changeValue, sId, dropDownData, true);
      const sSecondValue = masterData[sFieldName];
      const key = sFieldName.substring('sSecond-'.length, sFieldName.length);
      const sFirstValue = masterData[`sFirst-${key}`];
      const firstDataIndex = commonUtils.isEmpty(sFirstValue) ? 's' :
        (sSecondValue === 'betweenTime' || sSecondValue === 'between' || sSecondValue === 'betweenDay' || sSecondValue === 'betweenYestday' || sSecondValue === 'week' || sSecondValue === 'weekPre' || sSecondValue === 'month' || sSecondValue === 'monthPre') && sFirstValue.substring(0, 1) === 't' ? 'p' : sFirstValue.substring(0, 1);
      if (sSecondValue === 'day') {
        masterData[`${firstDataIndex}Third-${key}`] = moment().format(this.sDateFormat);
      }else if (sSecondValue === 'unDayDo') {
        masterData[`${firstDataIndex}Third-${key}`] = moment().format(this.sDateFormat);
      } else if (sSecondValue === 'daybefore') { /* 今天之前 */
        masterData[`${firstDataIndex}Third-${key}`] = moment().subtract(1,"days").format(this.sDateFormat);
      } else if (sSecondValue === 'tomorrowbefore') { /* 明天之前 */
        masterData[`${firstDataIndex}Third-${key}`] = moment().add(1,"days").format(this.sDateFormat);
      } else if (sSecondValue === 'aftertomorrowbefore') { /* 后天之前 */
        masterData[`${firstDataIndex}Third-${key}`] = moment().add(2,"days").format(this.sDateFormat);
      } else if (sSecondValue === 'betweenDay') {
        const dateBetween = [];
        dateBetween.push(moment());
        dateBetween.push(moment());
        masterData[`${firstDataIndex}Third-${key}`] = dateBetween;
      } else if (sSecondValue === 'betweenYestday') {
        const dateBetween = [];
        dateBetween.push(moment().subtract(1,"days"));
        dateBetween.push(moment().subtract(1,"days"));
        masterData[`${firstDataIndex}Third-${key}`] = dateBetween;
      } else if (sSecondValue === 'month') {
        const dateBetween = [];
        dateBetween.push(moment().startOf('month'));
        dateBetween.push(moment().endOf('month'));
        masterData[`${firstDataIndex}Third-${key}`] = dateBetween;
      } else if (sSecondValue === 'monthPre') {
        const dateBetween = [];
        dateBetween.push(moment().startOf('month').subtract('month', 1));
        dateBetween.push(moment().endOf('month').subtract('month', 1).endOf('month'));
        masterData[`${firstDataIndex}Third-${key}`] = dateBetween;
      } else if (sSecondValue === 'week') {
        const dateBetween = [];
        dateBetween.push(moment().startOf('week'));
        dateBetween.push(moment().endOf('week'));
        masterData[`${firstDataIndex}Third-${key}`] = dateBetween;
      } else if (sSecondValue === 'weekPre') {
        const dateBetween = [];
        dateBetween.push(moment(moment().week(moment().week() - 1).startOf('week').valueOf()));
        dateBetween.push(moment(moment().week(moment().week() - 1).endOf('week').valueOf()));
        masterData[`${firstDataIndex}Third-${key}`] = dateBetween;
      } else if (sSecondValue === 'period') { /* 本期间 */
        if (firstDataIndex === 'm') {
          masterData[`${firstDataIndex}Third-${key}`] = moment(new Date());
        } else if (firstDataIndex === 'p') {
          const dateBetween = [];
          dateBetween.push(moment().startOf('month'));
          dateBetween.push(moment().endOf('month'));
          masterData[`${firstDataIndex}Third-${key}`] = dateBetween;
        }
      }
      this.props.onSaveState({ masterData });
    } else {
      this.props.onChange('master', sFieldName, changeValue, sId, dropDownData);
    }
  };

  handleFields = (searchColumns) => {
    /* 默认快捷过滤 */
    if (commonUtils.isEmptyArr(searchColumns)) { return; }
    const { masterData, searchRowKeys, app } = this.props;
    const children = searchRowKeys.map((key) => {
      const { [`sFirst-${key}`]: sFirstValue, [`sSecond-${key}`]: sSecondValue, [`${key}disabled`]: disabled } = masterData;
      const firstDataIndex = commonUtils.isEmpty(sFirstValue) ? 's' :
        (sSecondValue === 'betweenTime' || sSecondValue === 'between' || sSecondValue === 'betweenDay' || sSecondValue === 'betweenYestday' || sSecondValue === 'week' || sSecondValue === 'weekPre' || sSecondValue === 'period' || sSecondValue === 'month' || sSecondValue === 'monthPre') && sFirstValue.substring(0, 1) === 't' ? 'p' : sFirstValue.substring(0, 1);
      const showFirstConfig = {
        sId: commonUtils.createSid(),
        sName: `sFirst-${key}`,
        sDropDownType: 'sql',
        iVisCount: 1,
        bNotEmpty: true,
        dropDownData: this.props.searchColumns,
      };

      const sThirdName = `${firstDataIndex}Third-${key}`;
      let DropDownType = '';
      let showDropDown = '';
      let sAssignField = '';
      let sSqlCondition = '';
      let sId = '';
      const searchColumnsCurrent = searchColumns.filter(item => item.sId === sFirstValue);
      if (commonUtils.isNotEmptyArr(searchColumnsCurrent) && searchColumnsCurrent.length > 0) {
        sId = searchColumnsCurrent[0].sConfigId;
        DropDownType = searchColumnsCurrent[0].sDropDownType;
        sSqlCondition = searchColumnsCurrent[0].sSqlCondition;
        ([{ showDropDown, sAssignField }] = searchColumnsCurrent);
      }
      const sSecondConditionPro = firstDataIndex === 's' && sFirstValue?.endsWith('_pro'); /* 字段名以s开头，sFilterName以pro结尾，则只有等于条件 */
      const showSecondConfig = {
        sId: commonUtils.createSid(),
        sName: `sSecond-${key}`,
        sDropDownType: 'sql',
        bNotEmpty: true,
        iVisCount: 1,
        dropDownData: this.getTranslatedSeaJudge(
          sSecondConditionPro && DropDownType === 'sql' ? 's_proDropDown' :
            sSecondConditionPro ? 's_pro' : firstDataIndex,
          app?.userinfo?.sLanguage
        ),        bCanInput: false,
      };
      const showThirdConfig = {
        sId,
        sName: sThirdName,
        sDropDownType: DropDownType,
        bNotEmpty: false,
        showDropDown: DropDownType === 'const' ? undefined : showDropDown,
        dropDownData: DropDownType === 'const' ? commonUtils.objectToArr(commonUtils.convertStrToObj(showDropDown)) : undefined,
        sAssignField,
        sSqlCondition,
        iVisCount: 1,
        bCanInput: false,
        bSearchComponent: true, /* 是否是搜素方案的下拉 */
      };
      const showTypeFirstProps = this.handleSearchProps(showFirstConfig);
      const showTypeSecondProps = this.handleSearchProps(showSecondConfig);
      const showTypeThirdProps = this.handleSearchProps(showThirdConfig);
      showTypeFirstProps.enabled = true; /* 管理员设置的方案，普通用户不可编辑  showTypeFirstProps.enabled = !disabled; */
      showTypeSecondProps.enabled = true; /* showTypeSecondProps.enabled = !disabled; */
      showTypeThirdProps.enabled = true && !(sSecondValue === 'day' || sSecondValue === 'unDayDo'  || sSecondValue === 'daybefore' || sSecondValue === 'tomorrowbefore' || sSecondValue === 'aftertomorrowbefore' || sSecondValue === 'weekPre' || sSecondValue === 'week'  || sSecondValue === 'month' || sSecondValue === 'monthPre');/* showTypeThirdProps.enabled = !disabled */
      showTypeFirstProps.formItemLayout = { wrapperCol: { span: 24 } };
      showTypeSecondProps.formItemLayout = { wrapperCol: { span: 24 } };
      showTypeThirdProps.formItemLayout = { wrapperCol: { span: 24 } };
      showTypeThirdProps.allowClear = true;
      const { dataValue } = showTypeThirdProps;
      if (sThirdName.substring(0, 1) === 'b') {
        showTypeThirdProps.enabled = true; /* 选择框不管什么情况，都是可编辑状态 */
      } else if (commonUtils.isEmptyObject(dataValue) || commonUtils.isEmptyArr(dataValue)) {
        showTypeThirdProps.enabled = true; /* 第三个查找条件值为空时，要能直接输入 */
      }
      if (sSecondValue === 'betweenTime') {
        showThirdConfig.sDateFormat = 'YYYY-MM-DD HH:mm:ss';
        /* showTime为true显示可以选择具体时间 */
        showTypeThirdProps.showTime = sSecondValue === 'betweenTime';
      } else if (sSecondValue === 'between' || sSecondValue === 'betweenDay' || sSecondValue === 'betweenYestday' ) {
        showThirdConfig.sDateFormat = 'YYYY-MM-DD';
        /* showTime为true显示可以选择具体时间 */
        showTypeThirdProps.showTime = false;

        if(firstDataIndex && firstDataIndex === 'm') {
          showThirdConfig.sDateFormat = 'YYYY-MM';
        } else if (firstDataIndex && firstDataIndex === 'y') {
          showThirdConfig.sDateFormat = 'YYYY';
        }
      }

      return (
        <div key={key} className={styles.addFilterBox}>
          <Space>
            <div style={{ width: 180 }}>
              <ShowType {...showTypeFirstProps} />
            </div>
            <div style={{ width: 180 }}>
              <ShowType {...showTypeSecondProps} />
            </div>
            <div style={{ width: 180 }}>
              <ShowType {...showTypeThirdProps} onKeyUp={this.onKeyUp} />
              {
                key > 0 && !disabled ? (
                  <MinusCircleOutlined className={styles.removeBtn} onClick={() => this.handleRemove(key)} />
                ) : null
              }
            </div>
          </Space>
        </div>
      );
    });
    return children;
  };

  handleAdd = () => {
    /* 添加条件 */
    const { searchRowKeys, searchColumns, masterData } = this.props;
    const key = commonUtils.createSid();
    searchRowKeys.push(key);
    const sFirstValue = searchColumns[0].sId;
    masterData[`sFirst-${key}`] = searchColumns[0].sId;
    const firstDataIndex = commonUtils.isEmpty(sFirstValue) ? 's' : sFirstValue.substring(0, 1) === 't' ? 'p' : sFirstValue.substring(0, 1);
    masterData[`sSecond-${key}`] = commonConfig.seaJudge[firstDataIndex][0].sId;
    this.props.onSaveState({ searchRowKeys, masterData });
  };

  handleRemove = (key, disabled) => {
    /* 移除添加条件 */
    const { searchRowKeys } = this.props;
    if (searchRowKeys.length > 1 && !disabled) {
      const iIndex = searchRowKeys.findIndex(item => item === key);
      searchRowKeys.splice(iIndex, 1);
      this.props.onSaveState({ searchRowKeys });
    }
  };

  handleSave = (e) => {
    /* 保存快捷过滤模板 */
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      /*   验证通过与不通过走不同的流程   */
      if (err) { /*   验证失败   */
        /*   直接渲染显示错误提示   */
        for (const sFieldName of Object.keys(err)) {
          const key = sFieldName.substring('Third-'.length + 1, sFieldName.length);
          const sFirstValue = values[`sFirst-${key}`];
          const iIndex = this.props.searchColumns.findIndex(item => item.sId === sFirstValue);
          const showName = iIndex > -1 ? this.props.searchColumns[iIndex].sValue : '';
          message.error(err[sFieldName].errors[0].message.replace('undefined', showName));
        }
      } else { /*   验证成功   */
        this.props.onSaveState({
          modalVisible: true,
        });
      }
    });
  };
  handleUpd= (e) => {
    /* 方案名称修改 */
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      /*   验证通过与不通过走不同的流程   */
      if (err) { /*   验证失败   */
        /*   直接渲染显示错误提示   */
        for (const sFieldName of Object.keys(err)) {
          const key = sFieldName.substring('Third-'.length + 1, sFieldName.length);
          const sFirstValue = values[`sFirst-${key}`];
          const iIndex = this.props.searchColumns.findIndex(item => item.sId === sFirstValue);
          const showName = iIndex > -1 ? this.props.searchColumns[iIndex].sValue : '';
          message.error(err[sFieldName].errors[0].message.replace('undefined', showName));
        }
      } else { /*   验证成功   */
        this.props.onSaveState({
          modalSolutionNameVisible: true,
        });
      }
    });
  };
  /* 列显示配置 */
  handleSaveColumnSetting = async () => {
    const {
      masterData, sModelsId, searchColumnShowAllData, formSrcRoute,
    } = this.props;
    const sSearchSolutionId = commonUtils.isNotEmptyObject(masterData) ? masterData.sSearchSolutionId : '';
    if (commonUtils.isNotEmptyObject(sSearchSolutionId)) {
      const searchUrl = `${commonConfig.server_host}searchgroupby/getSearchgroupbyData/${sModelsId}/${sSearchSolutionId}?token=token&sModelsId=${sModelsId}&sName=${formSrcRoute}`;
      const dataReturn = (await commonServices.getService(this.props.app.token, searchUrl)).data;
      if (dataReturn.code === 1) {
        const returnData = dataReturn.dataset.rows;
        if (commonUtils.isNotEmptyArr(returnData)) {
          const newsearchColumnShowData = JSON.parse(JSON.stringify(searchColumnShowAllData));
          for (const child of returnData) {
            const iIndex = newsearchColumnShowData.findIndex(item => item.sName === child.sName.toString());
            if (iIndex > -1) {
              newsearchColumnShowData[iIndex].iOrder = child.iOrder;
              newsearchColumnShowData[iIndex].sChinese = child.sChinese;
              newsearchColumnShowData[iIndex].sEnglish = child.sEnglish;
              newsearchColumnShowData[iIndex].sBig5 = child.sBig5;
              newsearchColumnShowData[iIndex].iFitWidth = child.iFitWidth;
              newsearchColumnShowData[iIndex].bShow = child.bShow;
              newsearchColumnShowData[iIndex].sType = child.sType;
              newsearchColumnShowData[iIndex].sSql = child.sSql;
            }
          }
          this.props.onSaveState({
            searchColumnShowData: newsearchColumnShowData,
          });
        } else {
          this.props.onSaveState({
            searchColumnShowData: JSON.parse(JSON.stringify(searchColumnShowAllData)),
          });
        }
      } else {
        this.props.getServiceError(dataReturn);
      }
    }
    this.props.onSaveState({
      columnSettingVisible: true,
    });
  }
  handleDefault = async () => {
    const { sModelsId, masterData, formSrcRoute } = this.props;
    const dataUrl = `${commonConfig.server_host}syssearch/updateSyssearch?sModelsId=${sModelsId}&sName=${formSrcRoute}`;
    const value = {
      sFormId: sModelsId,
      sId: masterData.sSearchSolutionId,
      bDefault: true,
    };
    const dataReturn = (await commonServices.postValueService(this.props.app.token, value, dataUrl)).data;
    if (dataReturn.code === 1) {
      const returnData = dataReturn.dataset.rows;
      message.success(dataReturn.msg);
      await this.componentWillMount(returnData[0].sId);
    } else {
      this.props.getServiceError(dataReturn);
    }
  }

  handleOk = (e) => {
    e.preventDefault();
    this.props.form.validateFields(async (err) => {
      /*   验证通过与不通过走不同的流程   */
      if (err) { /*   验证失败   */
        /*   直接渲染显示错误提示   */
        for (const sFieldName of Object.keys(err)) {
          message.error(err[sFieldName].errors[0].message);
        }
      } else { /*   验证成功   */
        const {
          sModelsId, masterData, searchRowKeys, formSrcRoute,
        } = this.props;
        const dataUrl = `${commonConfig.server_host}syssearch/addSyssearch?sModelsId=${sModelsId}&sName=${formSrcRoute}`;
        const filterCondition = [];
        searchRowKeys.map((key) => {
          const { [`sFirst-${key}`]: sFirstValue, [`sSecond-${key}`]: sSecondValue } = masterData;
          const firstDataIndex = commonUtils.isEmpty(sFirstValue) ? 's' :
            (sSecondValue === 'betweenTime' || sSecondValue === 'between' || sSecondValue === 'betweenDay' || sSecondValue === 'betweenYestday' || sSecondValue === 'week' || sSecondValue === 'weekhPre' || sSecondValue === 'month' || sSecondValue === 'monthPre') && sFirstValue.substring(0, 1) === 't' ? 'p' : sFirstValue.substring(0, 1);
          const sThirdName = `${firstDataIndex}Third-${key}`;
          const thirdValue = masterData[sThirdName] === undefined ? '' : masterData[sThirdName]; /* 不过滤空条件 */
          if (thirdValue !== undefined) {
            if (firstDataIndex === 'p') {
              const tStartDate = commonUtils.isNotEmptyObject(thirdValue[0]) ? moment(thirdValue[0]).format(this.sDateFormat) : null;
              const tEndDate = commonUtils.isNotEmptyObject(thirdValue[0]) ? moment(thirdValue[1]).add(1, 'days').format(this.sDateFormat) : null;
              let bFilterNewValue = `${tStartDate},${tEndDate}`;
              if(sSecondValue === 'betweenDay' || sSecondValue === 'betweenYestday') {
                bFilterNewValue = '';
              }
              filterCondition.push({
                bFilterName: sFirstValue,
                bFilterCondition: sSecondValue,
                bFilterValue: bFilterNewValue,
              });
            } else if (firstDataIndex === 't') {
              filterCondition.push({
                bFilterName: sFirstValue,
                bFilterCondition: sSecondValue,
                bFilterValue: moment(thirdValue).format(this.sDateFormat),
              });
            } else {
              filterCondition.push({
                bFilterName: sFirstValue,
                bFilterCondition: sSecondValue,
                bFilterValue: thirdValue,
              });
            }
          }
          return true;
        });
        const value = {
          sFormId: sModelsId,
          sCondition: filterCondition,
          sName: masterData.sSolutionName,
        };
        const dataReturn = (await commonServices.postValueService(this.props.app.token, value, dataUrl)).data;
        if (dataReturn.code === 1) {
          const returnData = dataReturn.dataset.rows;
          message.success(dataReturn.msg);
          await this.componentWillMount(returnData[0].sId);
        } else {
          this.props.getServiceError(dataReturn);
        }
      }
    });
  };

  handleSolutionNameOk = (e) => {
    e.preventDefault();
    this.props.form.validateFields(async (err) => {
      /*   验证通过与不通过走不同的流程   */
      if (err) { /*   验证失败   */
        /*   直接渲染显示错误提示   */
        for (const sFieldName of Object.keys(err)) {
          message.error(err[sFieldName].errors[0].message);
        }
      } else { /*   验证成功   */
        const {
          sModelsId, masterData, searchRowKeys, formSrcRoute,
        } = this.props;
        const dataUrl = `${commonConfig.server_host}syssearch/updateSyssearch?sModelsId=${sModelsId}&sName=${formSrcRoute}`;
        const filterCondition = [];
        searchRowKeys.map((key) => {
          const { [`sFirst-${key}`]: sFirstValue, [`sSecond-${key}`]: sSecondValue } = masterData;
          const firstDataIndex = commonUtils.isEmpty(sFirstValue) ? 's' :
            (sSecondValue === 'betweenTime' || sSecondValue === 'between' || sSecondValue === 'betweenDay' || sSecondValue === 'betweenYestday'|| sSecondValue === 'week' || sSecondValue === 'weekPre' || sSecondValue === 'month' || sSecondValue === 'monthPre') && sFirstValue.substring(0, 1) === 't' ? 'p' : sFirstValue.substring(0, 1);
          const sThirdName = `${firstDataIndex}Third-${key}`;
          const thirdValue = masterData[sThirdName] === undefined ? '' : masterData[sThirdName]; /* 不过滤空条件 */
          if (thirdValue !== undefined) {
            if (firstDataIndex === 'p') {
              const tStartDate = moment(thirdValue[0]).format(this.sDateFormat);
              const tEndDate = moment(thirdValue[1]).add(1, 'days').format(this.sDateFormat);
              let bFilterNewValue = `${tStartDate},${tEndDate}`;
              if(sSecondValue === 'betweenDay' || sSecondValue === 'betweenYestday') {
                bFilterNewValue = '';
              }
              filterCondition.push({
                bFilterName: sFirstValue,
                bFilterCondition: sSecondValue === 'monthPre' ? 'between' : sSecondValue,
                bFilterValue: bFilterNewValue,
              });
            } else if (firstDataIndex === 't') {
              filterCondition.push({
                bFilterName: sFirstValue,
                bFilterCondition: sSecondValue,
                bFilterValue: moment(thirdValue).format(this.sDateFormat),
              });
            } else {
              filterCondition.push({
                bFilterName: sFirstValue,
                bFilterCondition: sSecondValue,
                bFilterValue: thirdValue,
              });
            }
          }
          return true;
        });
        const value = {
          sFormId: sModelsId,
          sCondition: filterCondition,
          sName: masterData.sSolutionName,
          sId: masterData.sSearchSolutionId,
        };
        const dataReturn = (await commonServices.postValueService(this.props.app.token, value, dataUrl)).data;
        if (dataReturn.code === 1) {
          const returnData = dataReturn.dataset.rows;
          message.success(dataReturn.msg);
          await this.componentWillMount(returnData[0].sId);
        } else {
          this.props.getServiceError(dataReturn);
        }
      }
    });
  };
  handleDel = async (e) => {
    /* 删除快捷过滤模板 */
    e.preventDefault(); /* 防止动画删除 */
    const {
      slaveConfig, slaveInfoConfig, masterData, sModelsId, formSrcRoute, setSearchSlaveInfo,
    } = this.props;
    if (commonUtils.isNotEmptyObject(masterData) && !commonUtils.isEmpty(masterData.sSearchSolutionId)) {
      const dataUrl = `${commonConfig.server_host}syssearch/deleteSyssearch/${sModelsId}/${masterData.sSearchSolutionId}?sModelsId=${sModelsId}&sName=${formSrcRoute}`;
      const dataReturn = (await commonServices.getService(this.props.app.token, dataUrl)).data;
      if (dataReturn.code === 1) {
        message.success(dataReturn.msg);
        await this.componentWillMount();
        const { searchSolution } = this.props;
        if (commonUtils.isNotEmptyArr(searchSolution)) {
          /* 如果初始没有方案,即为[],则进行重置 */
          if (searchSolution[0].sCondition === '[]') {
            this.handleReset();
          }
          this.props.onGetData(slaveConfig, JSON.parse(searchSolution[0].sCondition));
          if (setSearchSlaveInfo === 'Y') {
            if (commonUtils.isNotEmptyObject(slaveInfoConfig)) {
              this.props.onGetDataInfo(slaveInfoConfig, JSON.parse(searchSolution[0].sCondition));
            }
          }
        } else {
          this.handleReset();
        }
      } else {
        this.props.getServiceError(dataReturn);
      }
    }
  };

  handleReset = async () => {
    /* 清空搜索条件 */
    const { searchColumns, sModelsType } = this.props;
    const searchRowKeys = [];
    const key = commonUtils.createSid();
    const masterData = sModelsType && sModelsType.includes('commonClassify') ? { bCheck: false } : { bCheck: true };
    // masterData.sSearchSolutionId = masterDataOld.sSearchSolutionId;
    searchRowKeys.push(key);
    if (commonUtils.isNotEmptyArr(searchColumns)) {
      const sFirstValue = searchColumns[0].sId;
      masterData[`sFirst-${key}`] = searchColumns[0].sId;
      const firstDataIndex = commonUtils.isEmpty(sFirstValue) ? 's' : sFirstValue.substring(0, 1) === 't' ? 'p' : sFirstValue.substring(0, 1);
      masterData[`sSecond-${key}`] = commonConfig.seaJudge[firstDataIndex][0].sId;
      const { clearArray } = this.props;
      if (!commonUtils.isEmpty(clearArray)) {
        for (const item of clearArray) {
          const { confirm, clearFilters } = item;
          confirm();
          clearFilters();
        }
      }

      let obj = {
        searchRowKeys,
        masterData,
        clearArray: [],
        searchText: '',
        slaveFilterCondition: [],
        // slaveGroupColumn: [],
        // sGroupByList: [],
        // slaveData: [],
        // treeFilterCondition: [],
        // treeSelectedKeys: [],
        // slaveFilterData: [],
        // slaveSelectedRowKeys: [],
        // slaveSelectedData: [],
      };
      await this.props.onSaveState(obj);
    }
    // this.handleSearch();
  };

   handleCancel = async (modelVisible) => {
     /* 关闭弹窗 */
     this.props.onSaveState({ [modelVisible]: false });
   };
   /* 列自定义配置-删除功能 */
  handleCloumnSettingDelete = async (modelVisible) => {
    /* 关闭弹窗 */
    const { masterData, sModelsId, formSrcRoute } = this.props;
    const sSearchSolutionId = commonUtils.isNotEmptyObject(masterData) ? masterData.sSearchSolutionId : '';
    const deleteUrl = `${commonConfig.server_host}searchgroupby/deleteSearchgroupby/${sModelsId}/${sSearchSolutionId}?sModelsId=${sModelsId}&sName=${formSrcRoute}`;
    const dataReturn = (await commonServices.getService(this.props.app.token, deleteUrl)).data;
    if (dataReturn.code === 1) {
      message.success(dataReturn.msg);
      await this.componentWillMount(sSearchSolutionId); /* 搜索刷新下拉方案 */
      this.handleSearch();
      this.props.onSaveState({ slaveGroupColumn: [], [modelVisible]: false });
    } else {
      this.props.getServiceError(dataReturn);
    }
  };
  /* 列自定义配置窗体保存功能 */
  handleColumnSettingSave =async (modelVisible) => {
    /* 获取勾选是否显示的列的数据/拿到显示参数/调用接口 */
    const {
      searchColumnShowData, masterData, sModelsId, formSrcRoute,
    } = this.props;
    const sSearchSolutionId = commonUtils.isNotEmptyObject(masterData) ? masterData.sSearchSolutionId : '';
    const sSearchgroupbyData = searchColumnShowData.filter(item => item.bShow);
    const addurl = `${commonConfig.server_host}/searchgroupby/addSearchgroupby?token=token&sModelsId=${sModelsId}&sName=${formSrcRoute}`;
    /*   参数   */
    const body = {
      sFormId: sModelsId,
      sSearchId: sSearchSolutionId,
      sSearchgroupbyData,
    };
    // /*   获取数据   */
    const json = await commonServices.postValueService(this.props.app.token, body, addurl);
    /*   code为1代表获取数据成功   */
    if (json.data.code === 1) {
      message.success(json.data.msg);
      /* 刷新查询方案 */
      await this.componentWillMount(sSearchSolutionId);
      this.handleCloumnSettingSearch(modelVisible, sSearchgroupbyData);
    } else {
      message.error(json.data.msg);
    }
  }

  /* 列自定义配置-查询结果 */
  handleCloumnSettingSearch = (modelVisible, sGroupByList) => {
    /* 查询结果 */
    /* 表头替换，数据集替换 */
    const {
      searchColumnShowData, slaveConfig, slaveInfoConfig, slaveFilterCondition, setSearchSlaveInfo,
    } = this.props;
    const column = [];
    for (const child of searchColumnShowData) {
      if (child.sName !== '' && child.bShow) {
        column.push({
          title: child.sChinese,
          dataIndex: child.sName,
          width: child.iFitWidth,
          bFind: true,
          bNotEmpty: false,
        });
      }
    }
    /* 调handleSearch搜索 */
    this.props.onGetData(slaveConfig, slaveFilterCondition, '', '', '', '', sGroupByList);
    if (setSearchSlaveInfo === 'Y') {
      if (commonUtils.isNotEmptyObject(slaveInfoConfig)) {
        this.props.onGetDataInfo(slaveInfoConfig, slaveFilterCondition);
      }
    }
    this.props.onSaveState({
      slaveGroupColumn: column,
      [modelVisible]: false,
      sGroupByList,
    });
  };
  /* 在类中添加一个方法用于处理多语言转换*/
 getTranslatedSeaJudge = (type, sLanguage) => {
  const { seaJudge } = commonConfig;
  const judgeMap = seaJudge[type] || [];

  // 定义翻译映射
  const translations = {
    sEnglish: {
      '包含': 'Contains',
      '不包含': 'Not Contains',
      '等于': 'Equal',
      '大于': 'Greater Than',
      '小于': 'Less Than',
      '大于等于': 'Greater Than or Equal',
      '小于等于': 'Less Than or Equal',
      '区间': 'Between',
      '区间(默认今天)': 'Between (Default Today)',
      '区间(默认昨天)': 'Between (Default Yesterday)',
      '区间时间': 'Between Time',
      '今日': 'Today',
      '今日未清': 'Unfinished Today',
      '今天之前': 'Before Today',
      '明天之前': 'Before Tomorrow',
      '后天之前': 'Before Day After Tomorrow',
      '本月': 'This Month',
      '上月': 'Last Month',
      '本周': 'This Week',
      '上周': 'Last Week',
      '本期间': 'This Period'
    },
    sBig5: {
      '包含': '包含',
      '不包含': '不包含',
      '等于': '等於',
      '大于': '大於',
      '小于': '小於',
      '大于等于': '大於等於',
      '小于等于': '小於等於',
      '区间': '區間',
      '区间(默认今天)': '區間(默認今天)',
      '区间(默认昨天)': '區間(默認昨天)',
      '区间时间': '區間時間',
      '今日': '今日',
      '今日未清': '今日未清',
      '今天之前': '今天之前',
      '明天之前': '明天之前',
      '后天之前': '後天之前',
      '本月': '本月',
      '上月': '上月',
      '本周': '本周',
      '上周': '上周',
      '本期间': '本期間'
    }
  };

  if (sLanguage === 'sEnglish' || sLanguage === 'sBig5') {
    return judgeMap.map(item => ({
      ...item,
      value: translations[sLanguage][item.value] || item.value
    }));
  }

  return judgeMap;
};

  render() {
    const {
      searchSolution, searchColumns, expand, activeTagId, sType, modalVisible, modalSolutionNameVisible, confirmLoading, masterData, columnSettingVisible, app,
    } = this.props;
    const highlightColor = true;
    const showSearchSolutionConfig = {
      sId: commonUtils.createSid(),
      sName: 'sSearchSolutionId',
      sDropDownType: 'sql',
      iVisCount: 1,
      sVisColumnName: 'sName',
      dropDownData: searchSolution,
      placeholder: commonFunc.showMessage(app.commonConst, 'pleaseChooseSolution'), /* 请选择方案 */
    };
    const showTypeSearchSolutionProps = this.handleSearchProps(showSearchSolutionConfig);
    showTypeSearchSolutionProps.formItemLayout = { wrapperCol: { span: 24 } };
    /* 过滤另存方案界面显示 */
    const showSolutionNameConfig = {
      sId: commonUtils.createSid(),
      sName: 'sSolutionName',
      sDropDownType: '',
      bNotEmpty: modalVisible,
      showName: commonFunc.showMessage(app.commonConst, 'solutionName'), /* 方案名称 */
    };
    /* 修改方案名称界面显示 */
    const updSolutionNameConfig = {
      sId: commonUtils.createSid(),
      sName: 'sSolutionName',
      sDropDownType: '',
      bNotEmpty: modalSolutionNameVisible,
      showName: commonFunc.showMessage(app.commonConst, 'solutionName'), /* 方案名称 */
    };
    let bBtnDelDisabled = false;
    let bBtnColumnSetting = false;/* 列显示配置按钮是否可用 */
    if (commonUtils.isNotEmptyArr(searchSolution) && commonUtils.isNotEmptyObject(masterData)) {
      const iIndex = searchSolution.findIndex(item => item.sId === masterData.sSearchSolutionId);
      if (iIndex > -1) {
        bBtnDelDisabled = this.props.app.userinfo.sType !== 'sysadmin' && searchSolution[iIndex].sType === 'common';
        bBtnColumnSetting = bBtnDelDisabled;
      }
      /* 清空方案时,列显示配置按钮不可用 */
      const sSearchSolutionId = commonUtils.isNotEmptyObject(masterData.sSearchSolutionId) ? masterData.sSearchSolutionId : '';
      if (commonUtils.isEmptyObject(sSearchSolutionId)) {
        bBtnColumnSetting = true;
      }
    } else {
      bBtnColumnSetting = true; /* 没有方案时 */
    }
    const showTypeSolutionNameProps = this.handleSearchProps(showSolutionNameConfig);
    const updSolutionNameConfigProps = this.handleSearchProps(updSolutionNameConfig);/* 修改方案名称 */
    /* 列自定义配置 */
    const searchColumnShowProps = {
      ...commonBusiness.getTableTypes('searchColumnShow', this.props),
      tableBelone: 'table',
      enabled: true,
      onDoubleClick: undefined,
      sUseInfo: '',
      tableProps: { rowKey: 'sId', AutoTableHeight: 450 },
    };
    const AddCondition = commonFunc.showMessage(app.commonConst, 'AddCondition');/* 添加条件 */
    const BtnSave = commonFunc.showMessage(app.commonConst, 'BtnSave');/* 保存 */
    const BtnUpd = commonFunc.showMessage(app.commonConst, 'BtnUpd');/* 修改 */
    const setDelete = commonFunc.showMessage(app.commonConst, 'setDelete');/* 删除 */
    const setDefault = commonFunc.showMessage(app.commonConst, 'setDefault');/* 设置默认 */
    const columnDisplaySetting = commonFunc.showMessage(app.commonConst, 'ColumnDisplaySetting');/* 列显示配置 */
    const btnSearch = commonFunc.showMessage(app.commonConst, 'btnSearch');/* 搜索 */
    const clearOut = commonFunc.showMessage(app.commonConst, 'ClearOut');/* 清空 */
    const btnSaveAndSearch = commonFunc.showMessage(app.commonConst, 'btnSaveAndSearch');/* 保存并查询 */
    const solutionFilterSave = commonFunc.showMessage(app.commonConst, 'solutionFilterSave');
    const solutionFilterNameUpd = commonFunc.showMessage(app.commonConst, 'solutionFilterNameUpd');

    const modalCom = (
      <AntdDraggableModal
        visible={modalVisible}
        title={solutionFilterSave}
        onOk={e => setTimeout(() => {
          this.handleOk(e);
        }, 300)}
        onCancel={this.handleCancel.bind(this, 'modalVisible')}
        okText="确认"
        cancelText="取消"
        confirmLoading={confirmLoading}
        maskClosable={false}
      >
        <FormItem>
          <ShowType {...showTypeSolutionNameProps} />
        </FormItem>
      </AntdDraggableModal>
    );
    const modalSolutionNameCom = (
      <AntdDraggableModal visible={modalSolutionNameVisible} title={solutionFilterNameUpd} onOk={this.handleSolutionNameOk} onCancel={this.handleCancel.bind(this, 'modalSolutionNameVisible')} okText="确认" cancelText="取消" confirmLoading={confirmLoading} maskClosable={false}>
        <FormItem>
          <ShowType {...updSolutionNameConfigProps} />
        </FormItem>
      </AntdDraggableModal>
    );
    const columnSettingCom = (
      <AntdDraggableModal
        bodyStyle={{ paddingBottom: 0, maxHeight: 460, zIndex: 2000 }}
        width={1100}
        title={columnDisplaySetting}
        onCancel={this.handleCancel.bind(this, 'columnSettingVisible')}
        visible={columnSettingVisible}
        footer={[
          <Button key="back" onClick={this.handleCloumnSettingDelete.bind(this, 'columnSettingVisible')}>{setDelete}</Button>,
          <Button key="primary" onClick={this.handleColumnSettingSave.bind(this, 'columnSettingVisible')}>{btnSaveAndSearch}</Button>,
        ]}
      >
        <div id="searchColumn">
          <div style={{ marginTop: 0, height: '500px', overflowY: 'hidden' }} >
            <StaticEditTable {...searchColumnShowProps} noVlist />
          </div>
        </div>
      </AntdDraggableModal>
    );
    return (
      <div style={{ overFlow: 'hidden', maxHeight: '100%' }}>
        {commonUtils.isEmptyArr(searchColumns) ? '' :
        <div className={`${styles.fastFilter} searchComponentContainer_${app.currentPane.key || 0}`}>
          <div className={styles.solutionList} >
            <ShowType {...showTypeSearchSolutionProps} placeholder={commonFunc.showMessage(app.commonConst, 'pleaseChooseSolution')} />
          </div>
          <div className={`${styles.advRow} ${expand ? styles.advRowActive : ''}`}>
            <div className={styles.filterList}>
              {this.handleFields(searchColumns)}
              <div className={styles.filterBtn}>
                {
                  (activeTagId === 'default' || (sType === 'common' && this.props.app.userinfo.sType !== 'sysadmin')) ?
                    <Row>
                      <Col span={20}>
                        <div className={styles.advButton}>
                          <Button
                            type="primary"
                            onClick={this.handleAdd}
                          >
                            <PlusOutlined /> {AddCondition}
                          </Button>
                        </div>
                      </Col>
                      <Col span={4}>
                        <div className={styles.advButton}>
                          <Button onClick={this.handleSave}>
                            {BtnSave}
                          </Button>
                        </div>
                      </Col>
                    </Row>
                    :
                    <Row>
                      <Col span={4}>
                        <div className={styles.advButton}>
                          <Button
                            type="primary"
                            onClick={this.handleAdd}
                          >{AddCondition}
                          </Button>
                        </div>
                      </Col>
                      <Col span={3}>
                        <div className={styles.advButton}>
                          <Button onClick={this.handleSave}>
                            {BtnSave}
                          </Button>
                        </div>
                      </Col>
                      <Col span={3}>
                        <div className={styles.advButton}>
                          <Button onClick={this.handleUpd} disabled={bBtnDelDisabled}>
                            {BtnUpd}
                          </Button>
                        </div>
                      </Col>
                      <Col span={3}>
                        <div className={styles.advButton}>
                          <Button type="danger" onClick={this.handleDel} disabled={bBtnDelDisabled}>
                            {setDelete}
                          </Button>
                        </div>
                      </Col>
                      <Col span={4}>
                        <div className={styles.advButton}>
                          <Button onClick={this.handleDefault}>
                            {setDefault}
                          </Button>
                        </div>
                      </Col>
                      <Col span={7}>
                        <div className={styles.advButton}>
                          <Button
                            type="primary"
                            onClick={this.handleSaveColumnSetting}
                            disabled={bBtnColumnSetting}
                          >
                            {columnDisplaySetting}
                            <SettingOutlined />
                          </Button>
                        </div>
                      </Col>
                    </Row>
                }
              </div>
            </div>
          </div>
          <div className={styles.toggleBtn}>
            <Button type="primary" className={highlightColor ? styles.advTogIcon_Highlight : styles.advTogIcon_Gray} onClick={this.handeToggle} icon={<LegacyIcon type={expand ? 'up' : 'down'} />} />
          </div>
          <div className={styles.advCol}>
            <Space>
              <Button type="primary" onClick={this.handleSearch} className="search-btn"><SvgIcon iconClass="search" offsetY="2" size="12" fill="#fff"></SvgIcon>&nbsp;{btnSearch}</Button>
              <Button type="default" className="reset-btn" onClick={this.handleReset}><SvgIcon iconClass="close" offsetY="2" size="12" fill="rgba(0, 0, 0, 0.85)"></SvgIcon>&nbsp;{clearOut}</Button>
            </Space>
          </div>
          {modalVisible && modalCom}
          {modalSolutionNameVisible && modalSolutionNameCom}
          {columnSettingVisible && columnSettingCom}
        </div>
        }
      </div>
    );
  }
}
