system-copyright-react/src/route/TrademarkMall/components/EditTwo/EditTwo.tsx

import { useEffect, useState } from 'react'
import {
  Button, Select,
  //  Collapse, Tree 
  Input,
  message,
  Spin
} from 'antd'
import {
  SyncOutlined,
} from '@ant-design/icons';
import { trademarkTypeList, uptrademarkList } from '../../../../request/api'
const { Search } = Input;
import {
  CloseOutlined,
  DeleteOutlined
} from '@ant-design/icons';
// import {
//   DownOutlined,
// } from '@ant-design/icons';
import TreeMenu from './components/TreeMenu/TreeMenu'
// import type { TreeDataNode } from 'antd';
import './edit-tow.css'
export default function EditTwo(props: any) {
  // const [messageApi, contextHolder] = message.useMessage();
  const [messageApi, contextHolder] = message.useMessage();
  const height = window.innerHeight - 350;
  const [loading, setLoading] = useState(false)
  const handleSubmit = async () => {
    // console.log('selectedCategories', selectedCategories);
    console.log('checkedIds', checkedIds);
    console.log('props', props.editTwoArray);


    // console.log('两个数组内容是否相同:', isEqual);
    // return;
    if (checkedIds.length === 0) {
      message.error('请选择分类');
      // props.setEditProcess(3);

      return;
    } else {
      // props.setEditProcess(3);
      // 使用 Set 数据结构比较
      const getElementCount = (arr: string[]) => {
        const countMap = new Map<string, number>();
        arr.forEach((element) => {
          countMap.set(element, (countMap.get(element) || 0) + 1);
        });
        return countMap;
      };

      const checkedIdsCount = getElementCount(checkedIds);
      const editTwoArrayCount = getElementCount(props.editTwoArray);

      const isEqual =
        checkedIdsCount.size === editTwoArrayCount.size &&
        Array.from(checkedIdsCount.entries()).every(([key, value]) =>
          editTwoArrayCount.get(key) === value
        );
      if (isEqual) {
        props.setEditProcess(3);
        return;
      }
      try {
        setLoading(true)
        await uptrademarkList(props.trademarkId, {
          typeIds: checkedIds
        })
        props.setEditTwoArray(checkedIds)
        setLoading(false)
        props.setEditProcess(3);

      } catch (error: any) {
        setLoading(false)
        if (error.response) {
          const data = error.response.data;
          messageApi.open({
            type: 'error',
            content: data.msg ? data.msg : `${data.path}(${data.status})`,
          });
        } else {
          console.error(error)
        }
      } finally {
        setLoading(false)
      }

    }
    // props.setEditProcess(3);


  };
  // 初始化展开状态，默认所有大类的小类都隐藏
  const [expandedIds, setExpandedIds] = useState<any[]>([]);
  // 初始化勾选状态，默认所有小类都未勾选
  const [checkedIds, setCheckedIds] = useState<any[]>([]);

  const formatNumber = (num: number) => {
    return Number.isInteger(num) ? num : num.toFixed(2);
  };
  const [selectedCategories, setSelectedCategories] = useState<{
    id: any;
    name: string;
    code: string;
    children: {
      id: any;
      name: string;
      code: string;
      children: { id: any; name: string; code: string }[];
    }[];
  }[]>([]);
  // // 模拟商标分类数据
  // const trademarkCategories = [

  //   {
  //     id: 1,
  //     name: '大类1',
  //     children: [
  //       {
  //         id: 11,
  //         name: '中类1-1',
  //         children: [
  //           { id: 111, name: '小类1-1-1' },
  //           { id: 112, name: '小类1-1-2' },
  //           { id: 113, name: '小类1-1-3' },
  //           { id: 114, name: '小类1-1-4' },
  //           { id: 115, name: '小类1-1-5' },
  //           { id: 116, name: '小类1-1-6' },
  //           { id: 117, name: '小类1-1-7' },
  //           { id: 118, name: '小类1-1-8' },
  //           { id: 119, name: '小类1-1-9' },
  //           { id: 120, name: '小类1-1-10' },
  //           { id: 1211, name: '小类1-1-11' },
  //           { id: 1222, name: '小类1-1-12' },
  //           { id: 1233, name: '小类1-1-13' },
  //           { id: 1244, name: '小类1-1-14' },
  //           { id: 1255565, name: '计算机嘻嘻嘻嘻哈哈哈哈' },
  //         ]
  //       },
  //       {
  //         id: 12,
  //         name: '中类1-2',
  //         children: [
  //           { id: 121, name: '小类1-2-1' },
  //           { id: 122, name: '小类1-2-2' },
  //           { id: 123, name: '小类1-2-3' },
  //           { id: 124, name: '小类1-2-4' },
  //           { id: 125, name: '小类1-2-5' },
  //           { id: 126, name: '小类1-2-6' },
  //           { id: 127, name: '小类1-2-7' },
  //         ]
  //       }

  //     ]
  //   },
  //   {
  //     id: 2,
  //     name: '大类2',
  //     children: [
  //       {
  //         id: 21,
  //         name: '中类2-1',
  //         children: [
  //           { id: 211, name: '小类2-1-1' },
  //           { id: 212, name: '小类2-1-2' },
  //         ]
  //       },
  //       {
  //         id: 22,
  //         name: '中类2-2',
  //         children: [
  //           { id: 221, name: '小类2-2-1' },
  //           { id: 222, name: '小类2-2-2' },
  //         ]
  //       },
  //       {
  //         id: 23,
  //         name: '中类2-3',
  //         children: [
  //           { id: 231, name: '小类2-3-1' },
  //           { id: 232, name: '小类2-3-2' },
  //         ]

  //       }
  //     ]
  //   },
  //   {
  //     id: 3,
  //     name: '大类3',
  //     children: [
  //       {
  //         id: 31,
  //         name: '中类3-1',
  //         children: [
  //           { id: 311, name: '小类3-1-1' },
  //           { id: 312, name: '小类3-1-2' },
  //         ]
  //       },
  //       {
  //         id: 32,
  //         name: '中类3-2',
  //         children: [
  //           { id: 321, name: '小类3-2-1' },
  //           { id: 322, name: '小类3-2-2' },
  //         ]
  //       }
  //     ]
  //   }




  // ];
  const [trademarkCategories, setTrademarkCategories] = useState<any[]>([]);
  // const [filteredCategories, setFilteredCategories] = useState(trademarkCategories);
  const [filteredCategories, setFilteredCategories] = useState<any[]>([]);



  const handleExpandClick = (id: any) => {
    setExpandedIds(prevIds => {
      if (prevIds.includes(id)) {
        return prevIds.filter(prevId => prevId !== id);
      } else {
        return [...prevIds, id];
      }
    });
  };

  // 处理小类点击事件，切换勾选状态
  const handleSmallMenuClick = (id: any) => {
    let targetCategory: any;
    let targetMiddleCategory: any;
    // 找到小类所属的大类和中类
    outerLoop: for (const category of trademarkCategories) {
      for (const middleCategory of category.children) {
        // 检查 middleCategory.children 是否存在
        if (middleCategory.children && middleCategory.children.some((child: any) => child.id === id)) {
          targetCategory = category;
          targetMiddleCategory = middleCategory;
          break outerLoop;
        }
      }
    }

    if (!targetCategory || !targetMiddleCategory) return;

    const isChecked = checkedIds.includes(id);

    setCheckedIds(prevIds => {
      if (isChecked) {
        return prevIds.filter(prevId => prevId !== id);
      } else {
        return [...prevIds, id];
      }
    });

    setSelectedCategories(prevSelectedCategories => {
      const categoryIndex = prevSelectedCategories.findIndex(
        category => category.id === targetCategory.id
      );

      if (isChecked) {
        // 取消勾选
        if (categoryIndex > -1) {
          const middleCategoryIndex = prevSelectedCategories[categoryIndex].children.findIndex(
            middleCategory => middleCategory.id === targetMiddleCategory.id
          );
          if (middleCategoryIndex > -1) {
            const updatedChildren = prevSelectedCategories[categoryIndex].children[middleCategoryIndex].children.filter(
              child => child.id !== id
            );

            if (updatedChildren.length === 0) {
              // 若该中类下没有选中的小类，移除该中类
              const updatedMiddleCategories = prevSelectedCategories[categoryIndex].children.filter(
                (_, index) => index !== middleCategoryIndex
              );
              if (updatedMiddleCategories.length === 0) {
                // 若该大类下没有选中的中类，移除该大类
                return prevSelectedCategories.filter(
                  (_, index) => index !== categoryIndex
                );
              } else {
                return prevSelectedCategories.map((category, index) =>
                  index === categoryIndex
                    ? { ...category, children: updatedMiddleCategories }
                    : category
                );
              }
            } else {
              return prevSelectedCategories.map((category, catIndex) =>
                catIndex === categoryIndex
                  ? {
                    ...category,
                    children: category.children.map((middleCategory, midIndex) =>
                      midIndex === middleCategoryIndex
                        ? { ...middleCategory, children: updatedChildren }
                        : middleCategory
                    )
                  }
                  : category
              );
            }
          }
        }
      } else {
        // 勾选
        const newChild = targetMiddleCategory.children.find((child: any) => child.id === id);
        if (categoryIndex > -1) {
          const middleCategoryIndex = prevSelectedCategories[categoryIndex].children.findIndex(
            middleCategory => middleCategory.id === targetMiddleCategory.id
          );
          if (middleCategoryIndex > -1) {
            // 若该中类已存在，添加小类到 children 中
            return prevSelectedCategories.map((category, catIndex) =>
              catIndex === categoryIndex
                ? {
                  ...category,
                  children: category.children.map((middleCategory, midIndex) =>
                    midIndex === middleCategoryIndex
                      ? {
                        ...middleCategory,
                        children: [...middleCategory.children, {
                          id: newChild.id,
                          name: newChild.name,
                          code: newChild.code // 添加 code 字段
                        }]
                      }
                      : middleCategory
                  )
                }
                : category
            );
          } else {
            // 若该中类不存在，新增一个中类项
            return prevSelectedCategories.map((category, catIndex) =>
              catIndex === categoryIndex
                ? {
                  ...category,
                  children: [
                    ...category.children,
                    {
                      id: targetMiddleCategory.id,
                      name: targetMiddleCategory.name,
                      code: targetMiddleCategory.code, // 添加 code 字段
                      children: [{
                        id: newChild.id,
                        name: newChild.name,
                        code: newChild.code // 添加 code 字段
                      }]
                    }
                  ]
                }
                : category
            );
          }
        } else {
          // 若该大类不存在，新增一个大类项
          return [
            ...prevSelectedCategories,
            {
              id: targetCategory.id,
              name: targetCategory.name,
              code: targetCategory.code, // 添加 code 字段
              children: [
                {
                  id: targetMiddleCategory.id,
                  name: targetMiddleCategory.name,
                  code: targetMiddleCategory.code, // 添加 code 字段
                  children: [{
                    id: newChild.id,
                    name: newChild.name,
                    code: newChild.code // 添加 code 字段
                  }]
                }
              ]
            }
          ];
        }
      }
      return prevSelectedCategories;
    });
  };
  // 处理删除小类的点击事件
  const handleDeleteSmallCategory = (categoryId: any, middleCategoryId: any, smallCategoryId: any) => {
    setSelectedCategories(prevSelectedCategories => {
      return prevSelectedCategories.map(category => {
        if (category.id === categoryId) {
          return {
            ...category,
            children: category.children.map(middleCategory => {
              if (middleCategory.id === middleCategoryId) {
                return {
                  ...middleCategory,
                  children: middleCategory.children.filter(child => child.id !== smallCategoryId)
                };
              }
              return middleCategory;
            }).filter(middleCategory => middleCategory.children.length > 0)
          };
        }
        return category;
      }).filter(category => category.children.length > 0);
    });

    // 更新 checkedIds 状态
    setCheckedIds(prevCheckedIds => prevCheckedIds.filter(id => id !== smallCategoryId));
  };
  // 处理删除大类的点击事件
  const handleDeleteCategory = (categoryId: any) => {
    // 找到要删除的大类下所有小类的 id
    const targetCategory = selectedCategories.find(category => category.id === categoryId);
    const smallCategoryIdsToRemove = targetCategory?.children.flatMap(middleCategory =>
      middleCategory.children.map(child => child.id)
    ) || [];

    // 更新 selectedCategories 状态，移除对应的大类
    setSelectedCategories(prevSelectedCategories =>
      prevSelectedCategories.filter(category => category.id !== categoryId)
    );

    // 更新 checkedIds 状态，移除该大类下所有小类的 id
    setCheckedIds(prevCheckedIds =>
      prevCheckedIds.filter(id => !smallCategoryIdsToRemove.includes(id))
    );
  };

  // useEffect(() => {
  //   console.log('selectedCategories', selectedCategories);

  // }, [selectedCategories])
  const [keyWords, setKeyWords] = useState<string>('');
  const [searchKeyWords, setSearchKeyWords] = useState<string>('');
  const onSearch = (value: string) => {
    console.log('search:', value);
    setSearchKeyWords(value);
  }

  const filterCategories = (categories: any[], keyword: string, expanded: any[]) => {
    return categories.filter(category => {
      const isMatch = category.name.includes(keyword);
      let childMatch = false;
      if (category.children) {
        const filteredChildren = filterCategories(category.children, keyword, expanded);
        if (filteredChildren.length > 0) {
          childMatch = true;
          category.children = filteredChildren;
          // 若子级有匹配，记录当前分类 ID 为需要展开
          expanded.push(category.id);
        }
      }
      if (isMatch || childMatch) {
        // 若当前项匹配或子级有匹配，记录当前分类 ID 为需要展开
        if (!expanded.includes(category.id)) {
          expanded.push(category.id);
        }
        return true;
      }
      return false;
    });
  };


  // 监听关键字变化，更新筛选后的分类数据和展开状态

  useEffect(() => {
    const expanded: any[] = [];
    if (searchKeyWords) {
      const filtered = filterCategories([...trademarkCategories], searchKeyWords, expanded);
      setFilteredCategories(filtered);
      setExpandedIds([...new Set(expanded)]); // 去重后更新展开状态
    } else {
      setFilteredCategories(trademarkCategories);
      // 初始化需要展开的 ID 数组
      const initialExpandedIds: any[] = [];

      // 遍历所有大类
      trademarkCategories.forEach((category: any) => {
        // 遍历每个大类下的中类
        category.children.forEach((middleCategory: any) => {
          // 检查当前中类下是否有选中的小类
          const hasSelectedChild = middleCategory.children.some((child: any) =>
            checkedIds.includes(child.id)
          );

          if (hasSelectedChild) {
            // 若有选中的小类，添加大类和中类的 ID 到需要展开的数组
            initialExpandedIds.push(category.id, middleCategory.id);
          }
        });
      });


      // 设置展开状态
      setExpandedIds([...new Set(initialExpandedIds)]);
    }
  }, [searchKeyWords]);
  const getTrademarkTypeList = async () => {
    try {
      const res: any = await trademarkTypeList()
      // console.log('类型数组', res);
      setTrademarkCategories(res)
      setFilteredCategories(res)
    } catch (error: any) {
      if (error.response) {
        const data = error.response.data;
        messageApi.open({
          type: 'error',
          content: data.msg ? data.msg : `${data.path}(${data.status})`,
        });
      } else {
        console.error(error)
      }
    }
  }
  // const initialCheckedIds = [111, 112, 113, 121, 122];
  // const initialCheckedIds = ['42d2b6d5-adbf-485f-944e-4ca8c50c0b16'];
  useEffect(() => {
    // console.log('嘎嘎嘎', props.editTwoArray);

    getTrademarkTypeList()
    // setCheckedIds(initialCheckedIds);
    // setCheckedIds(initialCheckedIds);
  }, [])

  // 封装获取展开 ID 的逻辑
  const getExpandedIds = (checkedIds: any[], trademarkCategories: any[]) => {
    const expandedIds: any[] = [];
    trademarkCategories.forEach((category) => {
      category.children.forEach((middleCategory: any) => {
        middleCategory.children.forEach((child: any) => {
          if (checkedIds.includes(child.id)) {
            if (!expandedIds.includes(category.id)) {
              expandedIds.push(category.id);
            }
            if (!expandedIds.includes(middleCategory.id)) {
              expandedIds.push(middleCategory.id);
            }
          }
        });
      });
    });
    return [...new Set(expandedIds)];
  };

  // 封装获取选中分类的逻辑
  const getSelectedCategories = (checkedIds: any[], trademarkCategories: any[]) => {
    const selectedCategories: {
      id: any;
      name: string;
      code: string;
      children: {
        id: any;
        name: string;
        code: string;
        children: { id: any; name: string; code: string }[];
      }[];
    }[] = [];

    trademarkCategories.forEach((category) => {
      category.children.forEach((middleCategory: any) => {
        const selectedChildren = middleCategory.children.filter((child: any) =>
          checkedIds.includes(child.id)
        );
        if (selectedChildren.length === 0) return;

        const categoryIndex = selectedCategories.findIndex((cat) => cat.id === category.id);
        if (categoryIndex > -1) {
          const middleCategoryIndex = selectedCategories[categoryIndex].children.findIndex(
            (midCat) => midCat.id === middleCategory.id
          );
          if (middleCategoryIndex > -1) {
            selectedCategories[categoryIndex].children[middleCategoryIndex].children = [
              ...selectedCategories[categoryIndex].children[middleCategoryIndex].children,
              ...selectedChildren
            ];
          } else {
            selectedCategories[categoryIndex].children.push({
              id: middleCategory.id,
              name: middleCategory.name,
              code: middleCategory.code,
              children: selectedChildren
            });
          }
        } else {
          selectedCategories.push({
            id: category.id,
            name: category.name,
            code: category.code,
            children: [
              {
                id: middleCategory.id,
                name: middleCategory.name,
                code: middleCategory.code,
                children: selectedChildren
              }
            ]
          });
        }
      });
    });
    return selectedCategories;
  };
  // 有id数组时候使用 后续 使用已保存得时候可能回用到
  useEffect(() => {
    if (props.editTwoArray.length > 0) {
      getTrademarkTypeList().then(() => {

        setCheckedIds(props.editTwoArray);
        const expandedIds = getExpandedIds(props.editTwoArray, trademarkCategories);
        setExpandedIds(expandedIds);
        const selectedCategories = getSelectedCategories(props.editTwoArray, trademarkCategories);
        setSelectedCategories(selectedCategories);

      });
    }
  }, [props.editTwoArray])
  useEffect(() => {
    if (trademarkCategories.length > 0) {
      // 初始化需要展开的 ID 数组
      const initialExpandedIds: any[] = [];

      // 遍历所有大类
      trademarkCategories.forEach((category: any) => {
        // 遍历每个大类下的中类
        category.children.forEach((middleCategory: any) => {
          // 检查当前中类下是否有选中的小类
          const hasSelectedChild = middleCategory.children.some((child: any) =>
            checkedIds.includes(child.id)
          );

          if (hasSelectedChild) {
            // 若有选中的小类，添加大类和中类的 ID 到需要展开的数组
            initialExpandedIds.push(category.id, middleCategory.id);
          }
        });
      });

      // 设置默认展开状态
      setExpandedIds([...new Set(initialExpandedIds)]);

      // 初始化一个空数组来存储选中的分类信息
      const initialSelectedCategories: {
        id: any;
        name: string;
        code: string;
        children: {
          id: any;
          name: string;
          code: string;
          children: { id: any; name: string; code: string }[];
        }[];
      }[] = [];

      // 遍历所有大类
      trademarkCategories.forEach((category: any) => {
        // 遍历每个大类下的中类
        category.children.forEach((middleCategory: any) => {
          // 筛选出当前中类下被选中的小类
          const selectedChildren = middleCategory.children.filter((child: any) =>
            checkedIds.includes(child.id)
          );

          if (selectedChildren.length > 0) {
            // 查找大类是否已存在于 initialSelectedCategories 中
            const categoryIndex = initialSelectedCategories.findIndex(
              (cat) => cat.id === category.id
            );

            if (categoryIndex > -1) {
              // 若大类已存在，查找中类是否已存在
              const middleCategoryIndex = initialSelectedCategories[categoryIndex].children.findIndex(
                (midCat) => midCat.id === middleCategory.id
              );

              if (middleCategoryIndex > -1) {
                // 若中类已存在，添加选中的小类
                initialSelectedCategories[categoryIndex].children[middleCategoryIndex].children = [
                  ...initialSelectedCategories[categoryIndex].children[middleCategoryIndex].children,
                  ...selectedChildren
                ];
              } else {
                // 若中类不存在，添加新的中类和选中的小类
                initialSelectedCategories[categoryIndex].children.push({
                  id: middleCategory.id,
                  name: middleCategory.name,
                  code: middleCategory.code,
                  children: selectedChildren
                });
              }
            } else {
              // 若大类不存在，添加新的大类、中类和选中的小类
              initialSelectedCategories.push({
                id: category.id,
                name: category.name,
                code: category.code,
                children: [
                  {
                    id: middleCategory.id,
                    name: middleCategory.name,
                    code: middleCategory.code,
                    children: selectedChildren
                  }
                ]
              });
            }
          }
        });
      });

      // 设置 selectedCategories 状态
      setSelectedCategories(initialSelectedCategories);
    }
  }, [trademarkCategories]);
  return (
    <Spin tip="正在提交，请稍后..." size="small" spinning={loading}>
      <div className='editTwoBox'>
        {contextHolder}
        <div className='topLine'></div>
        <div className='' style={{
          height: height,
          // background: 'red'
        }}>
          <div style={{
            height: '15%',
            width: '100%',
            // background: 'pink',
            padding: '10px',
            boxSizing: 'border-box',
            display: 'flex',
            flexDirection: 'column',
            justifyContent: 'space-between',
          }}>
            <div className='editTwoTitle'>选择推荐方案</div>
            <div style={{
              display: 'flex',
              alignItems: 'center',
            }}>
              <Select
                allowClear
                style={{ width: '183px', fontSize: '16px' }}
                onChange={(value: string) => {
                  console.log(`selected ${value}`);
                  // alert(`selected ${value}`)
                  // lyp



                }}
                options={[
                  // { value: '', label: '全部类型' },
                  { value: '1', label: '领域1' },
                  { value: '2', label: '领域2' },
                  { value: '3', label: '领域3' },
                  { value: '4', label: '领域4' },
                  { value: '5', label: '领域5' }
                ]}
                placeholder="请选择领域"
              // defaultValue=""
              />
              <Button type="primary" style={{
                marginLeft: '10px',
              }}>
                确认添加
              </Button>
              <div style={{
                color: '#5a5a5a',
                marginLeft: '10px'
              }}>
                {/* 常用商标类别: */}
              </div>

            </div>

          </div>
          <div style={{
            height: '85%',
            width: '100%',
            // background: 'skyblue',
            display: 'flex',
          }}>
            <div className='editTwoBotL' >
              <div className='editTwoBTopSearch'>
                <Search placeholder="请输入关键字" onSearch={onSearch} value={keyWords} onChange={(e) => {
                  setKeyWords(e.target.value)
                  if (e.target.value == '') {
                    setSearchKeyWords('');
                    // setFilteredCategories(trademarkCategories);
                    // setExpandedIds([]); // 清空展开状态
                    // console.log(trademarkCategories);
                    // setFilteredCategories(trademarkCategories); 
                    getTrademarkTypeList()
                    setExpandedIds(checkedIds)
                    // initialExpandedIds
                    console.log(checkedIds);

                  }
                }} style={{ width: '85%' }} />
                <Button style={{
                  width: '13%'
                }} onClick={() => {
                  setKeyWords('');
                  setSearchKeyWords('');
                  // setFilteredCategories(trademarkCategories);
                  getTrademarkTypeList()
                  setExpandedIds(checkedIds)

                  // setExpandedIds(checkedIds)
                  // setExpandedIds([]); // 清空展开状态
                }} icon={<SyncOutlined />}></Button>
              </div>
              <div className='editTwoBTopTitle'>类目索引</div>
              <div className='editTwoBTopText editTwoBTopTextL'>

                <TreeMenu
                  trademarkCategories={filteredCategories}
                  expandedIds={expandedIds}

                  checkedIds={checkedIds}

                  handleExpandClick={handleExpandClick}
                  handleSmallMenuClick={handleSmallMenuClick}

                ></TreeMenu>
              </div>
            </div>
            <div className='editTwoBotR'>
              <div className='editTwoBTopTitle' style={{
                display: 'flex',
              }}>
                <div style={{
                  textWrap: 'nowrap',
                }}>已选得商标类别 ：</div>
                <div style={{
                  width: '100%',
                  display: selectedCategories.length > 0 ? 'unset' : 'none'
                }}>
                  <div style={{
                    // background: 'skyblue',
                    width: '100%',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'space-between',
                    paddingRight: 10,
                    boxSizing: 'border-box',
                  }}>
                    <div>
                      {(() => {
                        let middleCategoryCount = 0;
                        let smallCategoryCount = 0;

                        // 遍历 selectedCategories 计算中类和小类的数量
                        selectedCategories.forEach(category => {
                          middleCategoryCount += category.children.length;
                          category.children.forEach(middleCategory => {
                            smallCategoryCount += middleCategory.children.length;
                          });
                        });

                        return `共${selectedCategories.length}大类 累计${middleCategoryCount}个小类/${smallCategoryCount}项商品服务`;
                      })()}
                    </div>
                    <div style={{
                      fontSize: 14,
                    }}>
                      <a style={{
                        cursor: 'pointer',
                      }}
                        onClick={() => {
                          setSelectedCategories([]);
                          setCheckedIds([]);
                          setExpandedIds([]);
                        }}
                      >清空</a>
                      <a style={{
                        marginLeft: 10,
                        cursor: 'pointer',
                      }}
                        onClick={() => {
                          console.log('selectedCategories', selectedCategories);

                        }}
                      >保存为常用</a>
                    </div>

                  </div>
                </div>
                <span style={{
                  display: selectedCategories.length == 0 ? 'unset' : 'none'
                }}>
                  无
                </span>

              </div>

              <div className='editTwoBTopText editTwoBTopTextR'>

                {/* {Array.from({ length: 100 }).map((item, index) => (
                <div key={index} className='editTwoBTopTextItem'>
                  11111
                </div>
              ))} */}
                <div className='editTwoGoodsBox' style={{
                  border: selectedCategories.length > 0 ? '1px solid #e9e9e9' : 'none',
                }}>
                  {selectedCategories.map((item: any) => {
                    const totalCount = item.children.reduce((acc: any, child: any) => acc + child.children.length, 0);
                    return (
                      <div key={item.id} style={{
                        // marginBottom: 20
                      }}>
                        <div
                          className='editTwoGoodsBoxItem'
                        >
                          <div style={{
                            display: 'flex',
                          }}>

                            <div>
                              {item.name}
                            </div>
                            <div>(共{totalCount}项 , 10项以上每项附加收费31.8元)</div>
                          </div>
                          <div style={{
                            paddingRight: 10,
                            boxSizing: 'border-box',
                            color: 'red'
                          }}>
                            ￥{formatNumber(31.8 * totalCount <= 318 ? 318 : 31.8 * totalCount)}

                            <span onClick={() => {
                              // 调用删除中类的函数
                              handleDeleteCategory(item.id);
                            }}
                              style={{
                                marginLeft: 10,
                                cursor: 'pointer',
                                color: 'rgb(116, 116, 116)'
                              }}><DeleteOutlined /></span>
                          </div>
                        </div>
                        <div className='editTwoGoodsBoxChildItem'>
                          {item.children.map((child: any) => {
                            return (
                              <div style={{

                              }} key={child.id}>
                                <div style={{
                                  display: 'flex',
                                  // flexWrap: 'wrap',
                                  textWrap: 'nowrap',
                                }}>
                                  <div style={{
                                    marginRight: 10,
                                  }}>{child.name} : </div>
                                  <div style={{
                                    display: 'flex',
                                    flexWrap: 'wrap',
                                  }}>
                                    {child.children.map((children: any) => {
                                      return (
                                        <div
                                          style={{
                                            padding: '2px 10px',
                                            // background: '#E6E6E6',
                                            border: '1px solid #E6E6E6',
                                            borderRadius: '5px',
                                            marginRight: 10,
                                            marginBottom: 10,
                                          }}
                                          key={children.id}>
                                          {children.code}-{children.name}  <span
                                            onClick={() => {
                                              handleDeleteSmallCategory(item.id, child.id, children.id);
                                            }}
                                            style={{
                                              marginLeft: 10,
                                              cursor: 'pointer',
                                            }}><CloseOutlined /></span>
                                        </div>
                                      )
                                    })}
                                  </div>
                                </div>
                              </div>
                            )
                          })}</div>
                      </div>

                    )
                  })}
                </div>
                <div style={{
                  display: selectedCategories.length <= 0 ? 'unset' : 'none'
                }}>
                  <div className='editTwoGoodsBox' style={{
                    // background: 'pink',
                    width: '100%',
                    height: '100%',

                  }}>
                    <div style={{
                      width: '100%',
                      height: '100%',
                      display: 'flex',
                      justifyContent: 'center',
                      alignItems: 'center',
                    }}>
                      <div>
                        <div style={{
                          fontSize: 16,
                          color: 'rgb(135, 135, 135)'
                        }}>点击左侧类目列表选择商标类别群组或使用推荐方案</div>
                        <div style={{
                          color: 'red'
                        }}>特别提醒:若申请主体执照经营范围含有“商标代理”、“专利代理”、“知识产权服务“等</div>
                        <div style={{
                          color: 'red'
                        }}>只可注册<span style={{
                          color: '#1677ff'
                        }}> 4506 </span> 下的商品服务项目，否则将被商标局不予受理或驳回，请知悉。</div>
                      </div>
                    </div>

                  </div>
                </div>
              </div>
            </div>

          </div>



        </div>
        <div className='topLine'></div>
        <div style={{
          marginTop: '8px',
          display: 'flex',
          justifyContent: 'flex-end',
        }}>
          <Button
            style={{
              width: '100px',
              height: '40px',
              borderRadius: '5px',
            }}
            onClick={() => {
              props.setEditProcess(1)
            }}
          >上一步</Button>
          <Button
            type='primary'
            style={{
              width: '100px',
              height: '40px',
              borderRadius: '5px',
              marginLeft: '10px',
            }}
            onClick={() => {
              handleSubmit()

            }}
          >下一步</Button>
        </div>
      </div>
    </Spin>
  )
}