/* eslint-disable eqeqeq */
/* eslint-disable array-callback-return */
import Icon from '@ant-design/icons';
import {
  Button,
  Dropdown,
  Input,
  Menu,
  Modal,
  Select,
  Tree,
  message,
} from 'antd';
import type { TreeProps } from 'antd/lib/tree';
import React, { useCallback, useEffect, useRef, useState } from 'react';
import ParameterModal from './ParameterModal';
// import type { InputRef } from 'antd';
import {
  typeTranslateFieIdtype,
  typeTranslateGrouptype,
  typeTranslateWidget,
} from './constant';

import { QxBaseCondition, QxBaseIcon } from '@qx/common';
import moment from 'dayjs';
import { cloneDeep, isEmpty } from 'lodash-es';
import type { ParamDesignModel } from './constant';
import { uidGen } from './stringUtil';

import './style.less';

import { formatEnum } from '../constant';
import { SubDropIcon, SubNodeIcon } from './sub-node-icon';
const valueOptions = [
  { key: 'STRING', label: '文本' },
  { key: 'NUMBER', label: '数字' },
  { key: 'TIME', label: '日期' },
  { key: 'BOOL', label: '布尔' },
  { key: 'OBJECT', label: '对象' },
  { key: 'ARRAY', label: '数组' },
  /*  { key: 'ANNEX', label: '附件' },
    { key: 'PIC', label: '图片' },*/
  { key: 'FORM', label: '表单' },
  { key: 'USER', label: '人员' },
  { key: 'ORG', label: '部门' },
];

const getDefaultQxProps = (type: string) => {
  let _qxProps: any;
  switch (type) {
    case 'USER':
      _qxProps = {
        formId: 'PbOC6xBYOvZ1IB2mwUc',
        appId: 'eSnLZ42R2TA5Z18dNsJ',
        isTree: false,
      };
      break;
    case 'ORG':
      _qxProps = {
        formId: 'UsoOGnrJLPziSQwGDwj',
        appId: 'eSnLZ42R2TA5Z18dNsJ',
        isTree: true,
      };
      break;
    default:
      _qxProps = {};
      break;
  }
  return _qxProps;
};

const getParentKey = (key: React.Key, tree: ParamDesignModel[]): React.Key => {
  let parentKey: React.Key;
  for (let i = 0; i < tree.length; i++) {
    const node = tree[i];
    if (node.child) {
      if (node.child.some((item) => item.id === key)) {
        parentKey = node?.id;
      } else if (getParentKey(key, node.child)) {
        parentKey = getParentKey(key, node.child);
      }
    }
  }
  return parentKey!;
};

interface ParameterSettingProps {
  onChange: (val: any) => void;
  value: any;
  isHideSearch?: boolean; //是否隐藏搜索框
  isShowField?: boolean; // 是否显示下部默认值组件
  title?: React.ReactNode; // 左侧标题
  nodes?: any[];
  node?: any;
  // comHandleChange?: (val: any) => void;
  appId?: string; // 当前应用ID
  request?: any;
  type?: string;
  nodeType?: string | 'START' | 'END';
}

export const QxParameterSetting: React.FC<ParameterSettingProps> = (props) => {
  const [treeData, setTreeData] = useState<ParamDesignModel[]>([]); //展示树列表数据
  const [list, setList] = useState<ParamDesignModel[]>([]); //所有节点数据
  const [visible, setVisible] = useState<any>(false);
  const [inputKey, setInputKey] = useState<any>(0);
  const [expandedKeys, setExpandedKeys] = useState<React.Key[] | undefined>();
  const [defaultExpandedKeys, setDefaultExpandedKeys] = useState<React.Key[]>(); //树节点的id 有了则展开
  const [autoExpandParent, setAutoExpandParent] = useState(true);
  const [searchValue, setSearchValue] = useState('');
  const inputRef = useRef<any>(null);

  // const isDeveloper = window.sessionStorage.getItem('DEVELOPER_MODE') === '1';
  // const inputRef = useRef<InputRef>(null);
  //把所有子节点都展开拿出来
  const generateList = useCallback((_data: any[]): any[] => {
    const _listNode: any[] = [];
    (_data || []).map((item) => {
      if (item?.child) {
        const data = generateList(item?.child);
        data.map((value) => {
          _listNode.push(value);
        });
      }
      _listNode.push(item);
    });
    return _listNode;
  }, []);

  useEffect(() => {
    if (props?.value?.length > 0) {
      const value = cloneDeep(props?.value);
      const expandedArray: any = [];
      (value || []).map((_item: ParamDesignModel) => {
        expandedArray.push(_item.id);
      });
      setDefaultExpandedKeys(expandedArray);
      setTreeData(value);
      // const newData = generateTreeData(value, '')
      const Treelist = generateList(value);
      const newList = cloneDeep(Treelist);
      newList.map((_item) => {
        delete _item.child;
      });
      setList(newList);
    } else {
      setList([]);
      setTreeData([]);
    }
  }, [props?.value, generateList, visible]);

  //展开 所有子节点
  const generateTreeData = useCallback(
    (_data: any[], _keywords?: string): any[] => {
      const _treeNode: any[] = [];
      (_data || []).map((item) => {
        if (item.pid == _keywords) {
          const child = generateTreeData(_data, item.id);
          if (
            child?.length &&
            (item?.type == 'OBJECT' || item?.type == 'ARRAY')
          ) {
            item.child = child;
          }
          _treeNode.push(item);
        }
      });
      return _treeNode;
    },
    [],
  );

  //同名校验
  const validateCode: any = (
    // newList: ParamDesignModel[],
    data: ParamDesignModel,
    // newType: string,
  ) => {
    let treeList = cloneDeep(list);
    // todo 编辑重名bug 貌似有点问题 待修改
    treeList = (treeList || []).filter((item) => item.id != data.id);
    if (!treeList || treeList.length == 0) {
      return true;
    }
    for (let i = 0; i < treeList.length; i++) {
      // if (!data.pid) {
      const codeList = (treeList || []).map((_item: { code: string }) => {
        return _item.code;
      });
      if (codeList.indexOf(data.code) == -1) {
        return true;
      } else {
        return false;
      }
      // }
      // if (treeList[i].id == data.pid && treeList[i].type == 'OBJECT') {
      //   if (treeList[i]?.child?.length > 0) {
      //   }
      //   return true;
      // } else if (treeList[i].id == data.pid && treeList[i].type == 'ARRAY') {
      //   if (treeList[i]?.child?.length > 0) {
      //     return false;
      //   }
      //   return true;
      // } else {
      //   if (typeof validateCode(treeList[i].child, data) === 'boolean') {
      //     return validateCode(treeList[i].child, data);
      //   }
      // }
    }
  };

  //根据code更新tree里对应的key的值

  // @ts-ignore
  const handleChange = (e?: any, data?: any, code?: string) => {
    let value,
      oldValue,
      _qxProps = {};
    if (!!e?.target) {
      e.persist();
      value = e.target.value;
    } else {
      value = e;
    }
    if (
      data.type == 'TIME' &&
      (code == 'qxProps-min' || code == 'qxProps-max')
    ) {
      const { qxProps } = data;
      value = moment(value).format(formatEnum[qxProps?.format] || 'YYYY-MM-DD');
    } else if (code == 'qxProps-min' || code == 'qxProps-max') {
      if (value) {
        value = Number(value);
        if (isNaN(value)) {
          value = null;
        }
      } else {
        value = null;
      }
    }
    if (code == 'type') {
      if (data.child && data.child.length > 0) {
        message.error('该节点含有子节点，无法更改类型，请重试！');
        return;
      }
    }

    const isProps = code.indexOf('qxProps');
    const _newCode = isProps > -1 ? code.slice(8) : '';
    const _newData = cloneDeep(treeData);
    if (code == 'code') {
      data.code = value;
      const codeValid = validateCode(data);
      if (!codeValid) {
        message.error('参数编码不可重复');
        return;
      }
    }

    if (isProps == -1) {
      if (!value) {
        value = data[code];
        oldValue = 1;
      }
    }

    const loopChangeTree = (treeList: ParamDesignModel[]) => {
      for (let i = 0; i < treeList.length; i++) {
        if (treeList[i].id == data.id) {
          if (isProps > -1) {
            if (code == 'qxProps') {
              _qxProps = value;
            } else {
              _qxProps = { ...data.qxProps };
              _qxProps[_newCode] = value;
            }
            treeList[i].qxProps = {
              ..._qxProps,
            };
          } else {
            treeList[i][code] = value;
          }
          if (code == 'type') {
            treeList[i].qxProps = getDefaultQxProps(value);
            treeList[i].description = '';
            treeList[i].valueMapping = {
              ...data.valueMapping,
              mappingValues: [],
            };
            treeList[i].valuesObj = [];
            setInputKey(inputKey + 1);
          }
          return;
        } else if (treeList[i].child) {
          loopChangeTree(treeList[i].child);
        }
      }
    };
    loopChangeTree(_newData);
    console.log('_newData ===', _newData);
    setTreeData(_newData);
    if (oldValue) {
      setInputKey(inputKey + 1);
    }
    props?.onChange(_newData);
  };

  //高级拖拽后
  const handleDrop = (data: any) => {
    const newTreelist = generateList([...data]);
    setTreeData([...data]);
    setList(newTreelist);
    props?.onChange(data);
  };

  const handleCancel = (num: number) => {
    setInputKey(num);
    setVisible(false);
  };

  //打开高级
  const openModal = () => {
    setVisible(true);
  };

  // 删除树
  const deleteParameter = (e: any, data: ParamDesignModel) => {
    e.persist();
    let item = e.currentTarget;
    e.currentTarget.disabled = true;
    setTimeout(() => {
      item.disabled = false;
    }, 500);
    Modal.confirm({
      title: '删除',
      content: `确定要删除此参数吗？`,
      cancelText: '取消',
      okText: '确认',
      okType: 'danger',
      onOk: () => {
        const listData = cloneDeep(treeData);
        // const newData = generateTreeData(listData, '');
        const loopDeleteTree = (treeList: ParamDesignModel[]) => {
          for (let i = 0; i < treeList.length; i++) {
            if (treeList[i].id == data.id) {
              treeList.splice(i, 1);
              return;
            } else if (treeList[i].child) {
              loopDeleteTree(treeList[i].child);
            }
          }
        };
        loopDeleteTree(listData);
        props?.onChange(listData);
        message.success('删除成功');
      },
    });
  };

  const onDrop: TreeProps['onDrop'] = (info) => {
    const dropKey = info.node.key;
    const dragKey = info.dragNode.key;
    const dropPos = info.node.pos.split('-');
    const dropPosition =
      info.dropPosition - Number(dropPos[dropPos.length - 1]);
    const loop = (
      data: ParamDesignModel[],
      key: React.Key,
      callback: (
        node: ParamDesignModel,
        i: number,
        data: ParamDesignModel[],
      ) => void,
    ) => {
      for (let i = 0; i < data.length; i++) {
        if (data[i]?.id === key) {
          return callback(data[i], i, data);
        }
        if (data[i].child) {
          loop(data[i].child!, key, callback);
        }
      }
    };

    let data = cloneDeep(treeData);
    // Find dragObject
    let dragObj: ParamDesignModel;
    loop(data, dragKey, (item, index, arr) => {
      arr.splice(index, 1);
      dragObj = item;
    });
    if (!info.dropToGap) {
      // Drop on the content
      loop(data, dropKey, (item) => {
        item.child = item.child || [];
        if (
          item.type == 'OBJECT' ||
          (item.type == 'ARRAY' && item?.child?.length == 0)
        ) {
          dragObj.pid = item?.id;
          item.child.unshift(dragObj);
        } else {
          message.warning('无法拖拽至该节点，请重试！');
          data = treeData;
        }
        // where to insert 示例添加到头部，可以是随意位置
      });
    } else if (
      ((info.node as any).props.child || []).length > 0 && // Has child
      (info.node as any).props.expanded && // Is expanded
      dropPosition === 1 // On the bottom gap
    ) {
      loop(data, dropKey, (item) => {
        item.child = item.child || [];
        // where to insert 示例添加到头部，可以是随意位置
        item.child.unshift(dragObj);
        // in previous version, we use item.child.push(dragObj) to insert the
        // item to the tail of the child
      });
    } else {
      let ar: ParamDesignModel[] = [];
      let i: number;
      loop(data, dropKey, (_item, index, arr) => {
        ar = arr;
        i = index;
        dragObj.pid = '';
      });
      if (dropPosition === -1) {
        ar.splice(i!, 0, dragObj!);
      } else {
        ar.splice(i! + 1, 0, dragObj!);
      }
    }
    // @ts-ignore
    const codeValid = validateCode(dragObj);
    if (codeValid) {
      props.onChange(data);
    } else {
      message.warning('变量名不可重复');
    }
  };

  //搜索时
  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    e.persist();
    const { value } = e.target;

    if (!value) {
      setExpandedKeys(undefined);
      setAutoExpandParent(false);
      setSearchValue(value);
      return;
    }
    const newExpandedKeys = (list || [])
      .map((item) => {
        if (item.title.indexOf(value) > -1 || item.code.indexOf(value) > -1) {
          return getParentKey(item.id, treeData);
        }
        return null;
      })
      .filter((item, i, self) => item && self.indexOf(item) === i);
    setExpandedKeys(newExpandedKeys as React.Key[]);
    setSearchValue(value);
    setAutoExpandParent(true);
  };

  //普通增加节点，高级增加当前层级节点
  const handleAdd = (itemData?: any, _type: string = 'STRING') => {
    const _treeData = [...treeData];
    const id = uidGen();
    const code = uidGen(undefined, 6);

    // @ts-ignore
    const loopAddTreePid = (treeList: any[]) => {
      for (let i = 0; i < treeList.length; i++) {
        if (treeList[i].id == itemData.pid) {
          treeList[i].child.push({
            id,
            code,
            type: _type,
            pid: itemData.pid,
            title: '',
            qxProps: getDefaultQxProps(_type),
          });
          return;
        } else if (treeList[i].child) {
          loopAddTreePid(treeList[i].child);
        }
      }
    };

    const loopAddTree = (treeList: any[]) => {
      for (let i = 0; i < treeList.length; i++) {
        if (treeList[i].id == itemData.id) {
          const index = treeList.findIndex((item) => item.id == itemData.id);
          treeList.splice(index + 1, 0, {
            id,
            code,
            type: _type,
            // pid: itemData.pid,
            title: '',
            qxProps: getDefaultQxProps(_type),
          });
          return;
        } else if (treeList[i].child) {
          loopAddTree(treeList[i].child);
        }
      }
    };

    if (itemData && !itemData.pid) {
      loopAddTree(_treeData);
    } else if (!itemData) {
      _treeData.push({
        id,
        code,
        type: _type,
        title: '',
        qxProps: getDefaultQxProps(_type),
        pid: '',
      });
    } else if (itemData && !!itemData.pid) {
      loopAddTreePid(_treeData);
    }
    setTreeData(_treeData);
    props?.onChange(_treeData);

    setTimeout(() => {
      let myInput = document.getElementById(id);
      myInput.focus();
    }, 100);
  };

  //增加子节点
  const onAddTree = (key: string) => {
    const id = uidGen();
    const code = uidGen(undefined, 6);
    let level = [];
    const treeList = generateList(treeData);

    function addNode(pid: string, data: any) {
      data.forEach((item) => {
        if (item.id === pid) {
          if (item.child && item.child.length > 0) {
            item.child.push({ id, type: 'STRING', pid, code, title: '' });
          } else {
            item.child = [{ id, type: 'STRING', pid, code, title: '' }];
          }
        } else {
          if (item.child) {
            addNode(pid, item.child);
          }
        }
      });
      return data;
    }

    const loop = (pid: string) => {
      if (!!pid) {
        const index = treeList.findIndex((o: any) => o.id === pid);
        level.push(treeList[index]);
        loop(treeList[index].pid || '');
      } else {
        return level;
      }
    };

    loop(key);
    const _treeData = JSON.parse(JSON.stringify(treeData));
    let _treeDataNew = _treeData;
    // console.log('level', level)
    if (!!level && level.length < 6) {
      _treeDataNew = addNode(key, _treeData);
    } else if (!!level && level.length > 5) {
      message.error('子级最多只能有5层');
      return;
    }
    setInputKey(inputKey + 1);
    setTreeData(_treeDataNew);
    props?.onChange(_treeDataNew);
    if (expandedKeys) {
      setExpandedKeys([...expandedKeys, key]);
    } else {
      setExpandedKeys([key]);
    }

    setTimeout(() => {
      let myInput = document.getElementById(id);
      myInput.focus();
    }, 100);
  };

  const onExpand = (newExpandedKeys: any) => {
    setExpandedKeys(newExpandedKeys);
    setAutoExpandParent(false);
  };

  const checkShowTree = (_data: any) => {
    if (_data.type == 'ARRAY') {
      if (_data.child && _data.child.length > 0) {
        return false;
      }
    }
    return true;
  };

  const onFocus = (e) => {
    e.persist();
    const parentNode = e.currentTarget.parentNode.parentNode.parentNode;
    if (!!parentNode) {
      // parentNode.style.backgroundColor = '#bae7ff';
    }
  };

  const onBlur = (e) => {
    e.persist();
    const parentNode = e.currentTarget.parentNode.parentNode.parentNode;
    // const currentNode = e.target.parentNode;
    if (!!parentNode) {
      parentNode.style.backgroundColor = '';
    }
    // if (!!currentNode) {
    //   currentNode.style.width = '';
    // }
  };

  const changeField = (val: any, data: any) => {
    if (!val || isEmpty(val)) {
      return;
    }
    // console.log('changeField', val);
    const _newData = cloneDeep(treeData);
    const loopChangeTree = (treeList: ParamDesignModel[]) => {
      let newMappingValues = [],
        newValuesObj = [];
      for (let i = 0; i < treeList.length; i++) {
        if (treeList[i].id == data.id) {
          newMappingValues = val.map((item: any) =>
            item?.mappingValues ? item?.mappingValues[0] : '',
          );
          newValuesObj = val.map((item: any) =>
            item?.valuesObj ? item?.valuesObj[0] : {},
          );
          treeList[i].valueMapping = {
            ...data.valueMapping,
            mappingValues: newMappingValues,
          };
          treeList[i].valuesObj = newValuesObj;
          return;
        } else if (!!treeList[i]?.child?.length) {
          loopChangeTree(treeList[i].child || []);
        }
      }
    };
    loopChangeTree(_newData);
    setTreeData(_newData);
    props?.onChange(_newData);
  };

  // 渲染节点
  const renderTitle = (nodeData: any) => {
    let level = [];
    const treeList = generateList(treeData);
    const loop = (list: any[]) => {
      if (!!list?.pid) {
        const index = treeList.findIndex((o: any) => o.id === list.pid);
        level.push(treeList[index]);
        loop(treeList[index]);
      } else {
        return level;
      }
    };
    loop(nodeData);

    // const test = document.getElementByClassName('ant-tree-node-content-wrapper')
    // console.log('test', test)
    const treeLevel2 = !!nodeData.pid ? level.length : 0; //判断是多少层的子级
    const treeLevel = nodeData.child && nodeData.child.length > 0 ? 1 : 0; //判断是否有子级（是否有箭头）
    const leftD = 22 + treeLevel * 22 + treeLevel2 * 20;
    const strTitle = (nodeData.title as string) || '';
    const index = strTitle.indexOf(searchValue);
    const isShowTree = checkShowTree(nodeData);
    const disabled = !!props.type ? true : nodeData.disabled;
    return (
      <div>
        <Icon
          component={SubDropIcon}
          className={`drop-icon`}
          style={{ left: `-${leftD}px` }}
        />
        <div onBlur={(e) => onBlur(e)} tabIndex={0} onFocus={(e) => onFocus(e)}>
          <div
            style={{
              // padding: '2px',
              justifyContent: 'flex-end',
              display: 'flex',
              width: '100%',
              flexDirection: 'row-reverse',
            }}
          >
            <div className={'opt-btn'}>
              <Select
                value={nodeData.type}
                disabled={disabled}
                className={'select-tree'}
                bordered={false}
                getPopupContainer={(triggerNode) => triggerNode}
                onChange={(e: any) => {
                  handleChange(e, nodeData, 'type');
                }}
              >
                {valueOptions.map((item) => {
                  return (
                    <Select.Option key={item.key} value={item.key}>
                      {item.label}
                    </Select.Option>
                  );
                })}
              </Select>
              {(nodeData.type === 'OBJECT' || nodeData.type === 'ARRAY') &&
              isShowTree ? (
                <Button
                  icon={<Icon component={SubNodeIcon} />}
                  disabled={disabled}
                  type="link"
                  className="title-btn"
                  onClick={() => onAddTree(nodeData.id)}
                />
              ) : (
                <div
                  style={{ opacity: 0, height: 16, width: 22, marginLeft: 8 }}
                />
              )}
              <Button
                className="title-btn-del"
                icon={
                  <QxBaseIcon
                    className={'title-btn-del-btn'}
                    type={'qx-icon-delete'}
                  />
                }
                disabled={disabled}
                type="link"
                onClick={(e) => deleteParameter(e, nodeData)}
              />
            </div>
            <div className="opt-left">
              <span className="box-input">
                <Input
                  id={nodeData.id}
                  ref={inputRef}
                  status={!nodeData.title ? 'error' : ''}
                  placeholder={!nodeData.title ? '请输入参数名' : ''}
                  className={
                    index > -1 && searchValue
                      ? 'search-selected'
                      : 'title-input'
                  }
                  draggable={true}
                  onDragStart={(event) => {
                    event.stopPropagation();
                    event.preventDefault();
                  }}
                  key={inputKey}
                  style={{ width: '100%', borderRadius: '4px' }}
                  maxLength={50}
                  disabled={disabled}
                  bordered={true}
                  defaultValue={nodeData.title}
                  onBlur={(e) => {
                    handleChange(e, nodeData, 'title');
                  }}
                />
              </span>
            </div>
          </div>
          {props?.isShowField && (
            <div className="opt-left-down">
              <QxBaseCondition
                value={[
                  {
                    mappingValues: nodeData?.valueMapping?.mappingValues || [],
                    // disabled: disabled,
                    valuesObj: nodeData.valuesObj || [],
                    params: { appCode: 'appCode', useId: true },
                    // valueOptions: getValueOptions(nodeData),
                    field: nodeData.code,
                    widget: typeTranslateWidget(nodeData.type),
                    fieldType: typeTranslateFieIdtype(nodeData.type),
                    type: typeTranslateFieIdtype(nodeData.type),
                    fieldGroupType: typeTranslateGrouptype(nodeData.type),
                    isMixValue: false,
                    // typeTranslateFieIdtype(nodeData.type) == 'STRING'
                    //   ? true
                    //   : false,
                    // colsTree: props.nodeItem,
                    isMultiple: false,
                    // popupOnBody: true,
                    // inputDis: true,
                    showHeader: false,
                  },
                ]}
                onChange={(val) => changeField(val, nodeData)}
                showIdx={false}
                nodes={props.nodes}
                node={props.node}
                mode="variable"
              />
            </div>
          )}
        </div>
      </div>
    );
  };

  const onSelect = (e: any) => {
    handleAdd('', e.key);
  };
  return (
    <div>
      <div className={'qx-parameter-setting-content'}>
        <div style={{ display: 'flex', flexDirection: 'row' }}>
          {!props.type && (
            <Dropdown
              trigger={['click']}
              className={'hidden-select'}
              dropdownRender={() => (
                <Menu
                  items={valueOptions}
                  className={'dropdown'}
                  onClick={onSelect}
                />
              )}
            >
              <Button
                size={'small'}
                type={'link'}
                style={{
                  padding: '0 0 0 8px',
                }}
              >
                <QxBaseIcon
                  style={{ fontSize: '16px' }}
                  type={'qx-icon-plus'}
                />
                <span style={{ marginInlineStart: '4px' }}>添加参数</span>
              </Button>
            </Dropdown>
          )}
          <Button
            size={'small'}
            type={'link'}
            style={{
              padding: '0 0 0 12px',
            }}
            onClick={() => {
              openModal();
            }}
          >
            <QxBaseIcon
              style={{ fontSize: '16px' }}
              type={'icon-app-terminal-box-line'}
            />
            <span style={{ marginInlineStart: '4px' }}>高级设置</span>
          </Button>
        </div>
        {!props.isHideSearch && (
          <Input
            className={'qx-parameter-setting--search'}
            placeholder="按名称搜索"
            prefix={<QxBaseIcon type={'icon-app-search-line'} />}
            onChange={onChange}
          />
        )}
        {props.isHideSearch && !!props.title && (
          <div className={'header-title'}>{props.title}</div>
        )}
      </div>
      <div className="tree-wrapper">
        {props?.value?.length > 0
          ? treeData?.length > 0 &&
            defaultExpandedKeys && (
              <Tree
                rootClassName={'qx-parameter-tree-list'}
                treeData={treeData || []}
                fieldNames={{
                  title: null,
                  key: 'id',
                  children: 'child',
                }}
                titleRender={(nodeData) => renderTitle(nodeData)}
                style={{ height: '100%' }}
                onDrop={onDrop}
                draggable={{ icon: false }}
                // draggable={!props.type}
                // blockNode
                defaultExpandAll
                checkStrictly
                defaultExpandedKeys={defaultExpandedKeys}
                expandedKeys={expandedKeys ? expandedKeys : defaultExpandedKeys}
                autoExpandParent={autoExpandParent}
                onExpand={onExpand}
              />
            )
          : null}
      </div>
      <ParameterModal
        inputKey={inputKey}
        treeData={list}
        data={treeData}
        expandedKeys={expandedKeys}
        nodes={props.nodes}
        node={props.node}
        handleChangeField={changeField}
        handleCancel={handleCancel}
        handleAdd={handleAdd}
        handleDelete={deleteParameter}
        handleChange={handleChange}
        handleDrop={handleDrop}
        handleAddTree={onAddTree}
        visible={visible}
        request={props?.request}
        appId={props?.appId}
        nodeType={props?.nodeType}
        type={props?.type}
      />
    </div>
  );
};

// export default QxParameterSetting;