import { DownloadOutlined, LeftOutlined } from "@ant-design/icons";
import { Button, Input, Dropdown, MenuProps, Tooltip, InputRef, message } from "antd";
import { useEffect, useRef, useState } from "react";
import logo from "@/assets/logo.png";
import { Icon, useModel } from "umi";
import { exportImage } from "@/components/ExportImage";
import CustomColorPicker from "@/components/CustomColorPicker";
import InsertCss from "insert-css";
import {
  printHandle,
  handleCopy,
  handleCreateEdge,
  handleGroup,
  handleInsertText,
  handlePaste,
  handleUnGroup,
  alignCell,
  matchSize,
  selectAll,
  handleInsertImage,
  handleInsertCode,
  setCellZIndex,
  handleLock,
  handleUnLock,
  handleDelete,
  createNew,
} from "@/utils";
import FindReplaceModal from "@/components/FindReplaceModal";
import { useFindReplace } from "@/hooks/useFindReplace";
import { GraphType } from "@/enum";
import { EditGraph, SaveAll, Copy } from "@/api/systemDesigner";
import { UploadFile } from "@/api";
import { getClassRules, base64ToFile } from "@repo/utils";

InsertCss(`
  .custom-color-picker-popover {
  z-index: 9999;
}
  `);
export default function MenuBar() {
  const {
    toggleFormatBrush,
    toggleRightPanel,
    setRightPanelTabActiveKey,
    pageState,
    onChangePageSettings,
    setLeftPanelActiveKey,
    setShowHistory,
  } = useModel("appModel");
  const { projectInfo, setProjectInfo } = useModel("projectModel");
  const { graph, canRedo, canUndo, selectedCell, } = useModel("flowchartModel");
  const inputRef = useRef<InputRef>(null);

  // 重命名
  const handleRename = () => {
    inputRef.current?.select();
    projectInfo &&
      inputRef.current?.setSelectionRange(0, projectInfo.graph.name.length);
  };

  useEffect(() => {
    if (projectInfo?.graph?.name !== name) {
      setName(projectInfo?.graph?.name);
    }
  }, [projectInfo]);

  // 修改项目名称
  const handleChangeName = () => {
    if (!name?.trim()) {
      setName(projectInfo?.graph?.name);
      return;
    }
    if (projectInfo) {
      setProjectInfo({
        ...projectInfo,
        graph: {
          ...projectInfo.graph,
          name,
        },
      });

      const id = sessionStorage.getItem("projectId");
      if (id) {
        EditGraph({
          id,
          langNameList: [
            {
              name: "zh-CN",
              value: name
            }
          ]
        });
      }
    }
  };

  useEffect(() => {
    graph?.bindKey("ctrl+s", (e: KeyboardEvent) => {
      e.preventDefault();
      handleSave();
    });
  }, [graph]);

  const [name, setName] = useState(projectInfo?.graph?.name);

  useEffect(() => {
    setName(projectInfo?.graph?.name);
  }, [projectInfo?.graph?.name]);

  const {
    handleFind,
    handleReplace,
    handleReplaceAll,
    handleClose,
    handleFindNext,
    handleFindPrev,
    findCount,
    currentIndex,
    setInstance,
  } = useFindReplace(graph);

  useEffect(() => {
    graph && setInstance(graph);
    setSelectionStrict(!!graph?.isStrictRubberband());
  }, [graph]);

  const findModalRef = useRef<any>();

  const [selectionStrict, setSelectionStrict] = useState(true);

  // 保存
  const handleSave = () => {
    const elements = graph?.toJSON()?.cells;
    graph?.toPNG(async (dataUri) => {
      const file = base64ToFile(dataUri, projectInfo?.graph.id || '封面图', "image/png");

      const formData = new FormData();
      formData.append("file", file);
      const res = await UploadFile(formData);

      await SaveAll({
        graph: {
          ...(projectInfo?.graph || {}),
          ...pageState,
          type: GraphType.flowchart,
          coverImage: res?.result?.[0]?.id
        },
        elements: elements?.filter(item => !item.data?.isPage)
      });
      message.success("保存成功");
    }, {
      width: 300,
      height: 150,
      quality: 0.2,
      copyStyles: false,
      stylesheet: getClassRules()
    });
  };

  // 克隆
  const handleClone = async () => {
    const res = await Copy({
      fileType: "chart",
      fileId: projectInfo?.graph?.id,
      targetFolderId: projectInfo?.graph?.folderId || "root"
    });
    if(!res.result) return;
    
    const enterpriseCode = sessionStorage.getItem("enterpriseCode");
    const { pathname, origin } = window.location;
    window.open(
      `${origin}${pathname}#/flow/${res.result}?enterpriseCode=${enterpriseCode}`
    );
    message.success("克隆成功");
  };

  // 历史记录 todo
  const handleHistory = () => {
    setShowHistory(true);
  };

  // 默认样式 todo
  const handleDefaultStyle = () => {};

  // 数据属性 todo
  const handleShowDataAttr = () => {};

  // 评论 todo
  const handleShowComment = () => {};

  // 画布大小
  const handleSetCanvas = () => {
    toggleRightPanel(true);
    setRightPanelTabActiveKey("1");
  };

  // 风格设置
  const handleSetDefaultStyle = () => {
    setLeftPanelActiveKey("2");
  };

  const menuData: {
    key: string;
    label: string;
    type: "group";
    children: MenuProps["items"];
  }[] = [
    {
      key: "1",
      label: "文件",
      type: "group",
      children: [
        {
          key: "1-1",
          label: "新建",
          icon: <i className="w-20px iconfont icon-zengjiahuamian-1" />,
          children: [
            {
              key: "1-1-1",
              label: "流程图",
              icon: <Icon width="20" className="mt-5px" icon="local:flow" />,
              onClick: () => {
                createNew(GraphType.flowchart);
              },
            },
            {
              key: "1-1-2",
              label: "思维导图",
              icon: <Icon width="20" className="mt-5px" icon="local:mind" />,
              onClick: () => {
                createNew(GraphType.mindmap);
              },
            },
            {
              key: "1-1-3",
              label: "UML",
              icon: <Icon width="20" className="mt-5px" icon="local:uml" />,
              onClick: () => {
                createNew(GraphType.uml);
              },
            },
            {
              key: "1-1-4",
              label: "网络拓扑图",
              icon: <Icon width="20" className="mt-5px" icon="local:net" />,
              onClick: () => {
                createNew(GraphType.net);
              },
            },
            {
              key: "1-1-5",
              label: "组织结构图",
              icon: <Icon width="20" className="mt-5px" icon="local:flow" />,
              onClick: () => {
                createNew(GraphType.org);
              },
            },
            {
              key: "1-1-6",
              label: "BPMN",
              icon: <Icon width="20" className="mt-5px" icon="local:bpmn" />,
              onClick: () => {
                createNew(GraphType.bpmn);
              },
            },
          ],
        },
        {
          key: "1-2",
          label: "重命名",
          icon: <i className="w-20px iconfont icon-bianji-" />,
          onClick: handleRename,
        },
        // {
        //   key: "1-3",
        //   label: "预览",
        //   icon: <i className="w-20px iconfont icon-yulan" />,
        //   onClick: handlePreview,
        // },
        {
          key: "1-4",
          label: (
            <div className="flex justify-between">
              <span>保存</span>
              <span>Ctrl+S</span>
            </div>
          ),
          icon: <i className="w-20px iconfont icon-shangchuan" />,
          onClick: handleSave,
        },
        {
          key: "1-5",
          label: "克隆",
          icon: <i className="w-20px iconfont icon-niantie-1" />,
          onClick: handleClone,
        },
        {
          key: "1-6",
          type: "divider",
        },
        {
          key: "1-7",
          label: "导出为",
          icon: <i className="w-20px iconfont icon-diduanduiqi" />,
          children: [
            {
              key: "1-7-1",
              label: "JPG",
              icon: <i className="w-20px iconfont icon-file-image" />,
              onClick: () => graph && exportImage(graph, "jpg"),
            },
            {
              key: "1-7-2",
              label: "PNG",
              icon: <i className="w-20px iconfont icon-file-image" />,
              onClick: () => graph && exportImage(graph, "png"),
            },
            {
              key: "1-7-3",
              label: "SVG",
              icon: <i className="w-20px iconfont icon-file-image" />,
              onClick: () => graph && exportImage(graph, "svg"),
            },
          ],
        },
        {
          key: "1-8",
          type: "divider",
        },
        {
          key: "1-9",
          label: "历史记录",
          icon: <i className="w-20px iconfont icon-lishijilu" />,
          onClick: handleHistory,
        },
        {
          key: "1-0",
          label: (
            <div className="flex justify-between">
              <span>打印</span>
              <span>Ctrl+P</span>
            </div>
          ),
          icon: <i className="w-20px iconfont icon-dayinji_o" />,
          onClick: () => graph?.toPNG((img) => printHandle(img)),
        },
        // {
        //   key: "1-11",
        //   label: "关闭",
        // },
      ],
    },
    {
      key: "2",
      type: "group",
      label: "编辑",
      children: [
        {
          key: "2-0",
          label: (
            <div className="flex justify-between">
              <span>撤销</span>
              <span>Ctrl+Z</span>
            </div>
          ),
          icon: <i className="w-20px iconfont icon-undo" />,
          disabled: !canUndo,
          onClick: () => graph?.undo(),
        },
        {
          key: "2-1",
          label: (
            <div className="flex justify-between">
              <span>恢复</span>
              <span>Ctrl+Y</span>
            </div>
          ),
          icon: <i className="w-20px iconfont icon-redo" />,
          disabled: !canRedo,
          onClick: () => graph?.redo(),
        },
        {
          key: "2-2",
          type: "divider",
        },
        {
          key: "2-3",
          label: (
            <div className="flex justify-between">
              <span>剪切</span>
              <span>Ctrl+X</span>
            </div>
          ),
          icon: <i className="w-20px iconfont " />,
          disabled: !selectedCell.length,
          onClick: () => graph?.cut(selectedCell),
        },
        {
          key: "2-4",
          label: (
            <div className="flex justify-between">
              <span>复制</span>
              <span>Ctrl+C</span>
            </div>
          ),
          icon: <i className="w-20px iconfont " />,
          disabled: !selectedCell.length,
          onClick: () => graph && handleCopy(graph),
        },
        {
          key: "2-5",
          label: (
            <div className="flex justify-between">
              <span>粘贴</span>
              <span>Ctrl+V</span>
            </div>
          ),
          icon: <i className="w-20px iconfont " />,
          onClick: () => graph && handlePaste(graph),
        },
        {
          key: "2-6",
          label: (
            <div className="flex justify-between">
              <span>格式刷</span>
              <span>Ctrl+Shift+C</span>
            </div>
          ),
          icon: <i className="w-20px iconfont icon-geshishua" />,
          disabled: !selectedCell.length,
          onClick: () => graph && toggleFormatBrush(graph),
        },
        {
          key: "2-7",
          label: "默认样式",
          icon: <i className="w-20px iconfont " />,
          disabled: !selectedCell.length,
          onClick: handleDefaultStyle,
        },
        {
          key: "2-8",
          type: "divider",
        },
        {
          key: "2-9",
          label: (
            <div className="flex justify-between">
              <span>查找</span>
              <span>Ctrl+F</span>
            </div>
          ),
          icon: <i className="w-20px iconfont " />,
          onClick: () => {
            findModalRef.current?.open();
          },
        },
        {
          key: "2-10",
          label: (
            <div className="flex justify-between">
              <span>替换</span>
              <span>Ctrl+H</span>
            </div>
          ),
          icon: <i className="w-20px iconfont " />,
          onClick: () => {
            findModalRef.current?.open(2);
          },
        },
        {
          key: "2-11",
          type: "divider",
        },
        {
          key: "2-12",
          label: (
            <div className="flex justify-between">
              <span>删除</span>
              <span>Delete/Backspace</span>
            </div>
          ),
          disabled: !selectedCell.length,
          onClick: () => graph && handleDelete(graph),
          icon: <i className="w-20px iconfont " />,
        },
        {
          key: "2-13",
          label: (
            <div className="flex justify-between">
              <span>清空画布</span>
              <span>Delete/Backspace</span>
            </div>
          ),
          disabled: !selectedCell.length,
          onClick: () => graph && handleDelete(graph),
          icon: <i className="w-20px iconfont " />,
        },
      ],
    },
    {
      key: "3",
      type: "group",
      label: "选择",
      children: [
        {
          key: "3-1",
          label: (
            <div className="flex justify-between">
              <span>全选</span>
              <span>Ctrl+A</span>
            </div>
          ),
          icon: <i className="w-20px iconfont " />,
          onClick: () => graph && selectAll(graph),
        },
        {
          key: "3-2",
          type: "divider",
        },
        {
          key: "3-3",
          label: "框选部分选中数据",
          icon: (
            <i
              className={`w-20px iconfont ${!selectionStrict ? "icon-cheked_16x16" : ""}`}
            />
          ),
          onClick: () => {
            graph?.disableStrictRubberband();
            setSelectionStrict(false);
          },
        },
        {
          key: "3-4",
          label: "框选全部选中图形",
          icon: (
            <i
              className={`w-20px iconfont ${selectionStrict ? "icon-cheked_16x16" : ""}`}
            />
          ),
          onClick: () => {
            graph?.enableStrictRubberband();
            setSelectionStrict(true);
          },
        },
      ],
    },
    {
      key: "4",
      type: "group",
      label: "视图",
      children: [
        {
          key: "4-1",
          label: (
            <div className="flex justify-between">
              <span>放大</span>
              <span>Ctrl+(+)</span>
            </div>
          ),
          icon: <i className="w-20px iconfont icon-fangda" />,
          onClick: () => graph?.zoomTo(graph.zoom() + 0.1),
        },
        {
          key: "4-2",
          label: (
            <div className="flex justify-between">
              <span>缩小</span>
              <span>Ctrl+(+)</span>
            </div>
          ),
          icon: <i className="w-20px iconfont icon-suoxiao" />,
          onClick: () => graph?.zoomTo(graph.zoom() - 0.1),
        },
        {
          key: "4-3",
          type: "divider",
        },
        {
          key: "4-4",
          label: "50%",
          icon: <i className="w-20px iconfont " />,
          onClick: () => graph?.zoomTo(0.5),
        },
        {
          key: "4-5",
          label: "75%",
          icon: <i className="w-20px iconfont " />,
          onClick: () => graph?.zoomTo(0.75),
        },
        {
          key: "4-6",
          label: "100%",
          icon: <i className="w-20px iconfont " />,
          onClick: () => graph?.zoomTo(1),
        },
        {
          key: "4-7",
          label: "150%",
          icon: <i className="w-20px iconfont " />,
          onClick: () => graph?.zoomTo(1.5),
        },
        {
          key: "4-8",
          label: "200%",
          icon: <i className="w-20px iconfont " />,
          onClick: () => graph?.zoomTo(2),
        },
        {
          key: "4-9",
          type: "divider",
        },
        {
          key: "4-10",
          label: (
            <div className="flex justify-between">
              <span>重置视图</span>
              <span>Ctrl+0</span>
            </div>
          ),
          icon: <i className="w-20px iconfont " />,
          onClick: () => graph?.zoomToFit(),
        },
      ],
    },
    {
      key: "5",
      type: "group",
      label: "插入",
      children: [
        {
          key: "5-1",
          label: (
            <div className="flex justify-between">
              <span>文本</span>
              <span>T</span>
            </div>
          ),
          icon: <i className="w-20px iconfont icon-huabigongju-wenben" />,
          onClick: () => graph && handleInsertText(graph),
        },
        {
          key: "5-2",
          label: (
            <div className="flex justify-between">
              <span>图片</span>
              <span>I</span>
            </div>
          ),
          icon: <i className="w-20px iconfont icon-file-image" />,
          onClick: () => graph && handleInsertImage(graph),
        },
        {
          key: "5-3",
          label: "代码块",
          icon: <i className="w-20px iconfont icon-daimawenjian" />,
          onClick: () => graph && handleInsertCode(graph),
        },
        {
          key: "5-4",
          label: (
            <div className="flex justify-between">
              <span>连线</span>
              <span>L</span>
            </div>
          ),
          icon: (
            <i className="w-20px iconfont icon-a-icon16lianxianleixinghuizhizhixian" />
          ),
          onClick: () => graph && handleCreateEdge(graph),
        },
        // {
        //   key: "5-5",
        //   type: "divider",
        // },
        // {
        //   key: "5-6",
        //   label: "数据属性",
        //   icon: <i className="w-20px iconfont icon-tubiao" />,
        //   onClick: handleShowDataAttr,
        // },
        // {
        //   key: "5-7",
        //   label: (
        //     <div className="flex justify-between">
        //       <span>评论</span>
        //       <span>Alt+Ctrl+M</span>
        //     </div>
        //   ),
        //   icon: <i className="w-20px iconfont icon-pinglun"/>,
        //   onClick: handleShowComment,
        // },
      ],
    },
    {
      key: "6",
      type: "group",
      label: "画布",
      children: [
        {
          key: "6-1",
          label: "画布大小",
          icon: <i className="w-20px iconfont " />,
          onClick: handleSetCanvas,
        },
        {
          key: "6-2",
          label: (
            <CustomColorPicker
              otherPopoverAttr={{
                placement: "left",
                overlayClassName: "custom-color-picker-popover",
              }}
              color={pageState.backgroundColor}
              onChange={(color) =>
                onChangePageSettings("backgroundColor", color)
              }
            >
              背景颜色
            </CustomColorPicker>
          ),
          icon: <i className="w-20px iconfont " />,
          children: [],
        },
        {
          key: "6-3",
          label: "显示网格",
          icon: (
            <i
              className={`w-20px iconfont ${pageState.grid ? "icon-cheked_16x16" : ""}`}
            />
          ),
          onClick: () => onChangePageSettings("grid", !pageState.grid),
        },
        {
          key: "6-4",
          label: "网格大小",
          children: [
            {
              key: "6-4-1",
              label: "小",
              icon: <i className="w-20px iconfont " />,
              onClick: () => onChangePageSettings("gridSize", 10),
            },
            {
              key: "6-4-2",
              label: "正常",
              icon: <i className="w-20px iconfont " />,
              onClick: () => onChangePageSettings("gridSize", 20),
            },
            {
              key: "6-4-3",
              label: "大",
              icon: <i className="w-20px iconfont " />,
              onClick: () => onChangePageSettings("gridSize", 30),
            },
            {
              key: "6-4-4",
              label: "很大",
              icon: <i className="w-20px iconfont " />,
              onClick: () => onChangePageSettings("gridSize", 40),
            },
            {
              key: "6-4-5",
              label: "自定义",
              icon: <i className="w-20px iconfont " />,
              onClick: handleSetCanvas,
            },
          ],
        },
        {
          key: "6-5",
          type: "divider",
        },
        {
          key: "6-6",
          label: "显示跨线",
          icon: (
            <i
              className={`w-20px iconfont ${pageState.jumpOver ? "icon-cheked_16x16" : ""}`}
            />
          ),
          onClick: () => onChangePageSettings("jumpOver", !pageState.jumpOver),
        },
        {
          key: "6-7",
          label: "显示打印分割线",
          icon: (
            <i
              className={`w-20px iconfont ${pageState.printLine ? "icon-cheked_16x16" : ""}`}
            />
          ),
          onClick: () =>
            onChangePageSettings("printLine", !pageState.printLine),
        },
        {
          key: "6-8",
          label: "水印设置",
          icon: <i className="w-20px iconfont " />,
          onClick: handleSetCanvas,
        },
        {
          key: "6-9",
          label: "风格设置",
          icon: <i className="w-20px iconfont " />,
          onClick: handleSetDefaultStyle,
        },
      ],
    },
    {
      key: "7",
      type: "group",
      label: "排列",
      children: [
        {
          key: "7-1",
          label: "置于顶层",
          icon: <i className="w-20px iconfont icon-zhiding1" />,
          disabled: !selectedCell.length,
          onClick: () => setCellZIndex("top", selectedCell),
        },
        {
          key: "7-2",
          label: "置于底层",
          icon: <i className="w-20px iconfont icon-zhidi1" />,
          disabled: !selectedCell.length,
          onClick: () => setCellZIndex("bottom", selectedCell),
        },
        {
          key: "7-3",
          label: "上移一层",
          icon: <i className="w-20px iconfont icon-shangyiyiceng1" />,
          disabled: !selectedCell.length,
          onClick: () => setCellZIndex("up", selectedCell),
        },
        {
          key: "7-4",
          label: "下移一层",
          icon: <i className="w-20px iconfont icon-xiayiyiceng1" />,
          disabled: !selectedCell.length,
          onClick: () => setCellZIndex("down", selectedCell),
        },
        {
          key: "7-5",
          type: "divider",
        },
        {
          key: "7-6",
          label: "分布对齐",
          icon: <i className="w-20px iconfont " />,
          disabled: !selectedCell.length,
          children: [
            {
              key: "7-6-1",
              label: (
                <div className="flex justify-between">
                  <span>左对齐</span>
                  <span>Alt+L</span>
                </div>
              ),
              icon: <i className="w-20px iconfont icon-zuoduiqi2" />,
              disabled: !selectedCell.length,
              onClick: () => alignCell("left", selectedCell),
            },
            {
              key: "7-6-2",
              label: (
                <div className="flex justify-between">
                  <span>居中对齐</span>
                  <span>Alt+C</span>
                </div>
              ),
              icon: <i className="w-20px iconfont icon-shuipingduiqi2" />,
              disabled: !selectedCell.length,
              onClick: () => alignCell("hcenter", selectedCell),
            },
            {
              key: "7-6-3",
              label: (
                <div className="flex justify-between">
                  <span>右对齐</span>
                  <span>Alt+R</span>
                </div>
              ),
              icon: <i className="w-20px iconfont icon-youduiqi2" />,
              disabled: !selectedCell.length,
              onClick: () => alignCell("right", selectedCell),
            },
            {
              key: "7-6-4",
              type: "divider",
            },
            {
              key: "7-6-5",
              label: (
                <div className="flex justify-between">
                  <span>顶端对齐</span>
                  <span>Alt+T</span>
                </div>
              ),
              icon: <i className="w-20px iconfont icon-dingbuduiqi2" />,
              disabled: !selectedCell.length,
              onClick: () => alignCell("top", selectedCell),
            },
            {
              key: "7-6-6",
              label: (
                <div className="flex justify-between">
                  <span>垂直居中对齐</span>
                  <span>Alt+M</span>
                </div>
              ),
              icon: <i className="w-20px iconfont icon-chuizhiduiqi2" />,
              disabled: !selectedCell.length,
              onClick: () => alignCell("vcenter", selectedCell),
            },
            {
              key: "7-6-8",
              label: (
                <div className="flex justify-between">
                  <span>底端对齐</span>
                  <span>Alt+B</span>
                </div>
              ),
              icon: <i className="w-20px iconfont icon-dibuduiqi2" />,
              disabled: !selectedCell.length,
              onClick: () => alignCell("bottom", selectedCell),
            },
            {
              key: "7-6-9",
              type: "divider",
            },
            {
              key: "7-6-10",
              label: (
                <div className="flex justify-between">
                  <span>水平平均分布</span>
                  <span>Alt+H</span>
                </div>
              ),
              icon: <i className="w-20px iconfont icon-shuipingfenbu2" />,
              disabled: selectedCell.length < 3,
              onClick: () => alignCell("h", selectedCell),
            },
            {
              key: "7-6-11",
              label: (
                <div className="flex justify-between">
                  <span>垂直平均分布</span>
                  <span>Alt+V</span>
                </div>
              ),
              icon: <i className="w-20px iconfont icon-chuizhifenbu2" />,
              disabled: selectedCell.length < 3,
              onClick: () => alignCell("v", selectedCell),
            },
          ],
        },
        {
          key: "7-7",
          label: "匹配大小",
          icon: <i className="w-20px iconfont " />,
          disabled: selectedCell.length < 2,
          children: [
            {
              key: "7-7-1",
              label: "宽度",
              icon: <i className="w-20px iconfont icon-kuandu" />,
              disabled: selectedCell.length < 2,
              onClick: () => matchSize("width", selectedCell),
            },
            {
              key: "7-7-2",
              label: "高度",
              icon: <i className="w-20px iconfont icon-gaodu" />,
              disabled: selectedCell.length < 2,
              onClick: () => matchSize("height", selectedCell),
            },
            {
              key: "7-7-3",
              label: "宽高匹配",
              icon: <i className="w-20px iconfont icon-shiyingkuangao" />,
              disabled: selectedCell.length < 2,
              onClick: () => matchSize("auto", selectedCell),
            },
          ],
        },
        {
          key: "7-8",
          type: "divider",
        },
        {
          key: "7-9",
          label: (
            <div className="flex justify-between">
              <span>组合</span>
              <span>Alt+G</span>
            </div>
          ),
          icon: <i className="w-20px iconfont icon-hebing" />,
          disabled: selectedCell.length < 2,
          onClick: () => graph && handleGroup(graph, selectedCell),
        },
        {
          key: "7-10",
          label: (
            <div className="flex justify-between">
              <span>取消组合</span>
              <span>Alt+Shift+G</span>
            </div>
          ),
          icon: <i className="w-20px iconfont icon-fenjie" />,
          disabled: !selectedCell.length,
          onClick: () => graph && handleUnGroup(graph, selectedCell),
        },
        {
          key: "7-11",
          type: "divider",
        },
        {
          key: "7-12",
          label: "锁定",
          icon: <i className="w-20px iconfont " />,
          disabled: !selectedCell.length,
          onClick: () => graph && handleLock(graph),
        },
        {
          key: "7-13",
          label: "取消锁定",
          icon: <i className="w-20px iconfont " />,
          disabled: !selectedCell.length,
          onClick: () => graph && handleUnLock(graph),
        },
      ],
    },
  ];

  return (
    <>
      <div className="w-full px-8px flex justify-between items-center">
        <div className="menu-left flex items-center">
          {/* <Button type="text" icon={<LeftOutlined />}></Button> */}
          <div className="w-40px h-40px mx-8px">
            <img className="w-40px" src={logo} />
          </div>
          <div className="flex flex-col leading-32px">
            <div>
              <Input
                ref={inputRef}
                className="text-16px max-w-200px"
                variant="borderless"
                value={name}
                onChange={(e) => setName(e.target.value)}
                onBlur={handleChangeName}
                onPressEnter={handleChangeName}
              />
            </div>
            <div>
              {menuData.map((item) => {
                return (
                  <Dropdown
                    key={item.key}
                    menu={{ items: item.children, style: { width: 200 } }}
                    placement="bottomLeft"
                  >
                    <Button type="text" size="small">
                      {item.label}
                    </Button>
                  </Dropdown>
                );
              })}
            </div>
          </div>
        </div>
        <div>
          <Dropdown
            trigger={["click"]}
            menu={{
              items: [
                {
                  key: 1,
                  label: (
                    <span>
                      <i className="w-20px iconfont icon-file-image" />
                      PNG
                    </span>
                  ),
                  onClick: () => graph && exportImage(graph, "png"),
                },
                {
                  key: 2,
                  label: (
                    <span>
                      <i className="w-20px iconfont icon-file-image" />
                      JPG
                    </span>
                  ),
                  onClick: () => graph && exportImage(graph, "jpg"),
                },
                {
                  key: 3,
                  label: (
                    <span>
                      <i className="w-20px iconfont icon-file-image" />
                      SVG
                    </span>
                  ),
                  onClick: () => graph && exportImage(graph, "svg"),
                },
              ],
            }}
          >
            <Tooltip title="导出为">
              <Button type="text" icon={<DownloadOutlined />}></Button>
            </Tooltip>
          </Dropdown>
        </div>
      </div>
      <FindReplaceModal
        ref={findModalRef}
        current={currentIndex}
        count={findCount}
        onClose={handleClose}
        onFind={handleFind}
        onFindNext={handleFindNext}
        onFindPrev={handleFindPrev}
        onReplace={handleReplace}
        onReplaceAll={handleReplaceAll}
        right={30}
        top={110}
      />
    </>
  );
}
