lodash#unset TypeScript Examples

export default function withFriendlyChunkNames(nextConfig: NextConfig) {
  return addWebpackConfig(nextConfig, (nextConfig, webpackConfig, _options) => {
    if (
      typeof webpackConfig.optimization?.splitChunks !== 'boolean' &&
      webpackConfig.optimization?.splitChunks?.cacheGroups
    ) {
      unset(webpackConfig, 'optimization.splitChunks.cacheGroups.lib.name')
      unset(webpackConfig, 'optimization.splitChunks.cacheGroups.shared.name')
    }
    return webpackConfig
  })
}

/**
   * Provide a way to append some drill-down data in indexesData
   * @param extraRowField
   * @param drillDownData
   * @param rowNode
   */
  public transformDrillDownData(
    extraRowField: string,
    drillDownData: DataType[],
    rowNode: Node,
  ) {
    const { columns, values: dataValues } = this.fields;
    const currentRowFields = Node.getFieldPath(rowNode, true);
    const nextRowFields = [...currentRowFields, extraRowField];
    const store = this.spreadsheet.store;

    // 1、通过values在data中注入额外的维度信息，并分离`明细数据`&`汇总数据`
    const transformedData = this.standardTransform(drillDownData, dataValues);

    const totalData = splitTotal(transformedData, {
      columns: this.fields.columns,
      rows: nextRowFields,
    });
    const originData = difference(transformedData, totalData);

    // 2. 检查该节点是否已经存在下钻维度
    const rowNodeId = rowNode?.id;
    const idPathMap = store.get('drillDownIdPathMap') ?? new Map();
    if (idPathMap.has(rowNodeId)) {
      // the current node has a drill-down field, clean it
      forEach(idPathMap.get(rowNodeId), (path: number[]) => {
        unset(this.indexesData, path);
      });
      deleteMetaById(this.rowPivotMeta, rowNodeId);
    }

    // 3、转换数据
    const {
      paths: drillDownDataPaths,
      indexesData,
      rowPivotMeta,
      colPivotMeta,
      sortedDimensionValues,
    } = transformIndexesData({
      rows: nextRowFields,
      columns,
      originData,
      totalData,
      indexesData: this.indexesData,
      sortedDimensionValues: this.sortedDimensionValues,
      rowPivotMeta: this.rowPivotMeta,
      colPivotMeta: this.colPivotMeta,
    });
    this.indexesData = indexesData;
    this.rowPivotMeta = rowPivotMeta;
    this.colPivotMeta = colPivotMeta;
    this.sortedDimensionValues = sortedDimensionValues;

    // 4、record data paths by nodeId
    // set new drill-down data path
    idPathMap.set(rowNodeId, drillDownDataPaths);
    store.set('drillDownIdPathMap', idPathMap);
  }

/**
   * Clear drill down data by rowNodeId
   * rowNodeId is undefined => clear all
   * @param rowNodeId
   */
  public clearDrillDownData(rowNodeId?: string) {
    const store = this.spreadsheet.store;
    const idPathMap = store.get('drillDownIdPathMap');
    if (!idPathMap) {
      return;
    }
    const drillDownDataCache = store.get(
      'drillDownDataCache',
      [],
    ) as PartDrillDownDataCache[];

    if (rowNodeId) {
      // 1. 删除 indexesData 当前下钻层级对应数据
      const currentIdPathMap = idPathMap.get(rowNodeId);
      if (currentIdPathMap) {
        forEach(currentIdPathMap, (path) => {
          unset(this.indexesData, path);
        });
      }
      // 2. 删除 rowPivotMeta 当前下钻层级对应 meta 信息
      deleteMetaById(this.rowPivotMeta, rowNodeId);
      // 3. 删除下钻缓存路径
      idPathMap.delete(rowNodeId);

      // 4. 过滤清除的下钻缓存
      const restDataCache = filter(drillDownDataCache, (cache) =>
        idPathMap.has(cache?.rowId),
      );
      store.set('drillDownDataCache', restDataCache);

      // 5. 过滤清除的下钻层级
      const restDrillLevels = restDataCache.map((cache) => cache?.drillLevel);
      const drillDownFieldInLevel = store.get(
        'drillDownFieldInLevel',
        [],
      ) as PartDrillDownFieldInLevel[];
      const restFieldInLevel = drillDownFieldInLevel.filter((filed) =>
        includes(restDrillLevels, filed?.drillLevel),
      );

      store.set('drillDownFieldInLevel', restFieldInLevel);
    } else {
      idPathMap.clear();
      // 需要对应清空所有下钻后的dataCfg信息
      // 因此如果缓存有下钻前原始dataCfg，需要清空所有的下钻数据
      const originalDataCfg = this.spreadsheet.store.get('originalDataCfg');
      if (!isEmpty(originalDataCfg)) {
        this.spreadsheet.setDataCfg(originalDataCfg);
      }

      // 清空所有的下钻信息
      this.spreadsheet.store.set('drillItemsNum', -1);
      this.spreadsheet.store.set('drillDownDataCache', []);
      this.spreadsheet.store.set('drillDownFieldInLevel', []);
    }

    store.set('drillDownIdPathMap', idPathMap);
  }

public async deleteMessage(message_id: string): Promise<IConfig> {
		unset(this.config, message_id);
		if (this.on_delete) await this.on_delete(message_id);
		return this.config;
	}

batchSwitchNamespace = async (originalResources: Obj<[Obj<Obj>, Obj<Obj>]>) => {
  const toSwitchWords = new Set<string>();
  const nsList = Object.values(originalResources).reduce<string[]>((acc, resource) => {
    const [zhResource] = resource;
    return acc.concat(Object.keys(zhResource));
  }, []);
  const { targetNs } = await inquirer.prompt({
    name: 'targetNs',
    type: 'list',
    message: 'Please select the new namespace name',
    choices: nsList.map((ns) => ({ value: ns, name: ns })),
  });
  // extract all i18n.r
  const promises = Object.values(internalSrcDirMap)
    .flat()
    .map((srcDir) => {
      return new Promise<void>((resolve) => {
        walker({
          root: srcDir,
          dealFile: (...args) => {
            extractPendingSwitchContent.apply(null, [...args, targetNs, toSwitchWords, resolve]);
          },
        });
      });
    });
  await Promise.all(promises);
  if (toSwitchWords.size) {
    const restorePromises = Object.values(internalSrcDirMap)
      .flat()
      .map((srcDir) => {
        return new Promise<void>((resolve) => {
          walker({
            root: srcDir,
            dealFile: (...args) => {
              switchSourceFileNs.apply(null, [...args, targetNs, toSwitchWords, resolve]);
            },
          });
        });
      });
    await Promise.all(restorePromises);
    // restore locale files
    for (const wordWithNs of toSwitchWords) {
      const wordArr = wordWithNs.split(':');
      const [currentNs, enWord] = wordArr.length === 2 ? wordArr : ['default', wordWithNs];
      const currentModuleName = getNamespaceModuleName(originalResources, currentNs);
      const targetModuleName = getNamespaceModuleName(originalResources, targetNs);
      if (!currentModuleName || !targetModuleName) {
        logError(`${currentModuleName} or ${targetModuleName} does not exist in locale files`);
        return;
      }

      // replace zh.json content
      const targetNsContent = originalResources[targetModuleName][0][targetNs];
      const currentNsContent = originalResources[currentModuleName][0][currentNs];
      if (!targetNsContent[enWord] || targetNsContent[enWord] === currentNsContent[enWord]) {
        targetNsContent[enWord] = currentNsContent[enWord];
      } else {
        // eslint-disable-next-line no-await-in-loop
        const confirm = await inquirer.prompt({
          name: 'confirm',
          type: 'confirm',
          message: `${chalk.red(enWord)} has translation in target namespace ${targetNs} with value ${chalk.yellow(
            targetNsContent[enWord],
          )}, Do you want to override it with ${chalk.yellow(currentNsContent[enWord])}?`,
        });
        if (confirm) {
          targetNsContent[enWord] = currentNsContent[enWord];
        }
      }
      currentNs !== targetNs && unset(currentNsContent, enWord);

      // replace en.json content
      const targetNsEnContent = originalResources[targetModuleName][1][targetNs];
      const currentNsEnContent = originalResources[currentModuleName][1][currentNs];
      if (!targetNsEnContent[enWord]) {
        targetNsEnContent[enWord] = currentNsEnContent[enWord];
      }
      currentNs !== targetNs && unset(currentNsEnContent, enWord);
    }
    for (const moduleName of Object.keys(originalResources)) {
      const [zhResource, enResource] = originalResources[moduleName];
      const localePath = internalLocalePathMap[moduleName];
      fs.writeFileSync(`${localePath}/zh.json`, JSON.stringify(zhResource, null, 2), 'utf8');
      fs.writeFileSync(`${localePath}/en.json`, JSON.stringify(enResource, null, 2), 'utf8');
    }
    logInfo('sort current locale files & remove unused translation');
    await writeLocaleFiles(false);
    logSuccess('switch namespace done.');
  } else {
    logWarn(`no ${chalk.red('i18n.r')} found in source code. program exit`);
  }
}

/**
 * Resolve the needed versions of production dependencies for external modules.
 * @this - The active plugin instance
 */
function getProdModules(externalModules: any[], packagePath: string, dependencyGraph: any, forceExcludes: string[], runtime?: string): any[] {
    const packageJson = readJSONSync(packagePath);
    const prodModules: string[] = [];

    // only process the module stated in dependencies section
    if (!packageJson.dependencies) {
        return [];
    }

    // Get versions of all transient modules

    for (const module of externalModules) {
        let moduleVersion = packageJson.dependencies[module.external];
        if (moduleVersion) {
            prodModules.push(`${module.external}@${moduleVersion}`);
            // Check if the module has any peer dependencies and include them too
            try {
                const modulePackagePath = join(
                    dirname(packagePath),
                    'node_modules',
                    module.external,
                    'package.json'
                );
                const { peerDependencies, peerDependenciesMeta } = readJSONSync(modulePackagePath);
                if (!isEmpty(peerDependencies)) {

                    if (!isEmpty(peerDependenciesMeta)) {
                        for (const key of Object.keys(peerDependencies)) {
                            if (peerDependenciesMeta[key]?.optional === true) {
                                unset(peerDependencies, key);
                            }
                        }
                    }
                    if (!isEmpty(peerDependencies)) {
                        const peerModules = getProdModules(Object.keys(peerDependencies).map(value => ({ external: value })),
                            packagePath,
                            dependencyGraph,
                            forceExcludes,
                            runtime
                        );
                        prodModules.push(...peerModules);
                    }
                }
            } catch (e) {
                console.log(`WARNING: Could not check for peer dependencies of ${module.external}`);
            }
        } else {
            if (!packageJson.devDependencies || !packageJson.devDependencies[module.external]) {
                // Add transient dependencies if they appear not in the service's dev dependencies
                const originInfo = get(dependencyGraph, 'dependencies', {})[module.origin] || {};
                moduleVersion = get(get(originInfo, 'dependencies', {})[module.external], 'version');
                if (typeof moduleVersion === 'object') {
                    moduleVersion = moduleVersion.optional;
                }
                if (!moduleVersion) {
                    moduleVersion = get(get(dependencyGraph, 'dependencies', {})[module.external], 'version');
                    if (!moduleVersion) {
                        console.log(`WARNING: Could not determine version of module ${module.external}`);
                    }
                }
                prodModules.push(moduleVersion ? `${module.external}@${moduleVersion}` : module.external);
            } else if (
                packageJson.devDependencies &&
                packageJson.devDependencies[module.external] &&
                !(forceExcludes.indexOf(module.external) !== -1)
            ) {
                // To minimize the chance of breaking setups we whitelist packages available on AWS here. These are due to the previously missing check
                // most likely set in devDependencies and should not lead to an error now.
                const ignoredDevDependencies = ['aws-sdk'];

                if (ignoredDevDependencies.indexOf(module.external) !== -1) {
                    // Runtime dependency found in devDependencies but not forcefully excluded
                    console.error(
                        `ERROR: Runtime dependency '${module.external}' found in devDependencies. Move it to dependencies or use forceExclude to explicitly exclude it.`
                    );
                    throw new Error(`Serverless-webpack dependency error: ${module.external}.`);
                }
                console.log(
                    `INFO: Runtime dependency '${module.external}' found in devDependencies. It has been excluded automatically.`
                );
            }
        }
    }
    return prodModules;
}

function customFlush(done: () => void) {
  const enToZhWords: Obj = zhWordMap;
  // @ts-ignore api
  const { resStore } = this.parser;
  // @ts-ignore api
  const { resource, removeUnusedKeys, sort, defaultValue } = this.parser.options;

  Object.keys(resStore).forEach((lng) => {
    const namespaces = resStore[lng];
    // The untranslated English value and key are consistent
    if (lng === 'en') {
      Object.keys(namespaces).forEach((_ns) => {
        const obj = namespaces[_ns];
        Object.keys(obj).forEach((k) => {
          if (obj[k] === defaultValue) {
            obj[k] = k.replace(':', ':');
          }
        });
      });
    }

    const filePath = resource.savePath.replace('{{lng}}', lng);
    let oldContent = lng === 'zh' ? originalZhJson : originalEnJson;

    // Remove obsolete keys
    if (removeUnusedKeys) {
      const namespaceKeys = flattenObjectKeys(namespaces);
      const oldContentKeys = flattenObjectKeys(oldContent);
      const unusedKeys = differenceWith(oldContentKeys, namespaceKeys, isEqual);

      for (let i = 0; i < unusedKeys.length; ++i) {
        unset(oldContent, unusedKeys[i]);
      }

      oldContent = omitEmptyObject(oldContent);
    }

    // combine old content
    let output = merge(namespaces, oldContent);
    if (sort) {
      output = sortObject(output);
    }

    // substitution zh locale
    if (lng === 'zh') {
      Object.keys(output).forEach((_ns) => {
        const obj = output[_ns];
        Object.keys(obj).forEach((k) => {
          if (obj[k] === defaultValue) {
            const zh = enToZhWords[k] || enToZhWords[`${_ns}:${k}`];
            if (zh) {
              obj[k] = zh;
            } else {
              logError(`there is untranslated content in zh.json: ${k}, please handle it manually`);
            }
          }
        });
      });
    }

    if (isExternal) {
      fs.writeFile(filePath, `${JSON.stringify(output, null, resource.jsonIndent)}\n`, 'utf8', (writeErr) => {
        if (writeErr) return logError(`writing failed:${lng}`, writeErr);
      });
    } else {
      const { default: defaultContent, ...restContent } = output;
      fs.writeFile(filePath, `${JSON.stringify(restContent, null, resource.jsonIndent)}\n`, 'utf8', (writeErr) => {
        if (writeErr) return logError(`writing failed:${lng}`, writeErr);
      });
      const defaultLocalePath = `${internalLocalePathMap.default}/${lng}.json`;

      fs.writeFile(
        defaultLocalePath,
        `${JSON.stringify({ default: defaultContent }, null, resource.jsonIndent)}\n`,
        'utf8',
        (writeErr) => {
          if (writeErr) return logError(`writing failed:${lng}`, writeErr);
        },
      );
    }
  });

  done();
}

export function enhanceAPI<T extends FN>(_apiFn: T, config?: APIConfig<T>) {
  const { globalKey, mock } = config || {};

  let _toggleLoading: undefined | ((p: boolean) => void);
  let _setData: Obj<Function> = {};

  const onResponse = (body: PICK_BODY<T>, params?: Parameters<T>[0]) => {
    // standard response
    if ('success' in body && ('err' in body || 'data' in body)) {
      const { data, success, err, userInfo } = body;
      if (userInfo) {
        setUserMap(userInfo);
      }

      if (isObject(data) && Object.keys(params ?? {}).includes('pageNo')) {
        if ('list' in data && 'total' in data) {
          if (data.list === null) {
            data.list = [];
          }
          const { total } = data;
          const { pageNo, pageSize } = params ?? ({} as Parameters<T>[0]);
          const hasMore = Math.ceil(total / +pageSize) > +pageNo;
          (data as any).paging = { pageNo, pageSize, total, hasMore };
        }
      }

      if (success) {
        const successMsg = params?.$options?.successMsg || config?.successMsg;
        successMsg && getConfig('onAPISuccess')?.(successMsg);
      } else if (err) {
        const errorMsg = err?.msg || params?.$options?.errorMsg || config?.errorMsg;
        errorMsg && getConfig('onAPIFail')?.('error', errorMsg);
      }
    }
  };

  let apiFn = _apiFn;
  if (mock) {
    apiFn = ((params?: Parameters<T>[0]) => {
      return new Promise((resolve) =>
        setTimeout(() => resolve({ success: true, data: mock(params), err: null }), Math.floor(Math.random() * 300)),
      );
    }) as any;
  }

  const service = (params?: Parameters<T>[0]): ReturnType<T> =>
    apiFn(params).then((body: PICK_BODY<T>) => {
      onResponse(body, params);
      return body;
    });

  /**
   * when calling useData or useState, it may be called by multiple components at the same time,
   * so when fetch finished, each setData function should be invoked one by one
   * @param subscribeIdRef each subscribe maintains one unique id, used to unsubscribe when unmount component
   * @param setData subscribe callback, which to set state data
   */
  const subscribe = (subscribeIdRef: React.MutableRefObject<string>, setData: Function) => {
    if (!subscribeIdRef.current) {
      const uid = uniqueId('id_');
      subscribeIdRef.current = uid;
      _setData = { ..._setData, [uid]: setData };
    }
  };

  return Object.assign(service, {
    fetch: (params?: Parameters<T>[0]): ReturnType<T> => {
      _toggleLoading?.(true);
      return apiFn(params)
        .then((body: PICK_BODY<T>) => {
          onResponse(body, params);
          forEach(_setData, (fn) => fn(body?.data));
          return body;
        })
        .finally(() => {
          _toggleLoading?.(false);
        });
    },
    useData: (): PICK_DATA<T> | null => {
      const [data, setData] = React.useState(null);
      const subscribeIdRef = React.useRef('');

      React.useEffect(() => {
        return () => {
          unset(_setData, subscribeIdRef.current);
        };
      }, []);

      if (globalKey) {
        subscribe(subscribeIdRef, (d: PICK_DATA<T>) => apiDataStore.reducers.setData(globalKey, d));
        return apiDataStore.useStore((s) => s.data[globalKey]) as PICK_DATA<T>;
      }

      subscribe(subscribeIdRef, setData);
      return data;
    },
    useLoading: (): boolean => {
      const [loading, setLoading] = React.useState(false);

      if (globalKey) {
        _toggleLoading = (isLoading: boolean) => apiDataStore.reducers.setLoading(globalKey, isLoading);
        return apiDataStore.useStore((s) => !!s.loading[globalKey]);
      }
      _toggleLoading = setLoading;

      return loading;
    },
    useState: (): [PICK_DATA<T> | null, boolean] => {
      const [loading, setLoading] = React.useState(false);
      const [data, setData] = React.useState(null);
      const subscribeIdRef = React.useRef('');

      React.useEffect(() => {
        return () => {
          unset(_setData, subscribeIdRef.current);
        };
      }, []);

      if (globalKey) {
        _toggleLoading = (isLoading: boolean) => apiDataStore.reducers.setLoading(globalKey, isLoading);
        subscribe(subscribeIdRef, (d: PICK_DATA<T>) => apiDataStore.reducers.setData(globalKey, d));
        return apiDataStore.useStore((s) => [s.data[globalKey], !!s.loading[globalKey]]) as [PICK_DATA<T>, boolean];
      }
      _toggleLoading = setLoading;

      subscribe(subscribeIdRef, setData);
      return [data, loading];
    },
    getData: () => {
      return globalKey ? apiDataStore.getState((s) => s.data[globalKey]) : undefined;
    },
    clearData: () => {
      return globalKey ? apiDataStore.reducers.setData(globalKey, undefined) : undefined;
    },
  });
}

ApiResource = (props: Merge<CP_API_RESOURCE.Props, API_SETTING.IResourceProps>) => {
  const { quotePathMap, onQuoteChange, apiName, apiDetail } = props;

  const [
    { currentMethod, apiMethodDetail, curTabKey, apiDisplayName, tempApiData, pathParams, open },
    updater,
    update,
  ] = useUpdate({
    currentMethod: API_METHODS.get as API_SETTING.ApiMethod,
    apiMethodDetail: {} as Obj,
    curTabKey: API_RESOURCE_TAB.Summary,
    apiDisplayName: '',
    tempApiData: {},
    pathParams: null,
    open: false,
  });

  const { apiData, execOperation, operations } = props?.data || {};
  const formRef = React.useRef<IFormExtendType>({} as any);

  const [openApiDoc, apiLockState, formErrorNum] = apiDesignStore.useStore((s) => [
    s.openApiDoc,
    s.apiLockState,
    s.formErrorNum,
  ]);
  const { updateOpenApiDoc, updateFormErrorNum } = apiDesignStore;

  const dataPath = React.useMemo(() => [apiName, currentMethod], [apiName, currentMethod]);

  React.useEffect(() => {
    if (apiData?.apiMethod) {
      // 适配组件化协议的内容
      updater.apiMethodDetail(apiData);
      updater.tempApiData(!isEmpty(tempApiData) ? tempApiData : apiData);
    } else {
      // 点击左侧api列表导致的内容变化，更新第一个不为空的method，更新resource内容，resource内容切换到summary
      let initialMethod = API_METHODS.get;
      some(API_METHODS, (method) => {
        if (!isEmpty(apiDetail[method])) {
          initialMethod = method;
          return true;
        } else {
          return false;
        }
      });
      updater.currentMethod(initialMethod);

      const _apiMethodDetail = apiDetail[initialMethod] || {};
      updater.apiMethodDetail(_apiMethodDetail);
    }
    updater.pathParams(null);
    updater.curTabKey(API_RESOURCE_TAB.Summary); // API切换后重置tab
  }, [apiDetail, apiData, updater, tempApiData]);

  React.useEffect(() => {
    let _name = '';
    if (apiData) {
      _name = tempApiData.apiName || apiData?.apiName;
    } else if (apiName) {
      _name = apiName;
    }
    if (_name) {
      updater.apiDisplayName(_name);
      setTimeout(() => {
        formRef.current.setFieldsValue({ apiName: _name });
      });
    }
  }, [apiData, apiName, tempApiData.apiName, updater]);

  React.useEffect(() => {
    if (!pathParams) return;

    const prefixPath = !apiData ? ['paths', apiName] : [];
    const tempDetail = produce(openApiDoc, (draft) => {
      if (!isEmpty(pathParams)) {
        const _pathParams = map(pathParams, (name) => {
          return {
            ...DEFAULT_PATH_PARAM,
            name,
          };
        });
        set(draft, [...prefixPath, 'parameters'], _pathParams);
      } else {
        set(draft, [...prefixPath, 'parameters'], []);
        updater.pathParams(null);
      }
    });
    updateOpenApiDoc(tempDetail);
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [apiData, apiName, pathParams, updateOpenApiDoc]);

  const setFieldHandle = React.useCallback(
    (key: string, fieldData: Obj, extraProps?: Obj) => {
      const prefixPath = !apiData?.apiMethod ? ['paths', ...dataPath] : [];
      const baseFormData = !apiData?.apiMethod ? openApiDoc : tempApiData;

      if (onQuoteChange && extraProps?.typeQuotePath) {
        const newTypeQuotePath = extraProps?.typeQuotePath ? ['paths', ...dataPath, ...extraProps.typeQuotePath] : [];

        const tempQuotePathMap = produce(quotePathMap, (draft) => {
          if (extraProps?.quoteTypeName) {
            const { quoteTypeName } = extraProps;
            draft[quoteTypeName] = draft[quoteTypeName] || [];
            draft[quoteTypeName].push(newTypeQuotePath);
          }
        });
        onQuoteChange(tempQuotePathMap);
      }

      const tempDetail = produce(baseFormData, (draft) => {
        if (key !== 'responses') {
          const responseData = get(draft, [...prefixPath, 'responses']);
          // 设置默认的response
          if (!responseData) {
            set(draft, [...prefixPath, 'responses'], DEFAULT_RESPONSE);
          }

          if (key === 'summary') {
            set(draft, [...prefixPath, fieldData?.propertyName], fieldData?.propertyData);
            if (fieldData?.propertyName === 'operationId') {
              set(draft, [...prefixPath, 'summary'], fieldData?.propertyData);
            }
            if (fieldData?.newTags) {
              set(draft, 'tags', fieldData?.newTags);
              message.success(i18n.t('dop:category created successfully'));
            }
          } else if (key === 'query' || key === 'header') {
            set(draft, [...prefixPath, 'parameters'], fieldData?.parameters);
          }
        }
        if (key === 'responses' || key === 'requestBody') {
          set(draft, [...prefixPath, key], fieldData[key]);
        }
        // 设置默认的operationId
        if (!get(draft, [...prefixPath, 'operationId'])) {
          const _operationIdList: string[] = [];
          const { paths } = openApiDoc;
          forEach(keys(paths), (pathName: string) => {
            const methodData = paths[pathName];
            forEach(keys(methodData), (item) => {
              methodData[item]?.operationId && _operationIdList.push(methodData[item]?.operationId);
            });
          });
          let _operationId = 'operationId';
          while (_operationIdList.includes(_operationId)) {
            _operationId += '1';
          }
          set(draft, [...prefixPath, 'operationId'], _operationId);
        }
        // 设置默认的tags
        if (!get(draft, [...prefixPath, 'tags'])) {
          set(draft, [...prefixPath, 'tags'], ['other']);
        }
        if (!draft.tags) {
          set(draft, 'tags', [{ name: 'other' }]);
        }
      });

      if (!apiData?.apiMethod) {
        updateOpenApiDoc(tempDetail);
      } else {
        updater.tempApiData(tempDetail);
      }
    },
    [apiData, dataPath, onQuoteChange, openApiDoc, quotePathMap, tempApiData, updateOpenApiDoc, updater],
  );

  const iconClassMap = React.useMemo(() => {
    const classMap = {};
    const emptyIcon = {};
    forEach(API_METHODS, (method) => {
      const tempMethodDetail = get(openApiDoc, ['paths', apiName, method]);
      const emptyMethodClass = !tempMethodDetail || isEmpty(tempMethodDetail) ? 'btn-icon-empty' : '';
      classMap[method] = `btn-icon btn-icon-${method} ${emptyMethodClass}`;
      emptyIcon[method] = `${emptyMethodClass}`;
    });
    return { classMap, emptyIcon };
  }, [apiName, openApiDoc]);

  const deleteMethod = React.useCallback(
    (methodKey: API_METHODS) => {
      updater.open(false);
      const tempDetail = produce(openApiDoc, (draft) => {
        unset(draft, ['paths', apiName, methodKey]);
      });
      updateOpenApiDoc(tempDetail);
      if (currentMethod === methodKey) {
        updater.apiMethodDetail({});
      }
    },
    [apiName, currentMethod, openApiDoc, updateOpenApiDoc, updater],
  );

  const onApiNameChange = React.useCallback(
    (name: string) => {
      updater.apiDisplayName(name);
      props.onApiNameChange(name);

      // 获取api中的path parameters
      const _pathParams = map(name.match(pathParamReg), (item) => {
        return item.slice(1, item.length - 1);
      });
      updater.pathParams(_pathParams);

      if (onQuoteChange && !isEmpty(quotePathMap)) {
        const tempQuotePathMap = produce(quotePathMap, (draft) => {
          forEach(keys(draft), (k) => {
            forEach(draft[k], (path, i) => {
              if (path.includes(apiDisplayName)) {
                const oldPathArray = path.slice(0, path.length - 1);
                draft[k][i] = [...oldPathArray, name];
              }
            });
          });
        });
        onQuoteChange(tempQuotePathMap);
      }

      if (!apiData?.apiMethod) {
        const tempDetail = produce(openApiDoc, (draft) => {
          const apiTempData = get(draft, ['paths', apiName]);
          set(draft, ['paths', name], apiTempData);
          unset(draft, ['paths', apiName]);
        });
        updateOpenApiDoc(tempDetail);
      } else {
        const tempDetail = produce(tempApiData, (draft) => {
          set(draft, 'apiName', name);
        });
        updater.tempApiData(tempDetail);
      }
    },
    [
      apiData,
      apiDisplayName,
      apiName,
      onQuoteChange,
      openApiDoc,
      props,
      quotePathMap,
      tempApiData,
      updateOpenApiDoc,
      updater,
    ],
  );

  const hasBody = !['get', 'head'].includes(currentMethod);

  const onSaveApiData = React.useCallback(() => {
    execOperation &&
      execOperation(operations.submit, {
        apiData: { ...tempApiData, apiMethod: apiData?.apiMethod, apiName: tempApiData?.name || apiData?.apiName },
      });
  }, [apiData, execOperation, operations, tempApiData]);

  const fieldList = React.useMemo(() => {
    const existApiPathNames = keys(openApiDoc?.paths).filter((n) => n !== apiDisplayName);
    return [
      {
        type: Input,
        name: 'apiName',
        colSpan: 24,
        required: false,
        isHoldLabel: false,
        wrapperClassName: 'pl-0',
        customProps: {
          className: 'name-input',
          maxLength: INPUT_MAX_LENGTH,
          disabled: apiLockState,
          addonBefore: apiData?.apiMethod,
          placeholder: i18n.t('Please enter the {name}', { name: i18n.t('API path') }),
          onChange: (e: React.ChangeEvent<HTMLInputElement>) => {
            const newApiName = e.target.value;

            if (newApiName && !existApiPathNames.includes(newApiName) && newApiName.startsWith('/')) {
              onApiNameChange(newApiName);
              updateFormErrorNum(0);
            } else {
              updateFormErrorNum(1);
            }
          },
        },
        rules: [
          {
            validator: (_rule: any, value: string, callback: (msg?: string) => void) => {
              if (existApiPathNames.includes(value)) {
                callback(i18n.t('the same {key} exists', { key: i18n.t('Name') }));
              } else if (!value) {
                callback(i18n.t('can not be empty'));
              } else if (!value.startsWith('/')) {
                callback(i18n.t('dop:path must start with /'));
              } else {
                callback();
              }
            },
          },
        ],
      },
    ];
  }, [apiData, apiDisplayName, apiLockState, onApiNameChange, openApiDoc, updateFormErrorNum]);

  const popconfirmRef = React.useRef(null as any);
  const selectRef = React.useRef(null) as any;

  useClickAway(selectRef, () => {
    updater.open(false);
  });

  const maskClick = React.useCallback(
    (e: any) => {
      e.stopPropagation();
      updater.open(true);
    },
    [updater],
  );

  const labelClick = React.useCallback(
    (e: any, methodKey: string) => {
      e.stopPropagation();
      updater.open(false);

      const nextHandle = () => {
        const _apiMethodDetail = get(openApiDoc, ['paths', apiName, methodKey]) || {};
        update({
          currentMethod: methodKey as API_SETTING.ApiMethod,
          curTabKey: API_RESOURCE_TAB.Summary,
          apiMethodDetail: _apiMethodDetail,
        });

        updateFormErrorNum(0);
        formRef.current.setFieldsValue({ apiName });
      };

      if (formErrorNum > 0) {
        confirm({
          title: i18n.t('dop:Are you sure to leave, with the error message not saved?'),
          onOk() {
            nextHandle();
          },
        });
      } else {
        nextHandle();
      }
    },
    [apiName, formErrorNum, openApiDoc, update, updateFormErrorNum, updater],
  );

  const renderSelectMenu = () => {
    return (
      <div className="select-container" ref={selectRef}>
        {!apiData?.apiMethod ? (
          <Select
            getPopupContainer={(triggerNode) => triggerNode.parentElement as HTMLElement}
            style={{ marginRight: '8px', width: '141px' }}
            defaultValue={currentMethod}
            open={open}
            value={currentMethod}
          >
            {map(API_METHODS, (methodKey) => {
              let item = (
                <div className="circle-container flex-all-center">
                  {iconClassMap.emptyIcon[methodKey] ? (
                    <div className={`${iconClassMap.classMap[methodKey]}`} />
                  ) : (
                    <ErdaIcon type="check" className={iconClassMap.classMap[methodKey]} />
                  )}
                </div>
              );
              if (get(openApiDoc, ['paths', apiName, methodKey])) {
                item = (
                  <Popconfirm
                    title={`${i18n.t('common:confirm to delete')}?`}
                    onConfirm={() => deleteMethod(methodKey)}
                    placement="right"
                    // disabled={apiLockState}
                    overlayClassName="popconfirm-container"
                    getPopupContainer={() => popconfirmRef?.current}
                    onCancel={(e: any) => {
                      e.stopPropagation();
                      updater.open(false);
                    }}
                  >
                    {item}
                  </Popconfirm>
                );
              }
              return (
                <Option value={methodKey} key={methodKey}>
                  <div
                    className={`api-method-option ${currentMethod === methodKey ? 'api-method-option-active' : ''}`}
                    key={methodKey}
                  >
                    <div
                      onClick={(e) => {
                        e.stopPropagation();
                        labelClick(e, methodKey);
                      }}
                    >
                      {methodKey.toUpperCase()}
                    </div>
                    {item}
                  </div>
                </Option>
              );
            })}
          </Select>
        ) : undefined}
        <div className="mask" onClick={maskClick} />
      </div>
    );
  };

  const onTabChange = (tabKey: string) => {
    const nextHandle = () => {
      updater.curTabKey(tabKey as API_RESOURCE_TAB);
      const _apiMethodDetail = get(openApiDoc, ['paths', apiName, currentMethod]) || {};
      updater.apiMethodDetail(_apiMethodDetail);
      updateFormErrorNum(0);
      formRef.current.setFieldsValue({ apiName });
    };

    if (formErrorNum > 0) {
      confirm({
        title: i18n.t('dop:Are you sure to leave, with the error message not saved?'),
        onOk() {
          nextHandle();
        },
      });
    } else {
      nextHandle();
    }
  };

  return (
    <div className="api-resource" ref={popconfirmRef}>
      <div className="popover">
        {renderSelectMenu()}
        <FormBuilder ref={formRef} className="w-full">
          <Fields fields={fieldList} />
        </FormBuilder>
      </div>

      <div className="api-resource-tabs">
        <Tabs activeKey={curTabKey} onChange={onTabChange}>
          <TabPane tab={API_RESOURCE_TAB.Summary} key={API_RESOURCE_TAB.Summary}>
            <ResourceSummary formData={apiMethodDetail} onChange={setFieldHandle} isEditMode={!apiLockState} />
          </TabPane>
          <TabPane tab={API_RESOURCE_TAB.Params} key={API_RESOURCE_TAB.Params}>
            <QueryParamsConfig
              formData={apiMethodDetail}
              paramIn="query"
              onChange={setFieldHandle}
              isEditMode={!apiLockState}
              resourceKey={curTabKey}
            />
          </TabPane>
          <TabPane tab={API_RESOURCE_TAB.Headers} key={API_RESOURCE_TAB.Headers}>
            <QueryParamsConfig
              formData={apiMethodDetail}
              paramIn="header"
              onChange={setFieldHandle}
              isEditMode={!apiLockState}
              resourceKey={curTabKey}
            />
          </TabPane>
          <TabPane tab={API_RESOURCE_TAB.Body} key={API_RESOURCE_TAB.Body} disabled={!hasBody}>
            {hasBody && (
              <ResponseConfig
                formData={apiMethodDetail}
                paramIn="requestBody"
                onChange={setFieldHandle}
                dataPath={dataPath}
                isEditMode={!apiLockState}
                resourceKey={curTabKey}
              />
            )}
          </TabPane>
          <TabPane tab={API_RESOURCE_TAB.Response} key={API_RESOURCE_TAB.Response}>
            <ResponseConfig
              formData={apiMethodDetail}
              paramIn="responses"
              onChange={setFieldHandle}
              dataPath={dataPath}
              isEditMode={!apiLockState}
              resourceKey={curTabKey}
            />
          </TabPane>
          {apiData?.apiMethod && <TabPane tab={API_RESOURCE_TAB.Test} key={API_RESOURCE_TAB.Test} />}
        </Tabs>
        {apiData?.apiMethod && (
          <div className="flex items-center flex-wrap justify-end">
            <Button type="primary" onClick={onSaveApiData}>
              {i18n.t('Save')}
            </Button>
          </div>
        )}
      </div>
    </div>
  );
}

PropertyItemForm = React.memo((props: IPropertyItemForm) => {
  const { formData, onChange, formType = 'Query', isEditMode = true, index } = props;

  const [
    {
      detailVisible,
      curPropertyType,
      innerParamList,
      dataTempStorage,
      paramListTempStorage,
      paramsModalVisible,
      arrayItemDataStorage,
      errorMap,
      formErrorMap,
    },
    updater,
    update,
  ] = useUpdate({
    detailVisible: props.detailVisible || false,
    curPropertyType: formData.type || initialTypeMap[formType] || ('string' as API_SETTING.PropertyType),
    innerParamList: [],
    dataTempStorage: {},
    paramListTempStorage: [],
    paramsModalVisible: false,
    arrayItemDataStorage: null,

    errorMap: {
      name: false,
      maxLength: false,
      minLength: false,
      maximum: false,
      minimum: false,
    },
    formErrorMap: {},
  });

  const formRef = React.useRef<IFormExtendType>({} as any);
  const paramListTempStorageRef = React.useRef<any[]>([]);
  const dataTempStorageRef = React.useRef<Obj>({});

  React.useImperativeHandle(paramListTempStorageRef, () => paramListTempStorage);
  React.useImperativeHandle(dataTempStorageRef, () => dataTempStorage);

  const isCurTypeOf = React.useCallback(
    (type: BASE_DATA_TYPE) => {
      return curPropertyType === type || get(props, ['extraDataTypes', curPropertyType, 'type']) === type;
    },
    [curPropertyType, props],
  );

  const isBasicDataType = React.useMemo(() => {
    return some(BASE_DATA_TYPE, (item) => item === curPropertyType);
  }, [curPropertyType]);

  const getRefTypePath = React.useCallback((data: Obj): string => {
    return get(data, [QUOTE_PREFIX, 0, '$ref']) || get(data, [QUOTE_PREFIX_NO_EXTENDED]) || '';
  }, []);

  const getExampleData = React.useCallback(
    (data: Obj, extraTypes?: Obj) => {
      if (!data) return '';
      const _extraTypes = extraTypes || props?.extraDataTypes;

      const refTypePath = getRefTypePath(data);
      const customType = refTypePath.split('/').slice(-1)[0];
      const customTypeData = get(_extraTypes, [customType]) || customType || {};

      if (typeof customTypeData === 'string') {
        const _type =
          get(props, ['allExtraDataTypes', customType, 'type']) || get(props, ['extraDataTypes', customType, 'type']);
        return _type === 'array' ? [] : {};
      }

      const curType = data.type || customTypeData.type;

      if (curType === 'object') {
        const newExtraTypes = produce(_extraTypes, (draft) => {
          draft && (draft[customType] = null);
        });

        const newExample: Obj = refTypePath ? getExampleData(customTypeData, newExtraTypes) : {};

        const customProperties = data.properties || {};
        forEach(keys(customProperties), (pName) => {
          const propertyItem = customProperties[pName];
          newExample[pName] = getExampleData(propertyItem, newExtraTypes);
        });

        return newExample;
      } else if (curType === 'array') {
        if (refTypePath) {
          const newItemExtraTypes = produce(_extraTypes, (draft) => {
            draft && (draft[customType] = null);
          });
          return getExampleData(customTypeData, newItemExtraTypes);
        } else {
          return [getExampleData(data.items, _extraTypes)];
        }
      } else if (refTypePath && customTypeData.example !== undefined) {
        return customTypeData.example;
      } else if (data.example !== undefined) {
        return data.example;
      } else {
        return DATATYPE_EXAMPLE_MAP[curType] || '';
      }
    },
    [getRefTypePath, props],
  );

  // 表单初始化加载
  React.useEffect(() => {
    formRef.current.resetFields();
    update({
      errorMap: {
        name: false,
        maxLength: false,
        minLength: false,
        maximum: false,
        minimum: false,
      },
      formErrorMap: {},
    });

    const innerProperties = formData?.properties;
    const requiredNames = formData?.required || [];
    updater.dataTempStorage(formData);

    const tempList = map(keys(innerProperties), (pKey: string) => {
      const _temp = { ...innerProperties[pKey] };
      if (formData?.type === 'object' && Array.isArray(formData?.required)) {
        _temp[API_PROPERTY_REQUIRED] = requiredNames.includes(pKey);
      }
      _temp[API_FORM_KEY] = pKey;

      return _temp;
    });
    updater.innerParamList(tempList);
    updater.paramListTempStorage(tempList);

    let _curPropertyType = formData?.type || formData?.schema?.type || 'object';

    const tempFormData = { ...formData };

    const refTypePath = getRefTypePath(formData);
    if (refTypePath) {
      const customType = refTypePath.split('/').slice(-1)[0];
      tempFormData.type = customType;
      _curPropertyType = customType;
    }

    updater.curPropertyType(_curPropertyType);

    setTimeout(() => {
      formRef.current!.setFieldsValue(tempFormData);
      if (isEmpty(formData)) {
        const _formData = formRef.current!.getFieldsValue();
        updater.dataTempStorage(_formData);
      } else {
        updater.dataTempStorage(formData);
      }
    });
  }, [updater, formData, getRefTypePath, update]);

  const AllDataTypes = React.useMemo(() => {
    return filter(props?.allDataTypes, (item) => item !== dataTempStorage[API_FORM_KEY]) || [];
  }, [dataTempStorage, props]);

  const onToggleDetail = React.useCallback(
    (visible) => {
      if (visible) {
        const omitList = getRefTypePath(dataTempStorage) ? ['type', API_FORM_KEY] : [API_FORM_KEY];
        const tempFormData = omit(dataTempStorage, omitList);
        const example = getExampleData(tempFormData);
        setTimeout(() => formRef.current!.setFieldsValue({ ...tempFormData, example }));
      }
      updater.dataTempStorage(dataTempStorageRef.current);
      if (curPropertyType === 'array' && arrayItemDataStorage) {
        updater.dataTempStorage(arrayItemDataStorage);
      } else {
        updater.dataTempStorage(dataTempStorageRef.current);
      }
      updater.innerParamList(paramListTempStorageRef.current);
      updater.detailVisible(visible);
    },
    [arrayItemDataStorage, curPropertyType, dataTempStorage, getExampleData, getRefTypePath, updater],
  );

  const propertyNameMap = React.useMemo(() => {
    const list = props?.siblingProperties || [];
    return map(list, (item) => item[API_FORM_KEY]);
  }, [props]);

  const setFields = React.useCallback(
    (fieldProps: ISetFieldProps) => {
      const { propertyKey = '', propertyData } = fieldProps;
      if (propertyKey === API_MEDIA && props.onSetMediaType) {
        props.onSetMediaType(fieldProps as { propertyKey: string; propertyData: string });
        return;
      }
      if (propertyKey === 'operation') {
        updater.detailVisible(propertyData);
        return;
      }
      if (formRef?.current) {
        const newFormData = produce(dataTempStorageRef.current, (draft: any) => {
          if (
            curPropertyType === 'array' &&
            !['description', 'type', API_FORM_KEY, API_PROPERTY_REQUIRED].includes(propertyKey)
          ) {
            set(draft, `items.${propertyKey}`, propertyData);
          } else {
            set(draft, propertyKey, propertyData);
          }

          if (propertyKey === 'type') {
            const curType = propertyData;
            updater.curPropertyType(curType);
            unset(draft, QUOTE_PREFIX);
            unset(draft, QUOTE_PREFIX_NO_EXTENDED);
            unset(draft, 'default');
            unset(draft, 'enum');

            if (curType === 'object' || curType === 'array') {
              unset(draft, 'pattern');
              unset(draft, 'maxLength');
              unset(draft, 'minLength');
              unset(draft, 'format');
              unset(draft, 'maximum');
              unset(draft, 'minimum');

              if (curType === 'object') {
                set(draft, 'properties', {});
                set(draft, 'required', []);
                unset(draft, 'items');
              }
              if (curType === 'array') {
                const tempItemData = {
                  type: 'string',
                  example: 'Example',
                };
                tempItemData[API_FORM_KEY] = 'items';
                set(draft, 'items', tempItemData);
                unset(draft, 'properties');
                updater.innerParamList([]);
                updater.paramListTempStorage([]);
              }
            } else if (['boolean', 'string', 'number', 'integer'].includes(curType)) {
              unset(draft, 'items');
              unset(draft, 'properties');
              unset(draft, 'required');
              if (curType !== 'number') {
                unset(draft, 'format');
                unset(draft, 'maximum');
                unset(draft, 'minimum');
              }
              if (curType !== 'string') {
                unset(draft, 'pattern');
                unset(draft, 'maxLength');
                unset(draft, 'minLength');
              }
              updater.innerParamList([]);
              updater.paramListTempStorage([]);
            }
            set(draft, 'example', DATATYPE_EXAMPLE_MAP[curType]);
          }
        });

        if (propertyKey === 'type') {
          if (!DATATYPE_EXAMPLE_MAP[propertyData]) {
            const customTypeData = get(props, ['extraDataTypes', propertyData]) || {};
            const _newTypeData = {
              ...omit(dataTempStorage, [QUOTE_PREFIX, QUOTE_PREFIX_NO_EXTENDED]),
              example: customTypeData.example || getExampleData(customTypeData),
              properties: customTypeData.type === 'object' ? {} : undefined,
              required: dataTempStorage.required,
              type: customTypeData.type,
            };
            // object类型的引用类型支持可拓展编辑
            if (customTypeData.type === 'object') {
              _newTypeData[QUOTE_PREFIX] = [{ $ref: `#/components/schemas/${propertyData}` }];
            } else {
              _newTypeData[QUOTE_PREFIX_NO_EXTENDED] = `#/components/schemas/${propertyData}`;
            }

            const typeQuotePath = _newTypeData[API_FORM_KEY];

            update({
              dataTempStorage: _newTypeData,
              innerParamList: [],
              paramListTempStorage: [],
            });

            formRef.current.setFieldsValue({ ..._newTypeData, type: propertyData });
            onChange(dataTempStorage[API_FORM_KEY], _newTypeData, { typeQuotePath, quoteTypeName: propertyData });
            return;
          }
        }

        updater.dataTempStorage(newFormData);
        onChange(dataTempStorage[API_FORM_KEY], newFormData);
      }
    },
    [curPropertyType, dataTempStorage, onChange, props, update, updater],
  );

  const dataTypeOptions = React.useMemo(() => {
    if (!props?.extraDataTypes) {
      return map(BASE_DATA_TYPE, (item) => (
        <Option key={item} value={item}>
          {item.slice(0, 1).toUpperCase() + item.slice(1)}
        </Option>
      ));
    } else {
      const basicDataTypeOptions = map(BASE_DATA_TYPE, (item) => (
        <Option key={item} value={item}>
          {item.slice(0, 1).toUpperCase() + item.slice(1)}
        </Option>
      ));
      const extraOptions =
        map(keys(props.extraDataTypes), (typeName) => (
          <Option key={typeName} value={typeName}>
            {typeName}
          </Option>
        )) || [];

      return [...basicDataTypeOptions, ...extraOptions];
    }
  }, [props]);

  const updateErrorNum = React.useCallback(
    (num, name) => {
      const _formErrorMap: IFormErrorMap = {};
      _formErrorMap[name] = num;
      if (curPropertyType === 'object') {
        forEach(paramListTempStorage, (param) => {
          const pName = param[API_FORM_KEY];
          if (pName === name) {
            _formErrorMap[pName] = num;
          } else {
            _formErrorMap[pName] = formErrorMap[pName] || 0;
          }
        });
      }

      updater.formErrorMap(_formErrorMap);
      const totalError = reduce(values(_formErrorMap), (total, cur) => total + cur, 0);

      props.updateErrorNum && props.updateErrorNum(totalError, dataTempStorage[API_FORM_KEY]);
      props.onFormErrorNumChange && props.onFormErrorNumChange(totalError, dataTempStorage[API_FORM_KEY]);
    },
    [curPropertyType, dataTempStorage, formErrorMap, paramListTempStorage, props, updater],
  );

  const onChangePropertyName = React.useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      const newName = e.target.value;
      const { pattern } = regRules.specialLetter;
      const nameMap = formType === 'DataType' ? AllDataTypes : propertyNameMap;
      let isErrorValue = true;

      const isSameWithBaseType = formType === 'DataType' && newName.toLocaleLowerCase() in BASE_DATA_TYPE;
      if (newName !== '' && !pattern.test(newName) && !nameMap.includes(newName) && !isSameWithBaseType) {
        const temp = produce(dataTempStorageRef.current, (draft) => {
          set(draft, API_FORM_KEY, newName);
        });
        isErrorValue = false;

        updater.dataTempStorage(temp);
        onChange(dataTempStorageRef.current[API_FORM_KEY], temp, {
          typeQuotePath: newName,
          quoteTypeName: curPropertyType,
        });
      }

      // 统计name类型错误数量
      const newErrorMap = { ...errorMap };
      if (isErrorValue && !errorMap.name) {
        newErrorMap.name = true;
        updater.errorMap(newErrorMap);
        const errorNum = reduce(values(newErrorMap), (total, cur) => (cur ? total + 1 : total), 0);

        updateErrorNum(errorNum, dataTempStorage[API_FORM_KEY]);
      } else if (!isErrorValue && errorMap.name) {
        newErrorMap.name = false;
        updater.errorMap(newErrorMap);
        const errorNum = reduce(values(newErrorMap), (total, cur) => (cur ? total + 1 : total), 0);

        updateErrorNum(errorNum, dataTempStorage[API_FORM_KEY]);
      }
    },
    [
      AllDataTypes,
      curPropertyType,
      dataTempStorage,
      errorMap,
      formType,
      onChange,
      propertyNameMap,
      updateErrorNum,
      updater,
    ],
  );

  const onChangeNumberValue = React.useCallback(
    ({ propertyKey, propertyData }: { propertyKey: string; propertyData: number }) => {
      let isErrorValue = true;

      if (propertyKey === 'minLength') {
        const maxLength = dataTempStorageRef.current?.maxLength;
        if (maxLength === undefined || maxLength >= propertyData) {
          setFields({ propertyKey, propertyData });
          isErrorValue = false;
        }
      } else if (propertyKey === 'maxLength') {
        const minLength = dataTempStorageRef.current?.minLength;
        if (minLength === undefined || minLength <= propertyData) {
          setFields({ propertyKey, propertyData });
          isErrorValue = false;
        }
      } else if (propertyKey === 'minimum') {
        const maximum = dataTempStorageRef.current?.maximum;
        if (maximum === undefined || maximum >= propertyData) {
          setFields({ propertyKey, propertyData });
          isErrorValue = false;
        }
      } else {
        const minimum = dataTempStorageRef.current?.minimum;
        if (minimum === undefined || minimum <= propertyData) {
          setFields({ propertyKey, propertyData });
          isErrorValue = false;
        }
      }

      // 统计number类型错误数量
      const newErrorMap = { ...errorMap };
      if (isErrorValue && !errorMap[propertyKey]) {
        newErrorMap[propertyKey] = true;
        updater.errorMap(newErrorMap);
        const errorNum = reduce(values(newErrorMap), (total, cur) => (cur ? total + 1 : total), 0);

        updateErrorNum(errorNum, dataTempStorage[API_FORM_KEY]);
      } else if (!isErrorValue && errorMap[propertyKey]) {
        newErrorMap[propertyKey] = false;
        updater.errorMap(newErrorMap);
        const errorNum = reduce(values(newErrorMap), (total, cur) => (cur ? total + 1 : total), 0);

        updateErrorNum(errorNum, dataTempStorage[API_FORM_KEY]);
      }
    },
    [errorMap, dataTempStorage, setFields, updater, updateErrorNum],
  );

  //  参数详情选项
  const propertyFields = React.useMemo(() => {
    const fields = formType !== 'Parameters' ? [descriptionField] : [];
    if (!getRefTypePath(dataTempStorage)) {
      const tempFields = getPropertyDetailFields({ type: curPropertyType, curPropertyType, formData: dataTempStorage });
      fields.push(...tempFields);
    } else if (get(props, `extraDataTypes.${curPropertyType}.type`)) {
      const tempFields = getPropertyDetailFields({
        type: curPropertyType,
        curPropertyType: get(props, ['extraDataTypes', curPropertyType, 'type']),
        formData: dataTempStorage,
      });
      fields.push(...tempFields);
    }

    return map(fields, (fieldItem) => {
      const tempFieldItem = produce(fieldItem, (draft) => {
        if (['minLength', 'maxLength', 'minimum', 'maximum'].includes(draft.name)) {
          set(draft, 'customProps.onChange', (e: React.ChangeEvent<HTMLInputElement> | any) => {
            const newNum = !(Object.prototype.toString.call(e) === '[object Object]') ? e : +e.target.value;
            onChangeNumberValue({ propertyKey: fieldItem?.name, propertyData: newNum });
          });
        } else {
          set(draft, 'customProps.onChange', (e: React.ChangeEvent<HTMLInputElement> | any) => {
            const newVal = !(Object.prototype.toString.call(e) === '[object Object]') ? e : e.target.value;
            setFields({ propertyKey: fieldItem?.name, propertyData: newVal });
          });
        }
        set(draft, 'customProps.disabled', !isEditMode);
      });
      return tempFieldItem;
    });
  }, [formType, getRefTypePath, dataTempStorage, props, curPropertyType, isEditMode, onChangeNumberValue, setFields]);

  const onArrayItemChange = (_formKey: string, _formData: any, extraProps?: Obj) => {
    const newExample = [getExampleData(_formData)];
    const tempData = produce(dataTempStorageRef.current, (draft) => {
      draft.items = _formData;
      draft.example = newExample;
    });
    const _extraProps = {
      quoteTypeName: extraProps?.quoteTypeName,
      typeQuotePath: extraProps?.typeQuotePath
        ? `${dataTempStorageRef.current[API_FORM_KEY]}.${extraProps.typeQuotePath}`
        : '',
    };
    props.onChange(dataTempStorageRef.current[API_FORM_KEY], tempData, _extraProps);
    updater.arrayItemDataStorage(tempData);
  };

  const updateInnerParamList = (formKey: string, _formData: any, extraProps?: Obj) => {
    const tempList = produce(paramListTempStorageRef.current, (draft) => {
      forEach(draft, (item, index) => {
        if (item[API_FORM_KEY] === formKey) {
          draft[index] = _formData;
        }
      });
    });
    const requiredNames: string[] = [];

    const refTypePath = getRefTypePath(dataTempStorage);
    const customDataType = refTypePath ? refTypePath.split('/').slice(-1)[0] : '';

    const objectExample: Obj = { ...getExampleData(get(props, ['extraDataTypes', customDataType])) };

    forEach(tempList, (item) => {
      const _example = item?.example || DATATYPE_EXAMPLE_MAP[item?.type];
      if (item[API_PROPERTY_REQUIRED]) {
        requiredNames.push(item[API_FORM_KEY]);
      }
      objectExample[item[API_FORM_KEY]] = _example;
    });

    updater.paramListTempStorage(tempList);

    if (props.onChange && tempList?.length) {
      const newProperties = {};
      forEach(tempList, (item) => {
        newProperties[item[API_FORM_KEY]] = item;
      });
      const tempData = produce(dataTempStorageRef.current, (draft) => {
        draft.properties = newProperties;
        draft.type = 'object';
        draft.required = requiredNames;
        draft.example = objectExample;
      });
      updater.dataTempStorage(tempData);
      const typeQuotePath = extraProps?.typeQuotePath
        ? `${tempData[API_FORM_KEY] || 'schema'}.properties.${extraProps?.typeQuotePath}`
        : '';
      props.onChange(dataTempStorageRef.current[API_FORM_KEY], tempData, {
        typeQuotePath,
        quoteTypeName: extraProps?.quoteTypeName,
      });
    }
  };

  const deleteParamByFormKey = (_data: Obj, index: number) => {
    const tempList = paramListTempStorage.filter((_record, i) => index !== i);

    updater.innerParamList(tempList);
    updater.paramListTempStorage(tempList);

    const tempProperties = {};
    const newExample = {};
    const requiredNames: string[] = [];

    forEach(tempList, (item) => {
      tempProperties[item[API_FORM_KEY]] = item;
      newExample[item[API_FORM_KEY]] = item?.example;
      item[API_PROPERTY_REQUIRED] && requiredNames.push(item[API_FORM_KEY]);
    });

    const newFormData = produce(dataTempStorage, (draft) => {
      set(draft, 'properties', tempProperties);
      set(draft, 'example', newExample);
      set(draft, 'required', requiredNames);
    });
    updater.dataTempStorage(newFormData);
    props?.onChange && props.onChange(newFormData[API_FORM_KEY], newFormData);
  };

  const getExistNames = React.useCallback(() => {
    const existNames = map(paramListTempStorage, (item) => item[API_FORM_KEY]);

    const refTypePath = getRefTypePath(dataTempStorage);
    const customDataType = refTypePath ? refTypePath.split('/').slice(-1)[0] : '';

    if (refTypePath && get(props, `extraDataTypes.${curPropertyType}.type`) === 'object') {
      const _extraProperties = get(props, ['extraDataTypes', customDataType, 'properties']);
      existNames.push(...keys(_extraProperties));
    }
    return existNames;
  }, [curPropertyType, dataTempStorage, getRefTypePath, paramListTempStorage, props]);

  // object类型的批量添加参数
  const addParamList = React.useCallback(
    (newList: Obj[]) => {
      const refTypePath = getRefTypePath(dataTempStorage);
      const customDataType = refTypePath ? refTypePath.split('/').slice(-1)[0] : '';

      const tempList = [...paramListTempStorage, ...newList];
      updater.innerParamList(tempList);
      updater.paramListTempStorage(tempList);

      const tempProperties = {};
      forEach(tempList, (item) => {
        tempProperties[item[API_FORM_KEY]] = item;
      });
      const newExample = refTypePath ? { ...get(props, `extraDataTypes.${customDataType}.example`) } : {};

      const requiredNames: string[] = [];
      forEach(tempList, (property) => {
        property[API_PROPERTY_REQUIRED] && requiredNames.push(property[API_FORM_KEY]);
        newExample[property[API_FORM_KEY]] = property?.example;
      });

      const newFormData = produce(dataTempStorage, (draft) => {
        set(draft, 'properties', tempProperties);
        set(draft, 'type', 'object');
        set(draft, 'example', newExample);
        set(draft, 'required', requiredNames);
      });
      updater.dataTempStorage(newFormData);
      props?.onChange && props.onChange(dataTempStorage[API_FORM_KEY], newFormData);
    },
    [dataTempStorage, getRefTypePath, paramListTempStorage, props, updater],
  );

  // object添加单个参数
  const addParam = React.useCallback(() => {
    let newPropertyName = `propertyName${innerParamList?.length + 1}`;
    const existNames = getExistNames();

    while (existNames.includes(newPropertyName)) {
      newPropertyName += '1';
    }

    const tempObj = {
      type: 'string',
      example: 'Example',
    };
    tempObj[API_PROPERTY_REQUIRED] = true;
    tempObj[API_FORM_KEY] = newPropertyName;

    addParamList([tempObj]);
  }, [addParamList, getExistNames, innerParamList]);

  // 更新设置example示例
  React.useEffect(() => {
    const tempData = isCurTypeOf(BASE_DATA_TYPE.array) && arrayItemDataStorage ? arrayItemDataStorage : dataTempStorage;
    if (tempData.example && typeof tempData.example === 'object') {
      const newExample = getExampleData(tempData);
      formRef.current.resetFields(['example']);
      formRef.current.setFieldsValue({ example: newExample });
    }
  }, [arrayItemDataStorage, curPropertyType, dataTempStorage, getExampleData, isCurTypeOf]);

  const onCloseParamsModal = () => updater.paramsModalVisible(false);

  const onImport = (importedParams: Obj[]) => {
    onCloseParamsModal();
    addParamList(importedParams);
  };

  const formFieldsSelector = React.useMemo(() => {
    const tempFields = getPropertyFormSelector({
      formType,
      dataTypeOptions,
      propertyNameMap,
      AllDataTypes,
      detailVisible,
      index,
    });
    return map(tempFields, (fieldItem: any) => {
      const tempFieldItem = produce(fieldItem, (draft: { name: string }) => {
        if (draft.name === API_FORM_KEY && ['DataType', 'Query'].includes(formType)) {
          set(draft, 'customProps.onChange', onChangePropertyName);
        } else if (draft.name === 'operation') {
          set(draft, 'customProps.onChange', onToggleDetail);
        } else {
          set(draft, 'customProps.onChange', (e: React.ChangeEvent<HTMLInputElement> | string | boolean) => {
            const newVal = typeof e === 'string' || typeof e === 'boolean' ? e : e.target.value;
            setFields({ propertyKey: fieldItem?.name, propertyData: newVal });
          });
        }
        set(draft, 'customProps.disabled', !isEditMode);
      });
      return tempFieldItem;
    });
  }, [
    formType,
    dataTypeOptions,
    propertyNameMap,
    AllDataTypes,
    detailVisible,
    isEditMode,
    onChangePropertyName,
    onToggleDetail,
    setFields,
    index,
  ]);

  const detailType = React.useMemo(() => {
    if (detailVisible) {
      if (isCurTypeOf(BASE_DATA_TYPE.object)) {
        return 'object';
      } else if (isCurTypeOf(BASE_DATA_TYPE.array)) {
        return 'array';
      } else if (!isBasicDataType) {
        return 'example';
      }
    }
    return '';
  }, [detailVisible, isBasicDataType, isCurTypeOf]);

  return (
    <FormBuilder isMultiColumn ref={formRef}>
      {props?.formType !== 'Parameters' && <Fields fields={formFieldsSelector} />}
      {detailVisible && isBasicDataType && <Fields fields={propertyFields} />}
      {detailType === 'object' && (
        <div>
          {map(innerParamList, (record, index) => {
            return (
              <div className="param-form" key={record[API_FORM_KEY]}>
                {isEditMode && (
                  <div className="param-form-operation">
                    <Popconfirm
                      title={`${i18n.t('common:confirm to delete')}?`}
                      onConfirm={() => deleteParamByFormKey(record, index)}
                    >
                      <CustomIcon type="shanchu" className="param-form-operation-btn cursor-pointer" />
                    </Popconfirm>
                  </div>
                )}
                <div className="param-form-content">
                  <FormBuilder isMultiColumn>
                    <PropertyItemForm
                      key={record[API_FORM_KEY]}
                      updateErrorNum={updateErrorNum}
                      formData={record}
                      isEditMode={isEditMode}
                      onChange={updateInnerParamList}
                      extraDataTypes={props?.extraDataTypes}
                      allExtraDataTypes={props?.allExtraDataTypes}
                      siblingProperties={filter(
                        paramListTempStorage,
                        (item) => item[API_FORM_KEY] !== record[API_FORM_KEY],
                      )}
                      index={index}
                    />
                  </FormBuilder>
                </div>
              </div>
            );
          })}
          {isEditMode && (
            <>
              <Button className="operation-btn mb-4" onClick={addParam}>
                {i18n.t('common:add parameter')}
              </Button>
              <Button className="operation-btn mb-4 ml-2" onClick={() => updater.paramsModalVisible(true)}>
                {i18n.t('dop:import parameters')}
              </Button>
            </>
          )}
          {props?.formType !== 'Parameters' && <Fields fields={[objectExampleField]} />}
        </div>
      )}
      {detailType === 'array' && (
        <>
          {isBasicDataType && (
            <div className="array-form">
              <PropertyItemForm
                formType="Array"
                updateErrorNum={updateErrorNum}
                formData={dataTempStorage.items || {}}
                detailVisible
                onChange={onArrayItemChange}
                isEditMode={isEditMode}
                extraDataTypes={props?.extraDataTypes}
                allExtraDataTypes={props?.allExtraDataTypes}
                siblingProperties={filter(
                  paramListTempStorage,
                  (item) => item[API_FORM_KEY] !== dataTempStorage.items[API_FORM_KEY],
                )}
              />
            </div>
          )}
          <Fields fields={[objectExampleField]} />
        </>
      )}
      {detailType === 'example' && <Fields fields={[objectExampleField]} />}
      <ApiParamsModal
        visible={paramsModalVisible}
        onImport={onImport}
        onClose={onCloseParamsModal}
        paramList={paramListTempStorage}
      />
    </FormBuilder>
  );
})

DataTypeConfig = (props: IProps) => {
  const [{ propertyFormData }, updater] = useUpdate({
    propertyFormData: {} as Obj,
  });
  const { formData, onQuoteNameChange, quotePathMap, isEditMode, dataType, onDataTypeNameChange, dataTypeNameMap } =
    props;
  const { updateOpenApiDoc, updateFormErrorNum } = apiDesignStore;
  const [openApiDoc] = apiDesignStore.useStore((s) => [s.openApiDoc]);

  const openApiDocRef = useLatest(openApiDoc);
  const quotePathMapRef = useLatest(quotePathMap);
  const formRef = React.useRef<IFormExtendType>(null);

  React.useEffect(() => {
    const newFormData = { ...omit(formData, 'name') };
    newFormData[API_FORM_KEY] = formData[API_FORM_KEY] || formData.name;
    updater.propertyFormData(newFormData);
  }, [updater, formData]);

  const extraDataTypes = React.useMemo(() => {
    const tempTypes = get(openApiDoc, 'components.schemas') || {};
    const types = {};
    const forbiddenTypes = get(tempTypes, [dataType, 'x-dice-forbidden-types']) || [dataType];
    forEach(keys(tempTypes), (typeName) => {
      if (!forbiddenTypes?.includes(typeName)) {
        types[typeName] = tempTypes[typeName];
      }
    });
    return types;
  }, [dataType, openApiDoc]);

  const allExtraDataTypes = React.useMemo(() => {
    return get(openApiDoc, 'components.schemas') || {};
  }, [openApiDoc]);

  const getForbiddenTypes = React.useCallback((data: Obj, storage: string[]) => {
    if (data?.properties) {
      forEach(values(data.properties), (item) => {
        const refTypePath = get(item, [QUOTE_PREFIX, 0, '$ref']) || data[QUOTE_PREFIX_NO_EXTENDED];
        if (refTypePath) {
          const tempQuoteName = refTypePath.split('#/components/schemas/')[1];
          if (!storage.includes(tempQuoteName)) {
            storage.push(tempQuoteName);
          }
        }
        getForbiddenTypes(item, storage);
      });
    } else if (data?.items) {
      const itemsData = data.items;
      const refTypePath = get(itemsData, [QUOTE_PREFIX, 0, '$ref']) || itemsData[QUOTE_PREFIX_NO_EXTENDED];
      if (refTypePath) {
        const tempQuoteName = refTypePath.split('#/components/schemas/')[1];
        if (!storage.includes(tempQuoteName)) {
          storage.push(tempQuoteName);
        }
        getForbiddenTypes(itemsData, storage);
      }
    }
  }, []);

  const onFormChange = React.useCallback(
    (_formKey: string, _formData: any, extraProps?: Obj) => {
      const quotedType = extraProps?.quoteTypeName;

      const nName: string = _formData[API_FORM_KEY]; // 当前正在编辑的类型的新name
      const tempMap = {};
      const originalDataTypeMap = get(openApiDocRef.current, ['components', 'schemas']);

      const usedCustomTypes: string[] = []; // 获取所有引用当前类型的其他类型
      const refTypePath = get(_formData, [QUOTE_PREFIX, 0, '$ref']) || _formData[QUOTE_PREFIX_NO_EXTENDED];
      if (refTypePath) {
        const tempQuoteName = refTypePath.split('#/components/schemas/')[1];
        usedCustomTypes.push(tempQuoteName);
      }

      getForbiddenTypes(_formData, usedCustomTypes);

      forEach(keys(originalDataTypeMap), (typeKey: string) => {
        if (typeKey !== dataType) {
          const isSelfUsed = usedCustomTypes.includes(typeKey); // 是否引用了当前正在编辑的类型
          const _originalForbiddenTypes = filter(
            get(originalDataTypeMap, [typeKey, 'x-dice-forbidden-types']) || [],
            (item) => item !== dataType,
          );

          if (!_originalForbiddenTypes.includes(typeKey)) {
            // 每个类型禁止引用自己
            _originalForbiddenTypes.push(typeKey);
          }

          // 若当前编辑的类型引用了该类型，则禁该止引用当前正在编辑的类型
          if (isSelfUsed || quotedType === typeKey) {
            _originalForbiddenTypes.push(nName);
          }

          tempMap[typeKey] = {
            ...originalDataTypeMap[typeKey],
            'x-dice-forbidden-types': _originalForbiddenTypes,
          };
        }
      });

      let originalForbiddenTypes: string[] = _formData['x-dice-forbidden-types'] || [dataType];
      if (dataType !== nName) {
        originalForbiddenTypes = originalForbiddenTypes.filter(
          (item) => item !== dataType && originalDataTypeMap[item],
        );
        originalForbiddenTypes.push(nName);
      }
      tempMap[nName] = {
        ..._formData,
        'x-dice-forbidden-types': originalForbiddenTypes,
      };

      if (dataType !== nName) {
        onDataTypeNameChange(nName);

        const newPathMap = produce(quotePathMapRef.current, (draft) => {
          draft[nName] = filter(draft[dataType], (itemPath) => get(openApiDocRef.current, itemPath));
          unset(draft, dataType);
        });

        const newHref =
          _formData.type === 'object' ? [{ $ref: `#/components/schemas/${nName}` }] : `#/components/schemas/${nName}`;
        const quotePrefix = _formData.type === 'object' ? QUOTE_PREFIX : QUOTE_PREFIX_NO_EXTENDED;

        const _tempDocDetail = produce(openApiDocRef.current, (draft) => {
          set(draft, 'components.schemas', tempMap);
        });

        const tempDocDetail = produce(_tempDocDetail, (draft) => {
          forEach(quotePathMapRef.current[dataType], (curTypeQuotePath) => {
            if (
              get(draft, [...curTypeQuotePath, QUOTE_PREFIX]) ||
              get(draft, [...curTypeQuotePath, QUOTE_PREFIX_NO_EXTENDED])
            ) {
              unset(draft, [...curTypeQuotePath, QUOTE_PREFIX]);
              unset(draft, [...curTypeQuotePath, QUOTE_PREFIX_NO_EXTENDED]);
              set(draft, [...curTypeQuotePath, quotePrefix], newHref);
            }
          });
        });
        updateOpenApiDoc(tempDocDetail);
        onQuoteNameChange(newPathMap);
      } else {
        if (quotedType && extraProps?.typeQuotePath) {
          const prefixPath = `components.schemas.${extraProps.typeQuotePath}`;

          const isQuotedBefore =
            get(openApiDocRef.current, `${prefixPath}.${QUOTE_PREFIX}.0.$ref`) ||
            get(openApiDocRef.current, `${prefixPath}.${QUOTE_PREFIX_NO_EXTENDED}`);
          const oldQuotedType = isQuotedBefore ? isQuotedBefore.split('/').slice(-1)[0] : '';

          const newPathMap = produce(quotePathMapRef.current, (draft) => {
            draft[quotedType] = draft[quotedType] || [];
            draft[quotedType].push(prefixPath.split('.'));
            if (oldQuotedType) {
              draft[oldQuotedType] = filter(draft[oldQuotedType], (item) => item.join('.') !== prefixPath);
            }
          });
          onQuoteNameChange(newPathMap);
        }

        const tempDocDetail = produce(openApiDocRef.current, (draft) => {
          set(draft, 'components.schemas', tempMap);
        });
        updateOpenApiDoc(tempDocDetail);
      }
    },
    [
      dataType,
      getForbiddenTypes,
      onDataTypeNameChange,
      onQuoteNameChange,
      openApiDocRef,
      quotePathMapRef,
      updateOpenApiDoc,
    ],
  );

  return (
    <div className="basic-params-config">
      <FormBuilder isMultiColumn className="param-config-form" ref={formRef}>
        <PropertyItemForm
          onChange={onFormChange}
          onFormErrorNumChange={updateFormErrorNum}
          detailVisible
          formType="DataType"
          formData={propertyFormData}
          extraDataTypes={extraDataTypes}
          allExtraDataTypes={allExtraDataTypes}
          isEditMode={isEditMode}
          allDataTypes={dataTypeNameMap}
        />
      </FormBuilder>
    </div>
  );
}

ApiDesign = () => {
  const [
    {
      contentKey,
      dataTypeFormData,
      filterKey,
      apiResourceList,
      apiDataTypeList,

      quotePathMap,
      treeModalVisible,
      apiModalVisible,
      curTreeNodeData,
      curApiName,
      curDataType,
      newTreeNode,
      popVisible,
      apiDetail,
    },
    updater,
    update,
  ] = useUpdate({
    contentKey: 'SUMMARY',
    dataTypeFormData: {},
    filterKey: '',
    apiResourceList: [] as string[],
    apiDataTypeList: [] as string[],

    quotePathMap: {} as Obj,
    treeModalVisible: false,
    apiModalVisible: false,
    curTreeNodeData: {},
    curApiName: '',

    curDataType: '',
    newTreeNode: {} as API_SETTING.IFileTree,
    popVisible: false,
    apiDetail: {},
  });

  const { inode: inodeQuery, pinode: pinodeQuery } = routeInfoStore.useStore((s) => s.query);

  React.useEffect(() => {
    const [key] = contentKey.split('&DICE&');
    if (key === 'RESOURCE') {
      curApiName && updater.contentKey(`${key}&DICE&${curApiName}`);
    } else {
      curDataType && updater.contentKey(`${key}&DICE&${curDataType}`);
    }
  }, [curApiName, contentKey, updater, curDataType]);
  const { isExternalRepo, repoConfig } = appStore.useStore((s) => s.detail);

  const [openApiDoc, apiWs, apiLockState, isDocChanged, wsQuery, formErrorNum, isApiReadOnly, lockUser, docValidData] =
    apiDesignStore.useStore((s) => [
      s.openApiDoc,
      s.apiWs,
      s.apiLockState,
      s.isDocChanged,
      s.wsQuery,
      s.formErrorNum,
      s.isApiReadOnly,
      s.lockUser,
      s.docValidData,
    ]);

  const {
    updateOpenApiDoc,
    createTreeNode,
    commitSaveApi,
    getApiDetail,
    publishApi,
    updateFormErrorNum,
    resetDocValidData,
  } = apiDesignStore;

  const [getApiDocDetailLoading, commitSaveApiLoading, getTreeListLoading] = useLoading(apiDesignStore, [
    'getApiDetail',
    'commitSaveApi',
    'getTreeList',
  ]);

  useMount(() => {
    window.addEventListener('beforeunload', beforeunload);
  });

  useUnmount(() => {
    updateOpenApiDoc({});
    apiWs && apiWs.close();
    window.removeEventListener('beforeunload', beforeunload);
  });

  const changeRef = React.useRef(null as any);

  React.useEffect(() => {
    changeRef.current = isDocChanged;
  }, [isDocChanged]);

  const beforeunload = React.useCallback((e) => {
    const msg = `${i18n.t('dop:not saved yet, confirm to leave')}?`;
    if (changeRef.current) {
      // eslint-disable-next-line no-param-reassign
      (e || window.event).returnValue = msg;
    }

    return msg;
  }, []);

  const apiResourceMap = React.useMemo(() => {
    const tempMap = openApiDoc?.paths || {};
    const fullKeys = keys(tempMap);
    let tempList = [];
    if (filterKey) {
      tempList = filter(keys(tempMap), (name) => name.indexOf(filterKey) > -1);
    } else {
      tempList = fullKeys;
    }
    updater.apiResourceList(tempList);
    return tempMap;
  }, [filterKey, openApiDoc, updater]);

  const apiDataTypeMap = React.useMemo(() => {
    const tempMap = openApiDoc?.components?.schemas || {};
    const fullKeys = keys(tempMap);
    let tempList = [];
    if (filterKey) {
      tempList = filter(fullKeys, (name) => name.indexOf(filterKey) > -1);
    } else {
      tempList = fullKeys;
    }
    updater.apiDataTypeList(tempList);
    return tempMap;
  }, [filterKey, openApiDoc, updater]);

  const onCreateDoc = (values: { name: string; pinode: string }) => {
    createTreeNode(values).then((res) => {
      updater.newTreeNode(res);
    });
    updater.treeModalVisible(false);
  };

  const onContentChange = React.useCallback(
    (contentName: string) => {
      const nextHandle = () => {
        updateFormErrorNum(0);
        const [, name] = contentName.split('&DICE&');
        updater.contentKey(contentName);
        if (contentName.startsWith('RESOURCE') && name) {
          updater.curApiName(name);
          const tempApiDetail = get(openApiDoc, ['paths', name]) || {};
          updater.apiDetail(tempApiDetail);
        }
        if (contentName.startsWith('DATATYPE')) {
          const _fromData = apiDataTypeMap[name] || { type: 'string', example: 'Example', 'x-dice-name': name };
          updater.dataTypeFormData({ ..._fromData, name });
          updater.curDataType(name);
        }
      };

      if (formErrorNum > 0) {
        confirm({
          title: i18n.t('dop:Are you sure to leave, with the error message not saved?'),
          onOk() {
            nextHandle();
          },
        });
      } else {
        nextHandle();
      }
    },
    [apiDataTypeMap, formErrorNum, openApiDoc, updateFormErrorNum, updater],
  );

  const dataTypeNameMap = React.useMemo(() => {
    return keys(get(openApiDoc, ['components', 'schemas']));
  }, [openApiDoc]);

  const apiNameMap = React.useMemo(() => {
    return keys(openApiDoc.paths || {});
  }, [openApiDoc]);

  const onAddHandle = (addKey: IListKey) => {
    let newData = {};
    let newName = `/api/new${apiResourceList.length}`;
    while (apiNameMap.includes(newName)) {
      newName += '1';
    }
    let dataPath = ['paths', newName];

    if (addKey === 'DATATYPE') {
      newName = `NewDataType${apiDataTypeList.length}`;
      newData = { type: 'string', example: 'Example', 'x-dice-name': newName };
      dataPath = ['components', 'schemas', newName];
    }

    const tempDocDetail = produce(openApiDoc, (draft) => set(draft, dataPath, newData));
    updateOpenApiDoc(tempDocDetail);

    onContentChange(`${addKey}&DICE&${newName}`);
  };

  const onDeleteHandle = (itemKey: string) => {
    const [key, name] = itemKey.split('&DICE&');

    if (key === 'DATATYPE') {
      const newQuoteMap = getQuoteMap(openApiDoc);
      if (newQuoteMap[name]?.length) {
        message.warning(i18n.t('dop:this type is referenced and cannot be deleted'));
        return;
      }
    } else if (key === 'RESOURCE') {
      const paths = keys(openApiDoc.paths);
      if (paths.length === 1) {
        message.warning(i18n.t('dop:at least one API needs to be kept'));
        return;
      }
    }
    const dataPath = key === 'RESOURCE' ? ['paths', name] : ['components', 'schemas', name];
    const tempDocDetail = produce(openApiDoc, (draft) => {
      unset(draft, dataPath);
    });
    updateOpenApiDoc(tempDocDetail);
    onContentChange('SUMMARY');
  };

  // 左侧列表头部渲染
  const renderPanelHead = (titleKey: IListKey) => (
    <div className="list-panel-head inline-flex justify-between items-center">
      <span className="font-bold">{LIST_TITLE_MAP[titleKey]}</span>
      {!apiLockState && (
        <ErdaIcon
          type="plus"
          className="mr-0 cursor-pointer"
          size="16px"
          onClick={(e) => {
            e.stopPropagation();
            onAddHandle(titleKey);
          }}
        />
      )}
    </div>
  );

  // 左侧列表渲染
  const renderListItem = (listKey: IListKey, name: string) => {
    const apiData = apiResourceMap[name] || {};
    const key = `${listKey}&DICE&${name}`;
    return (
      <LazyRender key={name} minHeight={listKey === 'RESOURCE' ? '58px' : '37px'}>
        <div
          className={`list-title ${contentKey === key ? 'list-title-active' : ''}`}
          onClick={() => onContentChange(key)}
        >
          <div className="flex justify-between items-center">
            <Ellipsis title={name}>
              <div className="list-title-name w-full nowrap mr-1">{name}</div>
            </Ellipsis>
            <Popconfirm
              title={`${i18n.t('common:confirm to delete')}?`}
              onConfirm={(e: any) => {
                e.stopPropagation();
                onDeleteHandle(key);
              }}
              onCancel={(e: any) => e.stopPropagation()}
            >
              {!apiLockState && (
                <CustomIcon
                  type="shanchu"
                  className="list-title-btn cursor-pointer"
                  onClick={(e) => e?.stopPropagation()}
                />
              )}
            </Popconfirm>
          </div>
          {listKey === 'RESOURCE' && (
            <div className="method-list">
              {map(API_METHODS, (methodKey: API_SETTING.ApiMethod) => {
                const methodIconClass = !isEmpty(apiData[methodKey]) ? `method-icon-${methodKey}` : '';
                return (
                  <Tooltip title={methodKey} key={methodKey}>
                    <div className={`method-icon mr-2 ${methodIconClass}`} />
                  </Tooltip>
                );
              })}
            </div>
          )}
        </div>
      </LazyRender>
    );
  };

  // 获取所有引用的pathMap
  const getQuoteMap = React.useCallback(
    (data: Obj) => {
      const getQuotePath = (innerData: Obj, prefixPath: Array<number | string>, pathMap: Obj) => {
        const refTypePath = get(innerData, [QUOTE_PREFIX, 0, '$ref']) || innerData[QUOTE_PREFIX_NO_EXTENDED];
        if (refTypePath) {
          const _type = refTypePath.split('/').slice(-1)[0];
          // eslint-disable-next-line no-param-reassign
          !pathMap[_type] && (pathMap[_type] = []);
          if (!pathMap[_type].includes(prefixPath)) {
            pathMap[_type].push(prefixPath);
          }
        }
        if (innerData?.properties) {
          forEach(keys(innerData.properties), (item) => {
            getQuotePath(innerData.properties[item], [...prefixPath, 'properties', item], pathMap);
          });
        }
        if (innerData?.items) {
          getQuotePath(innerData.items, [...prefixPath, 'items'], pathMap);
        }
      };

      const tempMap = {};
      const pathMap = data.paths;
      forEach(keys(pathMap), (path) => {
        const pathData = pathMap[path];
        forEach(keys(pathData), (method) => {
          const methodData = pathData[method];
          const _path = ['paths', path, method];

          forEach(API_MEDIA_TYPE, (mediaType) => {
            // responses
            const responsePath = ['responses', '200', 'content', mediaType, 'schema'];
            const responseData = get(methodData, responsePath) || {};
            getQuotePath(responseData, [..._path, ...responsePath], tempMap);

            // requestBody;
            const requestBodyPath = ['requestBody', 'content', mediaType, 'schema'];
            const requestBody = get(methodData, requestBodyPath) || {};
            getQuotePath(requestBody, [..._path, ...requestBodyPath], tempMap);
          });

          // parameters
          const parametersData = methodData.parameters || [];
          forEach(parametersData, (pData, index) => {
            getQuotePath(pData, [..._path, 'parameters', index], tempMap);
          });
        });
      });

      // datatype中的引用
      const dataTypeData = data?.components?.schemas || {};
      forEach(keys(dataTypeData), (dataTypeName) => {
        getQuotePath(dataTypeData[dataTypeName], ['components', 'schemas', dataTypeName], tempMap);
      });
      updater.quotePathMap(tempMap);
      return tempMap;
    },
    [updater],
  );

  const onQuotePathMapChange = React.useCallback(
    (pathMap: Obj) => {
      updater.quotePathMap(pathMap);
    },
    [updater],
  );

  const onApiNameChange = React.useCallback(
    (name: string) => {
      updater.curApiName(name);
    },
    [updater],
  );

  const renderContent = (key: string) => {
    if (key.startsWith('RESOURCE')) {
      return (
        <ApiResource
          onQuoteChange={onQuotePathMapChange}
          onApiNameChange={onApiNameChange}
          quotePathMap={quotePathMap}
          apiName={curApiName}
          apiDetail={apiDetail}
        />
      );
    } else if (key.startsWith('DATATYPE')) {
      return (
        <DataTypeConfig
          quotePathMap={quotePathMap}
          dataTypeNameMap={dataTypeNameMap}
          formData={dataTypeFormData}
          key={dataTypeFormData?.name}
          dataType={curDataType}
          onQuoteNameChange={onQuotePathMapChange}
          onDataTypeNameChange={(name) => updater.curDataType(name)}
          isEditMode={!apiLockState}
        />
      );
    } else {
      return <ApiSummary />;
    }
  };

  const isDocLocked = React.useMemo(() => {
    return wsQuery?.sessionID && apiLockState;
  }, [apiLockState, wsQuery]);

  const LockTipVisible = React.useMemo(() => isApiReadOnly || isDocLocked, [isApiReadOnly, isDocLocked]);

  const docLockTip = React.useMemo(() => {
    if (isApiReadOnly) {
      return i18n.t('dop:protect branch, not editable');
    } else if (isDocLocked) {
      return lockUser + API_LOCK_WARNING;
    } else {
      return '';
    }
  }, [isApiReadOnly, isDocLocked, lockUser]);

  const errorData = React.useMemo(() => {
    return {
      branchName: curTreeNodeData.branchName,
      docName: `${curTreeNodeData.apiDocName}.yaml`,
      msg: docValidData.msg,
    };
  }, [curTreeNodeData, docValidData]);

  const onEditDocHandle = () => {
    if (!apiWs) {
      initApiWs({ inode: inodeQuery, pinode: pinodeQuery });
    } else if (isDocLocked) {
      message.warning(lockUser + API_LOCK_WARNING);
    }
  };

  const onPublishApi = React.useCallback(
    (values: any) => {
      publishApi(values).then(() => {
        apiWs && apiWs.close();
        getApiDetail(inodeQuery as string).then((data: any) => {
          getQuoteMap(data.openApiDoc);
          updater.curTreeNodeData({
            ...curTreeNodeData,
            asset: data.asset,
          });
        });
      });
    },
    [apiWs, curTreeNodeData, getApiDetail, getQuoteMap, inodeQuery, publishApi, updater],
  );

  const onSelectDoc = React.useCallback(
    (nodeData, reset) => {
      if (reset) {
        updateOpenApiDoc({});
        resetDocValidData();
      }
      onContentChange('Summary');
      update({
        contentKey: 'SUMMARY',
        curTreeNodeData: nodeData,
        newTreeNode: {} as API_SETTING.IFileTree,
        filterKey: '',
      });
    },
    [onContentChange, resetDocValidData, update, updateOpenApiDoc],
  );

  const onToggleTreeVisible = React.useCallback(
    (val: boolean) => {
      updater.popVisible(val);
    },
    [updater],
  );

  const onConfirmPublish = React.useCallback(() => {
    if (isDocChanged) {
      confirm({
        title: i18n.t('dop:The current document has not been saved. Publish the saved document?'),
        onOk() {
          updater.apiModalVisible(true);
        },
      });
    } else {
      updater.apiModalVisible(true);
    }
  }, [isDocChanged, updater]);

  const showErrorDocTip = React.useMemo(() => {
    return !docValidData.valid && !isDocChanged && !isEmpty(openApiDoc);
  }, [docValidData.valid, isDocChanged, openApiDoc]);

  return isExternalRepo === undefined ? (
    <EmptyHolder relative />
  ) : (
    <div className="api-design">
      <TopButtonGroup>
        <Button type="primary" onClick={() => updater.treeModalVisible(true)}>
          {i18n.t('dop:New Document')}
        </Button>
      </TopButtonGroup>
      <div className="api-design-wrap">
        <div className="search-wrap mb-4 flex items-center justify-start">
          <ApiDocTree
            treeNodeData={curTreeNodeData}
            newTreeNode={newTreeNode}
            getQuoteMap={getQuoteMap}
            onSelectDoc={onSelectDoc}
            popVisible={popVisible}
            onVisibleChange={onToggleTreeVisible}
          />
          {LockTipVisible && (
            <span className="ml-4">
              <CustomIcon type="lock" />
              {docLockTip}
            </span>
          )}
          {showErrorDocTip && <ErrorPopover {...errorData} />}
          {inodeQuery && !isEmpty(curTreeNodeData) && (
            <div className="flex items-center flex-wrap justify-end flex-1">
              {!apiWs || isDocLocked ? (
                <WithAuth pass={!isApiReadOnly && docValidData.valid}>
                  <Button type="ghost" onClick={onEditDocHandle}>
                    {i18n.t('Edit')}
                  </Button>
                </WithAuth>
              ) : (
                <Button type="ghost" disabled={formErrorNum > 0} onClick={() => commitSaveApi()}>
                  {i18n.t('Save')}
                </Button>
              )}
              <WithAuth pass={inodeQuery && docValidData.valid}>
                <Button type="primary" className="ml-2" onClick={onConfirmPublish}>
                  {i18n.t('publisher:Release')}
                </Button>
              </WithAuth>
            </div>
          )}
        </div>
        <Spin spinning={getApiDocDetailLoading || commitSaveApiLoading || getTreeListLoading}>
          {isEmpty(openApiDoc) ? (
            <ErrorEmptyHolder {...errorData} isLoading={getTreeListLoading} />
          ) : (
            <div className="api-design-content">
              <div className="api-design-content-list flex flex-col justify-start">
                <Input
                  placeholder={i18n.t('Search by keyword')}
                  className="mx-2 my-3 api-filter-input"
                  prefix={<ErdaIcon type="search1" size="14" className="mr-0.5 mt-0.5" />}
                  onInput={(e: React.ChangeEvent<HTMLInputElement>) => updater.filterKey(e.target.value)}
                />

                <div
                  className={`list-title py-3 border-bottom font-bold ${
                    contentKey === 'SUMMARY' ? 'list-title-active' : ''
                  }`}
                  onClick={() => onContentChange('SUMMARY')}
                >
                  {i18n.t('dop:API overview')}
                </div>
                <div className="panel-list">
                  <Collapse
                    accordion
                    bordered={false}
                    defaultActiveKey={['RESOURCE']}
                    className="api-overview-collapse"
                  >
                    <Panel header={renderPanelHead('RESOURCE')} key="RESOURCE">
                      {!isEmpty(apiResourceList) ? (
                        map(apiResourceList, (name) => renderListItem('RESOURCE', name))
                      ) : (
                        <EmptyHolder relative />
                      )}
                    </Panel>
                    <Panel header={renderPanelHead('DATATYPE')} key="DATATYPE">
                      {!isEmpty(apiDataTypeList) ? (
                        map(apiDataTypeList, (name) => renderListItem('DATATYPE', name))
                      ) : (
                        <EmptyHolder relative />
                      )}
                    </Panel>
                  </Collapse>
                </div>
              </div>
              <div className="api-design-content-detail px-4 py-3">{renderContent(contentKey)}</div>
            </div>
          )}
        </Spin>
        <ApiDocAddModal
          visible={treeModalVisible}
          onClose={() => updater.treeModalVisible(false)}
          onSubmit={onCreateDoc}
        />
        <ApiPublishModal
          visible={apiModalVisible}
          treeNodeData={curTreeNodeData as API_SETTING.ITreeNodeData}
          onSubmit={onPublishApi}
          onClose={() => updater.apiModalVisible(false)}
        />
      </div>
      <Prompt
        when={isDocChanged}
        message={(location: Location) => {
          if (location.pathname.endsWith('apiDesign')) {
            return false;
          }
          return `${i18n.t('dop:not saved yet, confirm to leave')}?`;
        }}
      />
    </div>
  );
}

Backlog = () => {
  const [backlogIssues, backlogIssuesPaging] = iterationStore.useStore((s) => [s.backlogIssues, s.backlogIssuesPaging]);
  const { pageSize, total, pageNo } = backlogIssuesPaging;
  const { getBacklogIssues, createIssue } = iterationStore.effects;
  const { clearBacklogIssues } = iterationStore.reducers;
  const { deleteIssue, updateIssue } = issueStore.effects;
  const labelList = labelStore.useStore((s) => s.list);
  const { getLabels } = labelStore.effects;
  const [loading] = useLoading(iterationStore, ['getBacklogIssues']);
  const [{ projectId }, { id: queryId, issueType: queryType, ...restQuery }] = routeInfoStore.getState((s) => [
    s.params,
    s.query,
  ]);
  const workflowStateList = issueWorkflowStore.useStore((s) => s.workflowStateList);

  const allStateIds = React.useRef<number[]>([]);

  const [{ isAdding, curIssueDetail, drawerVisible, filterState }, updater, update] = useUpdate({
    isAdding: false,
    curIssueDetail: {} as ISSUE.Issue,
    drawerVisible: false,
    filterState: { ...restQuery } as Obj,
  });

  const stateCollection: Array<{ label: string | React.ReactNode; children: Array<{ label: string; value: string }> }> =
    React.useMemo(() => {
      const stateIds: number[] = [];
      const initState: string[] = [];
      const typeArr = ['REQUIREMENT', 'TASK', 'BUG'];
      const collection =
        workflowStateList?.reduce((acc, current) => {
          const { issueType, stateName, stateID, stateBelong } = current;
          if (!typeArr.includes(issueType)) {
            return acc;
          }
          if (!['CLOSED', 'DONE'].includes(stateBelong)) {
            initState.push(`${stateID}`);
          }
          if (acc[issueType]) {
            acc[issueType].push({ label: stateName, value: `${stateID}` });
          } else {
            acc[issueType] = [{ label: stateName, value: `${stateID}` }];
          }
          if (!allStateIds.current.length) {
            stateIds.push(stateID);
          }
          return acc;
        }, {}) || {};
      if (!allStateIds.current.length) {
        allStateIds.current = stateIds;
      }

      updater.filterState((prev: Obj) => ({ state: initState, ...prev }));
      const options = sortBy(
        map(collection, (stateArray, issueType) => {
          const label = ISSUE_TYPE_ICON_MAP[issueType];
          return {
            label: (
              <span className="flex-h-center">
                {label.icon}
                {label.name}
              </span>
            ),
            labelValue: label.value,
            children: stateArray,
          };
        }),
        (item) => indexOf(typeArr, item.labelValue),
      );
      return options;
    }, [workflowStateList]);

  React.useEffect(() => {
    getList();
  }, [stateCollection]);

  useEffectOnce(() => {
    if (!labelList.length) {
      getLabels({ type: 'issue' });
    }
    if (queryId && queryType) {
      update({
        curIssueDetail: { id: queryId, type: queryType } as ISSUE.Issue,
        drawerVisible: true,
      });
    }
    return () => {
      clearBacklogIssues();
    };
  });

  const addAuth = usePerm((s) => s.project.requirement.create.pass); // 目前迭代、任务、缺陷添加权限都一致

  const onIssueDrop = (val: ISSUE.IssueType) => {
    return updateIssue({ ...val, iterationID: -1 }).then(() => {
      getList({ pageNo: 1 });
    });
  };

  const [{ isOver }, drop] = useDrop({
    accept: BACKLOG_ISSUE_TYPE.iterationIssue,
    drop: (item: any) => ({ res: onIssueDrop(item.data) }), // drop需要返回一个Obj，如果直接返回Promise是无效的
    collect: (monitor) => ({
      isOver: monitor.isOver(),
    }),
  });

  React.useEffect(() => {
    updateSearch(filterState);
  }, [filterState]);

  const getList = React.useCallback(
    (filters: Obj = {}, goTop = true) => {
      goTop && (listRef.current.scrollTop = 0);
      const submitValues = { ...filterState, ...filters };
      const { finishedAtStartEnd, createdAtStartEnd, state } = submitValues;
      if (finishedAtStartEnd) {
        unset(submitValues, 'finishedAtStartEnd');
        submitValues.startFinishedAt = finishedAtStartEnd[0];
        submitValues.endFinishedAt = finishedAtStartEnd[1];
      }
      if (createdAtStartEnd) {
        unset(submitValues, 'createdAtStartEnd');
        submitValues.startCreatedAt = createdAtStartEnd[0];
        submitValues.endCreatedAt = createdAtStartEnd[1];
      }
      return getBacklogIssues({ ...submitValues, state: (state as number[])?.length ? state : allStateIds.current });
    },
    [filterState, getBacklogIssues],
  );

  const onDelete = (val: ISSUE.Issue) => {
    deleteIssue(val.id).then(() => {
      getList({ pageNo: 1 });
    });
  };

  const onAdd = () => updater.isAdding(true);

  const onClickIssue = (val: ISSUE.Issue) => {
    update({
      drawerVisible: true,
      curIssueDetail: val,
    });
  };

  const closeDrawer = ({ hasEdited, isCreate, isDelete }: CloseDrawerParam) => {
    update({
      drawerVisible: false,
      curIssueDetail: {} as ISSUE.Issue,
    });
    if (hasEdited || isCreate || isDelete) {
      getList();
    }
  };
  const conditionsFilter = React.useMemo(
    () => [
      {
        type: 'select',
        key: 'type',
        label: i18n.t('Type'),
        placeholder: i18n.t('filter by {name}', { name: i18n.t('Type') }),
        fixed: false,
        emptyText: i18n.t('dop:All'),
        showIndex: 1,
        options: [ISSUE_TYPE_MAP.REQUIREMENT, ISSUE_TYPE_MAP.TASK, ISSUE_TYPE_MAP.BUG],
      },
      {
        key: 'priority',
        label: i18n.t('dop:Priority'),
        emptyText: i18n.t('dop:All'),
        fixed: false,
        showIndex: 2,
        type: 'select' as const,
        placeholder: i18n.t('filter by {name}', { name: i18n.t('dop:Priority') }),
        options: map(ISSUE_PRIORITY_MAP),
      },
      {
        key: 'state',
        label: i18n.t('dop:Status'),
        type: 'select' as const,
        options: stateCollection,
        allowClear: false,
        fixed: false,
        showIndex: 3,
      },
      {
        key: 'label',
        label: i18n.t('label'),
        emptyText: i18n.t('dop:All'),
        fixed: false,
        haveFilter: true,
        type: 'select' as const,
        placeholder: i18n.t('filter by {name}', { name: i18n.t('label') }),
        options: map(labelList, (item) => ({ label: item.name, value: `${item.id}` })),
      },
      {
        key: 'assignee',
        label: i18n.t('dop:assignee'),
        fixed: false,
        type: 'memberSelector',
        customProps: {
          mode: 'multiple',
        },
      },
      {
        key: 'creator',
        label: i18n.t('Creator'),
        fixed: false,
        type: 'memberSelector',
        customProps: {
          mode: 'multiple',
        },
      },
      {
        key: 'finishedAtStartEnd',
        label: i18n.t('End date'),
        fixed: false,
        type: 'dateRange',
      },
      {
        key: 'createdAtStartEnd',
        label: i18n.t('dop:creation date'),
        fixed: false,
        type: 'dateRange',
      },
      {
        key: 'title',
        emptyText: i18n.t('dop:All'),
        fixed: true,
        placeholder: i18n.t('dop:please enter the title or ID'),
        type: 'input' as const,
      },
    ],
    [labelList, stateCollection],
  );

  const onFilter = (val: Obj) => {
    updater.filterState(val);
    getList({ ...val, pageNo: 1 });
  };

  const curType = isEmpty(filterState.type) ? map(ISSUE_OPTION) : filterState.type;

  const handleChangePage = (curPage: number, curSize?: number) => {
    getList({
      pageNo: curPage,
      pageSize: curSize,
    });
  };

  const listRef = React.useRef<{ scrollTop: number }>(null);
  const isHide = !!listRef.current && listRef.current.scrollTop;

  const tabs = [
    {
      key: 'export',
      text: i18n.t('Export'),
    },
    {
      key: 'record',
      text: i18n.t('Records'),
    },
  ];
  return (
    <div className="backlog-issues flex flex-col justify-center h-full" ref={drop}>
      <div className="backlog-issues-title flex justify-between items-center mb-2">
        <div className="flex items-center">
          <span className="font-bold text-base mr-2">{i18n.t('dop:Backlog')}</span>
          <Tooltip
            placement="right"
            title={i18n.t('dop:For issues that have not been scheduled for a specific iteration')}
          >
            <ErdaIcon type="help" className="cursor-pointer mr-2" />
          </Tooltip>
          <span className="text-desc">{i18n.t('{num} issues', { num: total })}</span>
        </div>
        <div>
          <ImportExport
            tabs={tabs}
            title={i18n.t('Export')}
            extraQuery={{ iterationID: -1 }}
            queryObj={{ ...filterState, projectID: +projectId }}
            issueType={curType}
            projectId={projectId}
          />

          <WithAuth pass={addAuth}>
            <Button className="ml-2" type="primary" onClick={onAdd}>
              <CustomIcon type="cir-add" className="mr-1" />
              {i18n.t('Add')}
            </Button>
          </WithAuth>
        </div>
      </div>
      <div className={'backlog-filter'}>
        <ContractiveFilter delay={1000} conditions={conditionsFilter} initValue={filterState} onChange={onFilter} />
      </div>
      <div className={`backlog-issues-content spin-full-height ${isOver ? 'drag-over' : ''}`} ref={drop}>
        <Spin spinning={!isHide && loading}>
          {isEmpty(backlogIssues) && !isAdding && <EmptyBacklog addAuth={addAuth} onAdd={onAdd} />}
          <div className="list-container">
            {
              <div className="backlog-issues-list p-2 bg-default-02" ref={listRef}>
                {isAdding ? (
                  <IssueForm
                    key="add"
                    className="backlog-issue-item hover-active-bg"
                    onCancel={() => updater.isAdding(false)}
                    onOk={(val: ISSUE.BacklogIssueCreateBody) => {
                      return createIssue({ ...val }).finally(() => {
                        updater.isAdding(true);
                        getList();
                      });
                    }}
                  />
                ) : null}
                {map(backlogIssues, (item) => (
                  <IssueItem
                    data={item}
                    key={item.id}
                    onDelete={onDelete}
                    issueType={BACKLOG_ISSUE_TYPE.undoneIssue}
                    onDragDelete={() => {
                      getList({ pageNo: 1 });
                    }}
                    onClickIssue={onClickIssue}
                  />
                ))}
              </div>
            }
            <Pagination
              className="flex items-center flex-wrap justify-end pt-2"
              showSizeChanger
              total={total}
              current={pageNo}
              pageSize={pageSize}
              onChange={handleChangePage}
            />
          </div>
        </Spin>
      </div>

      {drawerVisible ? (
        <EditIssueDrawer
          iterationID={-1}
          id={curIssueDetail.id}
          shareLink={`${location.href.split('?')[0]}?${mergeSearch(
            { id: curIssueDetail.id, type: curIssueDetail.type },
            true,
          )}`}
          issueType={curIssueDetail.type}
          visible={drawerVisible}
          closeDrawer={closeDrawer}
        />
      ) : null}
    </div>
  );
}