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

import { useEffect, useState } from 'react'
import {
  Button, Select,
  //  Collapse, Tree 
} from 'antd'
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 height = window.innerHeight - 350;
  const handleSubmit = () => {
    // console.log(form);
    props.setEditProcess(3);
    // 调用表单实例的 submit 方法
    // form.submit();

  };
  // 初始化展开状态，默认所有大类的小类都隐藏
  const [expandedIds, setExpandedIds] = useState<any[]>([]);
  // 初始化勾选状态，默认所有小类都未勾选
  const [checkedIds, setCheckedIds] = useState<any[]>([]);
  // 存储选中的大类和小类信息
  // const [selectedCategories, setSelectedCategories] = useState<{
  //   id: any;
  //   name: string;
  //   children: { id: any; name: string }[];
  // }[]>([]);
  // 存储选中的大类、中类和小类信息
  // 自定义函数，有小数保留两位，没小数不保留
  const formatNumber = (num: number) => {
    return Number.isInteger(num) ? num : num.toFixed(2);
  };
  const [selectedCategories, setSelectedCategories] = useState<{
    id: any;
    name: string;
    children: {
      id: any;
      name: string;
      children: { id: any; name: 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: 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 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 }]
                      }
                      : middleCategory
                  )
                }
                : category
            );
          } else {
            // 若该中类不存在，新增一个中类项
            return prevSelectedCategories.map((category, catIndex) =>
              catIndex === categoryIndex
                ? {
                  ...category,
                  children: [
                    ...category.children,
                    {
                      id: targetMiddleCategory.id,
                      name: targetMiddleCategory.name,
                      children: [{ id: newChild.id, name: newChild.name }]
                    }
                  ]
                }
                : category
            );
          }
        } else {
          // 若该大类不存在，新增一个大类项
          return [
            ...prevSelectedCategories,
            {
              id: targetCategory.id,
              name: targetCategory.name,
              children: [
                {
                  id: targetMiddleCategory.id,
                  name: targetMiddleCategory.name,
                  children: [{ id: newChild.id, name: newChild.name }]
                }
              ]
            }
          ];
        }
      }
      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])

  useEffect(() => {
    // 模拟有值的 selectedCategories
    // const youzhi = [
    //   {
    //     id: 1,
    //     name: '大类1',
    //     children: [
    //       {
    //         id: 11,
    //         name: '中类1-1',
    //         children: [
    //           { id: 111, name: '小类1-1-1' },
    //           { id: 112, name: '小类1-1-4' },
    //           { id: 113, name: '小类1-1-3' },
    //         ]
    //       }
    //     ]
    //   }
    // ]
    // setSelectedCategories(youzhi)
    // const initialCheckedIds = youzhi.flatMap(category =>
    //   category.children.flatMap(middleCategory =>
    //     middleCategory.children.map(child => child.id)
    //   )
    // );
    // setCheckedIds(initialCheckedIds);
  }, [])


  return (
    <div className='editTwoBox'>
      <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'></div>
            <div className='editTwoBTopTitle'>类目索引</div>
            <div className='editTwoBTopText editTwoBTopTextL'>
              {/* {Array.from({ length: 100 }).map((item, index) => (
                <div key={index} className='editTwoBTopTextItem'>
                  11111
                </div>
              ))} */}
              <TreeMenu
                trademarkCategories={trademarkCategories}
                expandedIds={expandedIds}
                // setExpandedIds={setExpandedIds}
                checkedIds={checkedIds}
                // setCheckedIds={setCheckedIds}
                // selectedCategories={selectedCategories}
                // setSelectedCategories={setSelectedCategories}
                handleExpandClick={handleExpandClick}
                handleSmallMenuClick={handleSmallMenuClick}
              // trademarkCategories={trademarkCategories}
              // expandedIds={expandedIds}
              // setExpandedIds={setExpandedIds}
              // checkedIds={checkedIds}
              // setCheckedIds={setCheckedIds}
              // selectedCategories={selectedCategories}
              // setSelectedCategories={setSelectedCategories}
              ></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',
                    }}>保存为常用</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>
              ))} */}

              {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 style={{
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'space-between',
                    }}>
                      <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>

                    {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.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>



      </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>
  )
}