import React, { useEffect, useState } from 'react';
import type { ColsTreeProps } from '@qx/common';
import { QxFieldSetter } from '@qx/common';
import {QxFieldPopover} from '@qx/common';
import { QxBaseIcon } from '@qx/common';
import { FunctionOutlined } from '@ant-design/icons';
import {
  Button,
  Col,
  Dropdown,
  Input,
  Menu,
  message,
  Row,
  Space,
  Tooltip,
  TreeSelect,
  Typography,
} from 'antd';
import { cloneDeep, range, isEqual, size, isEmpty, findIndex } from 'lodash-es';
import {
  FIELD_TYPE_PROPS,
  getOperationsType,
  ConditionCol,
  OperatorCol,
  OperatorColViewFilter,
  ParamValueType,
} from './filter';
import type {
  ParamMappingProps,
  QxQueryProps,
  SqlTypeProps,
  OptionFieldExtract,
  OperatorProps,
} from './filter';

import './index.less';

const { TextArea } = Input;
const { Text } = Typography;

enum SQL_TYPE {
  OR = 'OR',
  AND = 'AND',
  CUSTOM = 'CUSTOM',
}

export type FieldExtractProps = {
  fieldType: string;
  widget: string;
};

export type TableFieldProps = {
  name: string | React.ReactNode;
  code: string;
  completeName?: string;
  fieldType: string;
  fieldGroupType: FIELD_TYPE_PROPS | undefined;
  extract: OptionFieldExtract;
  selectable?: boolean;
  children?: TableFieldProps[] | null;
};

export interface FilterConditionProps {
  value: QxQueryProps;
  //请求参数，单选多选查询选项等
  params?: { appCode?: string; funCode: string; useId?: boolean };
  tableFields: TableFieldProps[];
  colsTree?: ColsTreeProps[];
  onChange: (val: QxQueryProps, expressionFlag?: boolean) => void;
  // 值是否为混合类型（或输入、选值同时存在）
  isMixValue?: boolean;
  // 查询选项同"值"选项（流程连线设置下的特定业务支持）
  isUseValOption?: boolean;
  // 排除值选项（选项中不显示已选择的value字段）
  excludeValue?: boolean;
  // 是否是业务规则使用，业务规则需要删除未配置的系统字段
  rule?: boolean;
  getItem?: (item: any) => void;
  showFieldOpt?: boolean;
  titleDom?: React.ReactNode; // 标题
}

export const getWidgetsIcon = (widgetName: string) => {
  let iconType: string = '';
  switch (widgetName) {
    case 'qxInput':
      iconType = 'icon-field-text';
      break;
    case 'qxNumber':
      iconType = 'icon-field-num';
      break;
    case 'dateTime':
    case 'qxDatetime':
      iconType = 'icon-field-datetime';
      break;
    case 'qxTime':
      iconType = 'icon-field-time';
      break;
    case 'qxSwitch':
      iconType = 'icon-field-boolean';
      break;
    case 'qxSelect':
      iconType = 'icon-field-select';
      break;
    case 'qxMultiSelect':
      iconType = 'icon-field-multi-select';
      break;
    case 'qxMobile':
      iconType = 'icon-field-mobile';
      break;
    case 'qxMoney':
      iconType = 'icon-field-finance';
      break;
    case 'qxEmail':
      iconType = 'icon-field-email';
      break;
    case 'qxPercent':
      iconType = 'icon-field-percent';
      break;
    case 'qxUpload':
      iconType = 'icon-field-file';
      break;
    case 'qxUploadImage':
      iconType = 'icon-field-img';
      break;
    case 'qxAddress':
      iconType = 'icon-field-address';
      break;
    case 'qxRichText':
      iconType = 'icon-field-richtext';
      break;
    case 'qxLocation':
      iconType = 'icon-field-location';
      break;
    case 'orgSelector':
      iconType = 'icon-field-department';
      break;
    case 'userSelector':
      iconType = 'icon-field-user';
      break;
    case 'createdBy':
    case 'created_by':
      iconType = 'icon-field-created-by';
      break;
    case 'createdAt':
    case 'created_at':
      iconType = 'icon-field-created-at';
      break;
    case 'updatedBy':
    case 'updated_by':
      iconType = 'icon-field-updated-by';
      break;
    case 'updatedAt':
    case 'updated_at':
      iconType = 'icon-field-updated-at';
      break;
    case 'qxBizNo':
      iconType = 'icon-field-no';
      break;
    case 'relSelector':
      iconType = 'icon-field-rel';
      break;
    case 'relField':
      iconType = 'icon-field-ref';
      break;
    case 'subform':
    case 'table':
      iconType = 'icon-field-subform';
      break;
    case 'qxTree':
      iconType = 'icon-field-tree';
      break;
    case 'qxFormula':
      iconType = 'icon-field-formula';
      break;
    case 'qxDivider':
      iconType = 'icon-field-divider';
      break;
    case 'qxRemark':
      iconType = 'icon-field-remark';
      break;
    case 'qxEmbed':
      iconType = 'icon-field-embed ';
      break;
    case 'qxTabs':
      iconType = 'icon-editor_tab';
      break;
    case 'qxLayout':
      iconType = 'icon-editor_grid';
      break;
    case 'simple':
      iconType = 'icon-editor_layout';
      break;
    case 'tabC':
      iconType = 'icon-editor_tab';
      break;
    case 'layout':
      iconType = 'icon-editor_grid';
      break;
    default:
      iconType = 'icon-field-text';
      break;
  }
  return <QxBaseIcon type={iconType} />;
};

/**
 * 数据筛选（系统过滤条件）
 *
 * @param value           默认值（同onChange传入值类型）
 * @param onChange        组件整体返回值
 * @param tableFields     "条件"列表数据
 * @param colsTree        "值"选项集
 * @param isMixValue      是否为混合值（可选、可填、可用运算符）
 * @param excludeValue
 * @param isUseValOption  查询选项同值选项（流程连线设置下的特定业务支持）
 * @param hideCurrentUser 用户组件隐藏当前用户
 * @param hideCurrentOrg 部门组件隐藏当前人所在部门
 * @param dateSelected 时间可选日期 标识
 * @constructor
 */

export interface paramFilterConditionProps extends FilterConditionProps {
  inputDis?: boolean;
  showFieldOpt?: boolean;
  hideCurrentUser?: boolean;
  hideCurrentOrg?: boolean;
  dateSelected?: boolean;
}

export const QxFilterCondition: React.FC<paramFilterConditionProps> = ({
  value,
  onChange,
  tableFields,
  colsTree,
  isUseValOption,
  isMixValue = false,
  excludeValue = false,
  hideCurrentUser,
  hideCurrentOrg,
  showFieldOpt,
  inputDis,
  dateSelected = true,
  ...props
}) => {
  const [tFieldsLocal, setTFieldsLocal] = useState<TableFieldProps[]>([]);
  const [flattenFields, setFlattenFields] = useState<any>({});
  const [expressionErr, setExpressionErr] = useState<string[]>(); // "表达式"校验 变量

  useEffect(() => {
    if (!tableFields && !isUseValOption) {
      return;
    }

    let valOptions: TableFieldProps[] = [];
    const _flattenFields: any = {};
    if (isUseValOption && colsTree) {
      const tableFieldsGenHandle = (cTrees: ColsTreeProps[]) => {
        const tableFieldsGen: TableFieldProps[] = [];
        cTrees.map((col) => {
          const item: any = {
            ...col,
            name: col?.title,
            code: col?.key,
            completeName: col?.completeName,
            fieldGroupType: col?.fieldGroupType,
            fieldType: col?.widget || '',
            params: col?.params,
            extract: col.extract
              ? col.extract
              : {
                  fieldType: '',
                  widget: col?.widget || '',
                },
            selectable: true,
          };
          _flattenFields[item.code] = { ...item, name: '', children: null };
          if (col?.children && col?.children.length > 0) {
            item.children = tableFieldsGenHandle(col?.children) || [];
          } else if (col?.children && col?.children.length <= 0) {
            item.children = undefined;
          }
          tableFieldsGen.push(item);
        });
        return tableFieldsGen;
      };
      valOptions = tableFieldsGenHandle(colsTree);
    }

    const tFieldsLocalTem: TableFieldProps[] = isUseValOption
      ? valOptions
      : cloneDeep(tableFields);

    if (!(isUseValOption && colsTree)) {
      tFieldsLocalTem
        .filter((field) => field?.extract)
        .map((field) => {
          //过滤extract不存在
          // 字段原始fieldType
          field.fieldType = field?.extract?.fieldType || '';
          // 归类后的fieldType
          field.fieldGroupType = getOperationsType(field?.extract);
          if (field.children && field.children.length > 0) {
            field.children.map((item) => {
              _flattenFields[item.code] = { ...item, name: '' };
            });
          } else {
            _flattenFields[field.code] = { ...field, children: null, name: '' };
          }
        });
    }

    // TODO
    // 过滤开始节点中=数组
    tFieldsLocalTem.map((_item) => {
      if (_item.code == '5dec2f28-8dd1-48be-a14d-e7c4e3cdb89d') {
        if (_item?.children && _item?.children?.length > 0) {
          _item?.children.map((preItem, index) => {
            if (preItem?.fieldGroupType == 'ARRAY') {
              _item?.children?.splice(index, 1);
            }
          });
        }
      }
    });

    setTFieldsLocal(cloneDeep(tFieldsLocalTem));
    setFlattenFields(_flattenFields);
  }, [tableFields]);

  /**
   * 初始值设置
   */
  const [paramMappings, setParamMappings] = useState<ParamMappingProps[]>();
  const [sqlType, setSqlType] = useState<SqlTypeProps>();
  const [expression, setExpression] = useState<string>();
  const [expandKey, setExpandKey] = useState<any>([]);

  useEffect(() => {
    if (value && value.expression && value.expression !== '') {
      value.expression = value.expression.replaceAll('fx', 'and');
    }
    setParamMappings(cloneDeep(value?.paramMappings) || undefined);
    setExpression(cloneDeep(value?.expression || ''));
    setSqlType(cloneDeep(value?.sqlType || SQL_TYPE.AND));
  }, [value]);

  useEffect(() => {
    const isSame =
      isEqual(value?.expression, expression) &&
      isEqual(value?.paramMappings, paramMappings) &&
      isEqual(value?.sqlType, sqlType);
    if (isSame || paramMappings === undefined) {
      return;
    }

    const expressionCp: string = cloneDeep(expression) || '';
    const expRange: any[] = [];
    range(1, Number(paramMappings?.length || 0) + 1).map((val) => {
      expRange.push(val.toString());
    });
    expRange.push(...[' ', SQL_TYPE.AND, SQL_TYPE.OR]);
    cloneDeep(expRange).map((v) => {
      expRange.push(`${v})`);
      expRange.push(`(${v}`);
    });
    expRange.push(...['(', ')']);
    const errItem = (expressionCp.split(' ') || []).filter(
      (vItem) => !expRange.includes(vItem.toUpperCase()),
    );
    onChange(
      {
        paramMappings: paramMappings,
        sqlType: !sqlType || !paramMappings || paramMappings.length === 0 ? SQL_TYPE.AND : sqlType,
        expression,
      },
      sqlType === 'CUSTOM' && errItem && errItem.length > 0,
    );
  }, [paramMappings, sqlType, expression]);

  /**
   * "表达式"校验
   */
  useEffect(() => {
    const expressionCp: string = cloneDeep(expression) || '';
    const expRange: any[] = [];
    range(1, Number(paramMappings?.length || 0) + 1).map((val) => {
      expRange.push(val.toString());
    });
    expRange.push(...[' ', SQL_TYPE.AND, SQL_TYPE.OR]);
    cloneDeep(expRange).map((v) => {
      expRange.push(`${v})`);
      expRange.push(`(${v}`);
    });
    expRange.push(...['(', ')']);
    const errItem = (expressionCp.split(' ') || []).filter(
      (vItem) => !expRange.includes(vItem.toUpperCase()),
    );
    setExpressionErr(errItem);
  }, [expression, paramMappings?.length]);

  /**
   * 根据`code`获取对应列对象
   * `tFieldsLocal`中的关键属性`fieldGroupType`，由`getOperationsType`设置。`fieldGroupType`为字段原始类型归类处理生成
   * @param di
   */
  const getCol: any = (di: string) => {
    const tableFieldMap: Record<string, TableFieldProps> = {};

    const fieldArr = (data: TableFieldProps[]) => {
      data.map((col) => {
        if (col.children) {
          if (col.children?.length > 0) {
            fieldArr(col.children);
          }
        } else {
          tableFieldMap[col.code] = { ...col, children: null };
        }
      });
    };
    fieldArr(tFieldsLocal);
    return tableFieldMap[di];
  };

  /**
   * 新增筛选条件
   */
  const onAddCondition = (e: any) => {
    const maxParamsCount = 20;
    if (!paramMappings || paramMappings.length === 0) {
      /* setSqlType(SQL_TYPE.AND);*/
    } else if (paramMappings.length >= maxParamsCount) {
      message.warning(`最多可设置${maxParamsCount}个条件。`);
      return;
    }

    const key = typeof e === 'string' ? e : e.key;
    const item: TableFieldProps = getCol(key) || tFieldsLocal[0];

    const mappingValueItem: ParamMappingProps = {
      field: item?.code,
      fieldType: item?.fieldType,
      fieldGroupType: item?.fieldGroupType,
      opt: ConditionCol[item?.fieldGroupType || '']?.operations[0].key,
      valuesObj: [],
    };
    const defKey = ConditionCol[item?.fieldGroupType || '']?.values?.[0]?.key;
    // 日期、时间不需要赋值
    if (
      defKey &&
      item.fieldGroupType &&
      item.fieldGroupType.indexOf(FIELD_TYPE_PROPS.DATE) === -1 &&
      item.fieldGroupType.indexOf(FIELD_TYPE_PROPS.TIME) === -1 &&
      item.fieldGroupType !== FIELD_TYPE_PROPS.BOOL
    ) {
      Object.assign(mappingValueItem, {
        valuesObj: [
          {
            type: ParamValueType.OPERATOR,
            value: defKey,
          },
        ],
      });
    }

    const conditionsNew: ParamMappingProps[] = cloneDeep(paramMappings || []);
    conditionsNew.push(mappingValueItem);
    setParamMappings(conditionsNew);
  };

  const getFieldGroupType = (fieldId: string) => {
    return getCol(fieldId)?.fieldGroupType;
  };

  const getFieldType = (fieldId: string) => {
    return getCol(fieldId)?.extract?.fieldType;
  };

  // 根据`key`获取对应列对象
  const getConditionColByKey = (
    key: string,
    fieldGroupType: FIELD_TYPE_PROPS,
    fieldType: FIELD_TYPE_PROPS,
  ) => {
    const ConditionColArr =
      ConditionCol[fieldType]?.operations || ConditionCol[fieldGroupType]?.operations || [];
    const i = findIndex(ConditionColArr, (o: OperatorProps) => {
      return o.key === key;
    });
    return ConditionColArr[i];
  };

  const getOperCol: any = (key: string) => {
    const operatorColKey = findIndex(OperatorCol, (item) => {
      return item.key === key;
    });
    return OperatorCol[operatorColKey];
  };

  const getOperationOptions = (fieldId: string) => {
    // @ts-ignore
    return (
      ConditionCol[getCol(fieldId)?.extract?.fieldType]?.operations ||
      ConditionCol[getCol(fieldId)?.fieldGroupType]?.operations ||
      []
    );
  };

  const optValTypeCheck = {
    // 条件是否为"为空"、"不为空"
    isEmptyType: (opt: any) => {
      return ['IS_NULL', 'NOT_NULL'].includes(opt || '');
    },
    // 范围类型
    isRangeType: (opt: any) => {
      return ['IN', 'NOT_IN'].includes(opt || '');
    },
    // 流程条件多选优化
    isMultiType: (opt: any) => {
      return ['BELONG', 'NOT_BELONG', 'INCLUDE', 'NOT_INCLUDE'].includes(opt || '');
    },
  };

  const sqlTypeTextConvert = (text: string) => {
    return text === SQL_TYPE.CUSTOM ? <FunctionOutlined style={{ fontSize: '16px' }} /> : text;
  };

  const [treeSelectShow, setTreeSelectShow] = useState<boolean>(false);
  const inputRef = React.useRef<any>(null);

  const getResultField = (fieldKey: string) => {
    if (fieldKey && fieldKey.includes('|')) {
      const fieldArr = fieldKey.split('|');
      if (fieldArr.length == 2) {
        return fieldArr[1].substring(0, fieldArr[1].length - 1);
      }
      return fieldKey;
    } else if (fieldKey && fieldKey.includes('.')) {
      const fieldArr = fieldKey.split('.');
      if (fieldArr.length == 2) {
        return fieldArr[1];
      }
    }
    return fieldKey;
  };

  /*const getUsefulData = (fieldKey: string) => {
    let nodeKey = fieldKey;
    let field = fieldKey;
    const fieldArr = fieldKey.split('|');
    if (fieldArr.length == 2) {
      nodeKey = fieldArr[0].substr(2)
      field = fieldArr[1].substr(0, fieldArr[1].length - 1)
    }
    for (let i = 0; colsTree && i < colsTree.length; i++) {
      if (nodeKey !== colsTree[i].key) {
        continue;
      }
      const children = colsTree[i].children;
      if (children) {
        for (let j = 0; children && j < children.length; j++) {
          if (children[j].key === fieldKey) {
            return {field, params: children[j].params, widget: children[j].widget}
          }
        }
      } else {
        return {field, params: colsTree[i].params, widget: colsTree[i].widget}
      }
    }
    return {field};
  }*/

  const getFields = (fields: any[]) => {
    if (!props.rule) {
      return fields;
    } else {
      // 业务规则是前台处理，只处理已经配置的系统字段
      return fields.filter((item) => !item.extract.$default);
    }
  };

  const filterTreeNode = (inputValue: string, treeNode: any) => {
    try {
      if (treeNode.name.includes?.(inputValue) || treeNode.titleStr?.includes?.(inputValue)) {
        return true;
      } else {
        return treeNode.children?.every((node: any) => filterTreeNode(inputValue, node));
      }
    } catch (error) {
      return true;
    }
  };

  const handleUserAndOrg = (fieldType: any, opt: any) => {
    if (
      (fieldType == 'USER' || fieldType == 'ORG') &&
      (opt == 'NOT_BELONG' || opt == 'BELONG' || opt == 'INCLUDE' || opt == 'NOT_INCLUDE')
    ) {
      return 2;
    } else if (fieldType == 'USER' || fieldType == 'ORG') {
      return 1;
    }
  };

  const handleItemTag = (fieldType: any, opt: any) => {
    if (
      ((fieldType == 'USER' || fieldType == 'ORG') &&
        (opt == 'NOT_BELONG' || opt == 'BELONG' || opt == 'INCLUDE' || opt == 'NOT_INCLUDE')) ||
      (fieldType == 'REL' && (opt == 'BELONG' || opt == 'NOT_BELONG')) ||
      (fieldType == 'TREE' &&
        (opt == 'BELONG' || opt == 'NOT_BELONG' || opt == 'INCLUDE' || opt == 'NOT_INCLUDE')) ||
      ['REL_MULTI', 'USER_MULTI', 'ORG_MULTI'].indexOf(fieldType) > -1
    ) {
      return true;
    } else if (fieldType == 'USER' || fieldType == 'ORG') {
      return false;
    }
  };

  return (
    <>
      <div className={'qx-conditions__header'}>
        {props?.titleDom || <span> </span>}
        {Boolean(isUseValOption) ? (
          <div style={{position: 'relative'}}>
            <Button
              disabled={(paramMappings && paramMappings?.length > 20)}
              size="small"
              type={'link'}
              onClick={() => setTreeSelectShow(!treeSelectShow)}
            >
              <QxBaseIcon style={{fontSize: 16}} type={'qx-icon-plus'} />
              添加条件
            </Button>
            <TreeSelect
              ref={inputRef}
              // showSearch
              style={{
                position: 'absolute',
                width: '200px',
                right: 0,
                zIndex: 1,
                display: treeSelectShow ? 'block' : 'none',
              }}
              dropdownStyle={{
                maxHeight: 500,
                overflow: 'auto',
                minWidth: '200px',
              }}
              fieldNames={{
                label: 'name',
                value: 'code',
                children: 'children',
              }}
              treeData={tFieldsLocal || []}
              placeholder="请选择"
              open={treeSelectShow}
              // treeDefaultExpandAll
              treeDefaultExpandedKeys={colsTree && colsTree[0] && [colsTree[0]?.key]}
              treeExpandedKeys={expandKey}
              onTreeExpand={(val: any) => {
                setExpandKey(val);
              }}
              onSelect={(val: string, record: any) => {
                if (!record?.fieldGroupType && !record?.fieldType) {
                  return;
                }
                if (record?.fieldGroupType == 'OBJECT' || record?.fieldGroupType == 'ARRAY') {
                  return;
                }
                if (record?.children?.length && record?.fieldGroupType == 'REL') {
                  return;
                }
                setTreeSelectShow(false);
                onAddCondition(val);
              }}
              filterTreeNode={filterTreeNode}
            />
          </div>
        ) : (
          <QxFieldPopover
            data={getFields(tableFields || [])}
            onSelect={(field) => onAddCondition(field.code)}
            trigger={(paramMappings && paramMappings?.length > 20) ? undefined : 'click'}
          >
            <Button
              disabled={(paramMappings && paramMappings?.length > 20)}
              size="small"
              type={'link'}
            >
              <QxBaseIcon style={{fontSize: 16}} type={'qx-icon-plus'} />
              添加条件
            </Button>
          </QxFieldPopover>
        )}
      </div>
      <div className={'qx-conditions'}>
        {!!paramMappings?.length &&
          !isEmpty(flattenFields) &&
          (paramMappings || []).map((item, index) => {
            const fieldInfo = flattenFields[item.field];
            const _isMultiType =
              [
                'REL_MULTI',
                'ENUM',
                'ENUM_MULTI',
                'TEXT',
                // 'TREE',
                'USER',
                'USER_MULTI',
                'ORG',
                'ORG_MULTI',
              ].indexOf(getFieldGroupType(item.field)) > -1 ||
              (['REL'].indexOf(getFieldGroupType(item.field)) > -1 &&
                (item?.opt == 'NOT_BELONG' || item?.opt == 'BELONG')) ||
              (['TREE'].indexOf(getFieldGroupType(item.field)) > -1 &&
                (item?.opt == 'NOT_BELONG' ||
                  item?.opt == 'BELONG' ||
                  item?.opt == 'INCLUDE' ||
                  item?.opt == 'NOT_INCLUDE'));
            // 可 多选回显字段
            const _isMultiTypeField =
              [
                'REL_MULTI',
                'ENUM',
                'ENUM_MULTI',
                'TEXT',
                // 'TREE',
                // 'USER',
                'USER_MULTI',
                // 'ORG',
                'ORG_MULTI',
              ].indexOf(getFieldGroupType(item.field)) > -1;

            return (
              <Row
                className={`qx-condition-item`}
                key={item.field + (index + '')}
              >
                <Col
                  span={2}
                  className={'qx-filter-cont-left'}
                >
                  <span className={'qx-cond-index'}>{index + 1}.</span>
                </Col>
                <Col
                  span={22}
                  className={'qx-filter-cont-left'}
                >
                  <div className={'qx-query-text-box'}>
                    <div className={'qx-query-text-content'}>
                      <Text
                        className={'qx-query-text'}
                        ellipsis={{
                          tooltip: `${
                            getCol(item.field)
                              ? typeof getCol(item?.field)?.name === 'string'
                                ? getCol(item?.field)?.name
                                : getCol(item?.field)?.completeName || ''
                              : '已删除'
                          }`,
                        }}
                      >
                        {getCol(item.field) ? (
                          <>
                            {isUseValOption ? null : getWidgetsIcon(fieldInfo?.extract?.widget)}
                            &nbsp;
                            {getCol(item?.field)?.name}
                          </>
                        ) : (
                          <span style={{ color: 'red' }}>已删除</span>
                        )}
                      </Text>

                      {/* 条件选择 */}
                      {getOperationOptions(item?.field) &&
                        getOperationOptions(item?.field).length > 0 && (
                          <Dropdown
                            dropdownRender={() => (
                              <Menu>
                                {getOperationOptions(item?.field).map((oVal: any, oKey: number) => (
                                  <Menu.Item
                                    key={oKey.toString()}
                                    onClick={(e) => {
                                      const itemTem = cloneDeep(item);
                                      itemTem.opt = getOperationOptions(item.field)[e.key].key;
                                      // "为空"、"不为空"条件时，置空"值"
                                      if (optValTypeCheck.isEmptyType(itemTem?.opt)) {
                                        itemTem.valuesObj = [];
                                      }

                                      // 切换到非'范围'类型时，删除第2个值
                                      if (optValTypeCheck.isRangeType(itemTem?.opt)) {
                                        itemTem.valuesObj = (itemTem.valuesObj || []).filter(
                                          (it) => it?.isRange,
                                        );
                                      } else if (
                                        optValTypeCheck.isMultiType(itemTem?.opt) ||
                                        _isMultiTypeField
                                      ) {
                                      } else {
                                        const vals = (itemTem.valuesObj || []).map(
                                          (it) => it?.isRange,
                                        );
                                        if (size(vals) > 1) {
                                          itemTem.valuesObj = [itemTem.valuesObj[0]];
                                        }
                                      }
                                      const conditionArrNew = cloneDeep(paramMappings) || [];
                                      conditionArrNew.splice(index, 1, itemTem);
                                      setParamMappings(conditionArrNew);
                                    }}
                                  >
                                    {oVal.text}
                                  </Menu.Item>
                                ))}
                              </Menu>
                            )}
                          >
                            <Button
                              className={'qx-query-text-opt'}
                              type="text"
                              onClick={(e) => e.preventDefault()}
                            >
                              {
                                getConditionColByKey(
                                  item.opt || '',
                                  getFieldGroupType(item.field),
                                  getFieldType(item.field),
                                )?.text
                              }{' '}
                              <QxBaseIcon
                                style={{
                                  transform: 'rotate(-90deg)'
                                }}
                                className={'query-text-opt-btn'}
                                type={'qx-icon-left'}
                              />
                            </Button>
                          </Dropdown>
                        )}
                    </div>

                    <span className={'qx-ctrl-btn'}>
                      <Tooltip title="删除">
                        <span
                          className={'qx-condition-delete'}
                          key={index.toString()}
                          onClick={() => {
                            const conditionArrNew = cloneDeep(paramMappings);
                            (conditionArrNew || []).splice(index, 1);
                            if ((conditionArrNew || []).length < 2) {
                              setExpression('');
                              setSqlType(SQL_TYPE.AND);
                            }
                            setParamMappings(conditionArrNew);
                          }}
                        >
                          <QxBaseIcon type={'qx-icon-delete'} />
                        </span>
                      </Tooltip>
                    </span>
                  </div>
                  {/* 值选项 TODO field 在工作流那可能有问题 */}
                  <QxFieldSetter
                    value={item?.valuesObj}
                    params={props.params || fieldInfo?.params}
                    field={getResultField(
                      fieldInfo?.__datasetCubeSourceFieldId__ || fieldInfo?.key || fieldInfo?.code,
                    )}
                    widget={fieldInfo?.extract?.widget}
                    extract={fieldInfo?.extract}
                    fieldType={fieldInfo?.extract?.fieldType}
                    fieldGroupType={getFieldGroupType(item.field)}
                    userOrgisMultiple={handleUserAndOrg(getFieldType(item?.field), item?.opt)}
                    isMultiTag={handleItemTag(getFieldType(item?.field), item?.opt)}
                    isMultiple={_isMultiType}
                    isRange={optValTypeCheck.isRangeType(item.opt)}
                    disabled={optValTypeCheck.isEmptyType(item.opt)}
                    colsTree={colsTree}
                    isMixValue={isMixValue}
                    inputDis={inputDis}
                    hideCurrentUser={hideCurrentUser}
                    showFieldOpt={showFieldOpt}
                    hideCurrentOrg={hideCurrentOrg}
                    excludeKeys={excludeValue ? [item.field] : undefined}
                    onChange={(val) => {
                      setParamMappings((prevState) => {
                        const prevStateCp = cloneDeep(prevState) || [];
                        prevStateCp[index].valuesObj = val;
                        return prevStateCp;
                      });
                    }}
                    dateSelected={dateSelected}
                  />
                </Col>
              </Row>
            );
          })}
      </div>

      <div
        className={'qx-cond-ctrl cond-ctrl'}
        style={{
          display: size(paramMappings || []) > 1 ? 'block' : 'none',
          bottom: 0,
        }}
      >
        <Space style={{ display: 'flex', justifyContent: 'space-between' }}>
          <span>条件组合方式</span>
          <div style={{ cursor: 'pointer', textAlign: 'right' }}>
            <Dropdown
              dropdownRender={() => (
                <Menu>
                  {OperatorCol.map((oc: any) => (
                    <Menu.Item key={oc.key} onClick={(e) => setSqlType(cloneDeep(e.key))}>
                      {sqlTypeTextConvert(oc.text)}
                    </Menu.Item>
                  ))}
                </Menu>
              )}
            >
              <span>
                {sqlTypeTextConvert(getOperCol(sqlType)?.text)}
                <QxBaseIcon
                  style={{
                    marginLeft: 8,
                    marginTop: '0.1em',
                    transform: 'rotate(-90deg)'
                  }}
                  type={'qx-icon-left'}
                />
              </span>
            </Dropdown>
          </div>
        </Space>

        <div style={{ display: sqlType === SQL_TYPE.CUSTOM ? 'block' : 'none' }}>
          {/*<Text type="secondary" className="tip">*/}
          {/*  /!*（运算符：<code>AND</code>,<code>OR</code>,<code>(</code>,<code>)</code>）*!/*/}
          {/*  请使用 序号、小括号、逻辑符(and,or) 编写表达式*/}
          {/*</Text>*/}

          <TextArea
            className={'qx-conditions-input'}
            style={{
              borderColor: expressionErr && expressionErr.length > 0 ? '#ff4d4f' : '',
            }}
            defaultValue={expression}
            value={expression}
            onChange={(e: any) => {
              let val = e.target.value;
              val = val.replace(/\s+/gi, ' ');
              return setExpression(val);
            }}
            onBlur={() => {
              setExpression((prevState) => {
                return cloneDeep(prevState)?.trim().toUpperCase();
              });
            }}
            placeholder="请使用序号、小括号(英文)、逻辑符(and,or) 编写表达式例如：(1 and 2) or 3"
          />
          {expressionErr && expressionErr.length > 0 && (
            <span style={{ color: '#ff4d4f', fontSize: '12px' }}>
              {!!expression
                ? '请正确输入条件组合格式：序号与逻辑符之间需要空格隔开，括号用英文输入'
                : '条件组合方式不能为空'}
            </span>
          )}
        </div>
      </div>
    </>
  );
};