import { inject, computed, ref, onMounted, resolveComponent, openBlock, createElementBlock, createVNode, withCtx, Fragment, renderList, createElementVNode, normalizeClass, toDisplayString, unref, createTextVNode, createCommentVNode, createBlock } from "vue";
import { Close } from "@element-plus/icons-vue";
import { b as _export_sfc, D as DrawingManager, X } from "./index-e8d5fc75.mjs";
import "ol";
import "proj4";
import "@supermapgis/iclient-ol";
import "element-plus";
const icons = {
  pointMarker: "/icons/point.png",
  editMarker: "/icons/edit.png",
  deleteMarker: "/icons/delete.png",
  qqMarker: "/icons/qq.png",
  typhoonMarker: "/icons/typhoon.png",
  roadMarker: "/icons/road.png"
};
const _hoisted_1$2 = { class: "mark-tab-container" };
const _hoisted_2$2 = { class: "continuous-switch" };
const _hoisted_3$2 = { class: "tools-grid" };
const _hoisted_4$2 = ["onClick"];
const _hoisted_5$2 = ["src"];
const _hoisted_6$2 = { class: "tool-label" };
const _hoisted_7$2 = {
  key: 0,
  class: "stop-drawing-section"
};
const _sfc_main$2 = {
  __name: "MarkTab",
  setup(__props) {
    const mapRef = inject("map");
    const map = computed(() => mapRef == null ? void 0 : mapRef.value);
    const drawingManager = ref(null);
    const drawTypes = [
      { label: "点", value: "point" },
      { label: "线", value: "line" },
      { label: "面", value: "polygon" },
      { label: "多几何", value: "multi" },
      { label: "复合标绘", value: "composite" },
      { label: "编辑工具", value: "edit" }
    ];
    const toolMap = {
      point: [
        { icon: icons.pointMarker, label: "单点", type: "simple-point" },
        { icon: icons.pointMarker, label: "图标点", type: "icon-point" },
        { icon: icons.editMarker, label: "自定义点", type: "custom-point" },
        { icon: icons.deleteMarker, label: "删除点", type: "delete-point" },
        { icon: icons.qqMarker, label: "QQ图标点", type: "qq-point" },
        { icon: icons.typhoonMarker, label: "台风GIF点", type: "typhoon-point" },
        { icon: "i-carbon-radio-button", label: "扩散点", type: "diffusion-point" },
        { icon: "i-carbon-text-small-caps", label: "文字", type: "simple-text" },
        {
          icon: "i-carbon-annotation-visibility",
          label: "气泡",
          type: "bubble-text"
        },
        { icon: "i-carbon-text-font", label: "样式文字", type: "styled-text" }
      ],
      line: [
        { icon: "i-carbon-chart-line", label: "折线", type: "polyline" },
        { icon: "i-carbon-close-outline", label: "闭合线", type: "closed-line" },
        { icon: "i-carbon-chart-curve", label: "曲线", type: "curve-line" },
        { icon: "i-carbon-arrow-right", label: "箭头线", type: "arrow-line" },
        { icon: icons.roadMarker, label: "图片线", type: "image-line" }
      ],
      polygon: [
        { icon: "i-carbon-checkbox-checked", label: "矩形", type: "rectangle" },
        { icon: "i-carbon-circle-dash", label: "圆形", type: "circle" },
        { icon: "i-carbon-cube", label: "多边形", type: "polygon" },
        { icon: "i-carbon-star", label: "星形", type: "star" }
      ],
      composite: [
        {
          icon: "i-carbon-location-current",
          label: "点位文字",
          type: "point-with-text"
        },
        { icon: "i-carbon-text-link", label: "线带文字", type: "line-with-text" },
        {
          icon: "i-carbon-chart-area",
          label: "面带文字",
          type: "polygon-with-text"
        },
        { icon: "i-carbon-map", label: "标注点", type: "marker-with-label" }
      ],
      multi: [
        { icon: "i-carbon-location", label: "多点", type: "multi-point" },
        { icon: "i-carbon-chart-multiline", label: "多线", type: "multi-line" },
        { icon: "i-carbon-layers", label: "多面", type: "multi-polygon" }
      ],
      edit: [
        { icon: "i-carbon-cursor-1", label: "选择", type: "select" },
        { icon: "i-carbon-edit", label: "编辑", type: "modify" },
        { icon: "i-carbon-trash-can", label: "删除", type: "delete" },
        { icon: "i-carbon-copy", label: "复制", type: "duplicate" },
        { icon: "i-carbon-close", label: "取消", type: "cancel" }
      ]
    };
    const selectedType = ref("multi");
    const activeDrawingTool = ref(null);
    const continuousDrawing = ref(false);
    const currentTools = computed(() => toolMap[selectedType.value] || []);
    onMounted(() => {
      if (map.value) {
        drawingManager.value = new DrawingManager({
          map: map.value,
          enableSnap: true,
          enableModify: true,
          enableSelect: true,
          allowContinuousDrawing: false,
          // 不允许连续标绘
          defaultStyle: {
            fill: {
              color: "rgba(255, 255, 255, 0.2)"
            },
            stroke: {
              color: "#ffcc33",
              width: 2
            },
            image: {
              radius: 7,
              fill: {
                color: "#ffcc33"
              }
            }
          }
        });
        drawingManager.value.on("drawing-end", (drawing) => {
          const feature = drawing.getFeature();
          const geometry = feature ? feature.getGeometry() : null;
          if (geometry) {
            drawing.getCoordinates();
            console.log(`成功添加${getToolLabelByType(activeDrawingTool.value)}`);
            drawingManager.value.setMode("select");
          }
        });
      } else {
        console.error("地图实例未找到");
      }
    });
    const getToolLabelByType = (type) => {
      for (const category in toolMap) {
        const tool = toolMap[category].find((t) => t.type === type);
        if (tool)
          return tool.label;
      }
      return "标绘";
    };
    const handleToolClick = (tool) => {
      if (!map.value || !drawingManager.value) {
        console.error("地图实例未找到");
        return;
      }
      const currentMode = drawingManager.value.getMode();
      if (currentMode !== "none" && currentMode !== "select" && currentMode !== "modify") {
        drawingManager.value.setMode("none");
        console.log(
          `已停止当前${getToolLabelByType(activeDrawingTool.value)}标绘，开始${tool.label}标绘`
        );
      }
      activeDrawingTool.value = tool.type;
      switch (tool.type) {
        case "simple-point":
          drawingManager.value.setMode("point", {
            image: {
              radius: 5,
              fill: {
                color: "#ff4444"
              },
              stroke: {
                color: "#fffccc",
                width: 2
              }
            },
            allowContinuousDrawing: continuousDrawing.value
          });
          console.log(`开始绘制${tool.label}，请在地图上点击添加点位`);
          break;
        case "icon-point":
          drawingManager.value.setMode("point", {
            image: {
              src: icons.pointMarker,
              scale: 1.2,
              anchor: [0.5, 1],
              anchorXUnits: "fraction",
              anchorYUnits: "fraction"
            },
            allowContinuousDrawing: continuousDrawing.value
          });
          console.log(`开始绘制${tool.label}，请在地图上点击添加图标点`);
          break;
        case "custom-point":
          drawingManager.value.setMode("point", {
            image: {
              src: icons.editMarker,
              scale: 1,
              anchor: [0.5, 0.5],
              anchorXUnits: "fraction",
              anchorYUnits: "fraction"
            },
            allowContinuousDrawing: continuousDrawing.value
          });
          console.log(`开始绘制${tool.label}，请在地图上点击添加自定义点`);
          break;
        case "diffusion-point":
          drawingManager.value.setMode("point", {
            pointStyle: "diffusion",
            diffusionConfig: {
              ringCount: 3,
              maxRadius: 50,
              duration: 2e3,
              color: "rgba(64, 158, 255, 0.6)",
              centerColor: "#409eff",
              centerSize: 8,
              delay: 500
            },
            allowContinuousDrawing: continuousDrawing.value
          });
          console.log(`开始绘制${tool.label}，请在地图上点击添加扩散点`);
          break;
        case "gif-point":
          drawingManager.value.setMode("point", {
            pointStyle: "gif",
            gifConfig: {
              url: "",
              scale: 1,
              opacity: 0.8,
              anchor: [0.5, 0.5]
            },
            allowContinuousDrawing: continuousDrawing.value
          });
          console.log(`开始绘制${tool.label}，请在地图上点击添加GIF动画点`);
          break;
        case "simple-text":
          drawingManager.value.setMode("text", {
            text: {
              font: "14px Arial",
              fill: {
                color: "#333333"
              },
              stroke: {
                color: "#ffffff",
                width: 2
              },
              offsetY: -15
            },
            allowContinuousDrawing: continuousDrawing.value
          });
          console.log(
            `开始绘制${tool.label}，请在地图上点击添加文字标注（支持连续标绘）`
          );
          break;
        case "bubble-text":
          drawingManager.value.setMode("text", {
            text: {
              font: "16px Arial",
              fill: {
                color: "#ffffff"
              },
              backgroundFill: {
                color: "rgba(0, 123, 255, 0.8)"
              },
              backgroundStroke: {
                color: "#2c5aa0",
                width: 2
              },
              padding: [10, 16, 10, 16],
              offsetY: -5
            },
            allowContinuousDrawing: continuousDrawing.value
          });
          console.log(`开始绘制${tool.label}，请在地图上点击添加气泡文字`);
          break;
        case "styled-text":
          drawingManager.value.setMode("text", {
            text: {
              font: "bold 20px Arial",
              fill: {
                color: "#1a365d"
              },
              stroke: {
                color: "#ffffff",
                width: 3
              },
              backgroundFill: {
                color: "rgba(255, 215, 0, 0.9)"
              },
              backgroundStroke: {
                color: "#ff6b35",
                width: 3
              },
              padding: [12, 20, 12, 20],
              offsetY: -8
            },
            allowContinuousDrawing: continuousDrawing.value
          });
          console.log(`开始绘制${tool.label}，请在地图上点击添加样式文字`);
          break;
        case "straight-line":
          drawingManager.value.setMode("line", {
            stroke: {
              color: "#1890ff",
              width: 3
            },
            allowContinuousDrawing: continuousDrawing.value
          });
          console.log(`开始绘制${tool.label}，请在地图上点击绘制直线`);
          break;
        case "polyline":
          drawingManager.value.setMode("line", {
            stroke: {
              color: "#52c41a",
              width: 2,
              lineDash: [5, 5]
            },
            allowContinuousDrawing: continuousDrawing.value
          });
          console.log(`开始绘制${tool.label}，请在地图上点击绘制折线`);
          break;
        case "closed-line":
          drawingManager.value.setMode("polygon", {
            stroke: {
              color: "#ffc107",
              width: 2
            },
            fillOpacity: 0,
            allowContinuousDrawing: continuousDrawing.value
          });
          console.log(`开始绘制${tool.label}，请在地图上点击绘制闭合线`);
          break;
        case "curve-line":
          drawingManager.value.setMode("line", {
            stroke: {
              color: "#722ed1",
              width: 3,
              lineCap: "round",
              lineJoin: "round"
            },
            allowContinuousDrawing: continuousDrawing.value
          });
          console.log(`开始绘制${tool.label}，请在地图上点击绘制曲线`);
          break;
        case "arrow-line":
          drawingManager.value.setMode("line", {
            stroke: {
              color: "#ff6b35",
              width: 3,
              lineCap: "round",
              lineJoin: "round"
            },
            showArrow: true,
            arrowSize: 12,
            arrowColor: "#ff6b35",
            allowContinuousDrawing: continuousDrawing.value
          });
          console.log(`开始绘制${tool.label}，请在地图上点击绘制箭头线`);
          break;
        case "image-line":
          drawingManager.value.setMode("line", {
            imagePattern: {
              src: icons.roadMarker
            },
            allowContinuousDrawing: continuousDrawing.value
          });
          console.log(`开始绘制道路线，请在地图上点击绘制道路线`);
          break;
        case "rectangle":
          drawingManager.value.setMode("rectangle", {
            fill: {
              color: "rgba(24, 144, 255, 0.3)"
            },
            stroke: {
              color: "#1890ff",
              width: 2
            },
            allowContinuousDrawing: continuousDrawing.value
          });
          console.log(`开始绘制${tool.label}，请在地图上拖拽绘制矩形`);
          break;
        case "circle":
          drawingManager.value.setMode("circle", {
            fill: {
              color: "rgba(82, 196, 26, 0.3)"
            },
            stroke: {
              color: "#52c41a",
              width: 2
            },
            allowContinuousDrawing: continuousDrawing.value
          });
          console.log(`开始绘制${tool.label}，请在地图上拖拽绘制圆形`);
          break;
        case "polygon":
          drawingManager.value.setMode("polygon", {
            fill: {
              color: "rgba(255, 193, 7, 0.3)"
            },
            stroke: {
              color: "#ffc107",
              width: 2
            },
            allowContinuousDrawing: continuousDrawing.value
          });
          console.log(`开始绘制${tool.label}，请在地图上点击绘制多边形，双击结束`);
          break;
        case "star":
          drawingManager.value.setMode("star", {
            fill: {
              color: "rgba(255, 87, 34, 0.3)"
            },
            stroke: {
              color: "#ff5722",
              width: 2
            },
            allowContinuousDrawing: continuousDrawing.value
          });
          console.log(`开始绘制${tool.label}，请在地图上拖拽绘制星形`);
          break;
        case "delete-point":
          drawingManager.value.setMode("point", {
            image: {
              src: icons.deleteMarker,
              scale: 1,
              anchor: [0.5, 0.5],
              anchorXUnits: "fraction",
              anchorYUnits: "fraction"
            }
          });
          console.log(`开始绘制${tool.label}，请在地图上点击添加删除标记点`);
          break;
        case "qq-point":
          drawingManager.value.setMode("point", {
            image: {
              src: icons.qqMarker,
              scale: 0.8,
              anchor: [0.5, 0.5],
              anchorXUnits: "fraction",
              anchorYUnits: "fraction"
            }
          });
          console.log(`开始绘制${tool.label}，请在地图上点击添加QQ图标点`);
          break;
        case "typhoon-point":
          drawingManager.value.setMode("point", {
            pointStyle: "gif",
            gifConfig: {
              url: icons.typhoonMarker,
              scale: 0.6,
              opacity: 1,
              anchor: [0.5, 0.5]
            }
          });
          console.log(`开始绘制${tool.label}，请在地图上点击添加台风GIF点`);
          break;
        case "multi-point":
          drawingManager.value.setMode("multipoint", {
            image: {
              radius: 6,
              fill: {
                color: "#ff6b35"
              },
              stroke: {
                color: "#ffffff",
                width: 2
              }
            },
            allowContinuousDrawing: continuousDrawing.value
          });
          console.log(
            `开始绘制${tool.label}，请在地图上点击添加多个点位，双击结束`
          );
          break;
        case "multi-line":
          drawingManager.value.setMode("multilinestring", {
            stroke: {
              color: "#722ed1",
              width: 3,
              lineDash: [10, 5]
            },
            allowContinuousDrawing: continuousDrawing.value
          });
          console.log(
            `开始绘制${tool.label}，请在地图上绘制多条线段，双击结束每条线`
          );
          break;
        case "multi-polygon":
          drawingManager.value.setMode("multipolygon", {
            fill: {
              color: "rgba(114, 46, 209, 0.3)"
            },
            stroke: {
              color: "#722ed1",
              width: 2
            },
            allowContinuousDrawing: continuousDrawing.value
          });
          console.log(
            `开始绘制${tool.label}，请在地图上绘制多个多边形，双击结束每个多边形`
          );
          break;
        case "select":
          drawingManager.value.setMode("select");
          console.log("已切换到选择模式，点击图形进行选择");
          break;
        case "modify":
          drawingManager.value.setMode("modify");
          console.log("已切换到编辑模式，选择图形后可拖拽编辑");
          break;
        case "delete":
          if (drawingManager.value.deleteSelectedDrawing()) {
            console.log("已删除选中的图形");
          } else {
            console.warn("请先选择要删除的图形");
          }
          break;
        case "duplicate":
          if (drawingManager.value.duplicateSelectedDrawing()) {
            console.log("已复制选中的图形");
          } else {
            console.warn("请先选择要复制的图形");
          }
          break;
        case "cancel":
          drawingManager.value.setMode("none");
          console.log("已取消当前操作");
          activeDrawingTool.value = null;
          break;
        default:
          console.log(`${tool.label}功能正在开发中`);
          break;
      }
    };
    const stopDrawing = () => {
      if (drawingManager.value) {
        drawingManager.value.setMode("none");
        console.log(`已停止${getToolLabelByType(activeDrawingTool.value)}标绘`);
        activeDrawingTool.value = null;
      }
    };
    return (_ctx, _cache) => {
      const _component_el_option = resolveComponent("el-option");
      const _component_el_select = resolveComponent("el-select");
      const _component_el_switch = resolveComponent("el-switch");
      const _component_el_button = resolveComponent("el-button");
      return openBlock(), createElementBlock("div", _hoisted_1$2, [
        createVNode(_component_el_select, {
          modelValue: selectedType.value,
          "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => selectedType.value = $event),
          placeholder: "选择标绘类型",
          class: "type-select"
        }, {
          default: withCtx(() => [
            (openBlock(), createElementBlock(Fragment, null, renderList(drawTypes, (item) => {
              return createVNode(_component_el_option, {
                key: item.value,
                label: item.label,
                value: item.value
              }, null, 8, ["label", "value"]);
            }), 64))
          ]),
          _: 1
        }, 8, ["modelValue"]),
        createElementVNode("div", _hoisted_2$2, [
          _cache[2] || (_cache[2] = createElementVNode("span", { class: "switch-label" }, "连续标绘模式", -1)),
          createVNode(_component_el_switch, {
            modelValue: continuousDrawing.value,
            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => continuousDrawing.value = $event),
            size: "small"
          }, null, 8, ["modelValue"])
        ]),
        createElementVNode("div", _hoisted_3$2, [
          (openBlock(true), createElementBlock(Fragment, null, renderList(currentTools.value, (tool, idx) => {
            return openBlock(), createElementBlock("div", {
              key: idx,
              class: "tool-item",
              onClick: ($event) => handleToolClick(tool)
            }, [
              tool.icon.startsWith("data:image") || tool.icon.includes(".svg") ? (openBlock(), createElementBlock("img", {
                key: 0,
                src: tool.icon,
                class: "tool-image",
                alt: "tool icon"
              }, null, 8, _hoisted_5$2)) : (openBlock(), createElementBlock("i", {
                key: 1,
                class: normalizeClass([tool.icon, "tool-icon-large"])
              }, null, 2)),
              createElementVNode("span", _hoisted_6$2, toDisplayString(tool.label), 1)
            ], 8, _hoisted_4$2);
          }), 128))
        ]),
        activeDrawingTool.value && continuousDrawing.value ? (openBlock(), createElementBlock("div", _hoisted_7$2, [
          createVNode(_component_el_button, {
            type: "danger",
            size: "small",
            icon: unref(Close),
            onClick: stopDrawing
          }, {
            default: withCtx(() => [..._cache[3] || (_cache[3] = [
              createTextVNode(" 停止当前标绘 ", -1)
            ])]),
            _: 1
          }, 8, ["icon"])
        ])) : createCommentVNode("", true)
      ]);
    };
  }
};
const MarkTab = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-4489a4cf"]]);
const _hoisted_1$1 = { class: "list-tab-container" };
const _hoisted_2$1 = { class: "toolbar" };
const _hoisted_3$1 = { class: "toolbar-left" };
const _hoisted_4$1 = { class: "data-count" };
const _hoisted_5$1 = { class: "list-content" };
const _hoisted_6$1 = { class: "tree-node" };
const _hoisted_7$1 = {
  key: 1,
  class: "empty-state"
};
const _sfc_main$1 = {
  __name: "ListTab",
  setup(__props) {
    const groups = ref([
      { id: 1, label: "labelP" },
      { id: 2, label: "canvasLabel" },
      { id: 3, label: "div" }
    ]);
    const defaultProps = {
      children: "children",
      label: "label"
    };
    const addGroup = () => {
      console.log("新增分组");
    };
    const refresh = () => {
      console.log("刷新数据");
    };
    return (_ctx, _cache) => {
      const _component_el_button = resolveComponent("el-button");
      const _component_el_tree = resolveComponent("el-tree");
      return openBlock(), createElementBlock("div", _hoisted_1$1, [
        createElementVNode("div", _hoisted_2$1, [
          createElementVNode("div", _hoisted_3$1, [
            _cache[2] || (_cache[2] = createElementVNode("span", { class: "toolbar-title" }, "分组管理:", -1)),
            createVNode(_component_el_button, {
              type: "primary",
              link: "",
              onClick: addGroup
            }, {
              default: withCtx(() => [..._cache[0] || (_cache[0] = [
                createElementVNode("i", { class: "i-carbon-add toolbar-icon" }, null, -1)
              ])]),
              _: 1
            }),
            createVNode(_component_el_button, {
              type: "primary",
              link: "",
              onClick: refresh
            }, {
              default: withCtx(() => [..._cache[1] || (_cache[1] = [
                createElementVNode("i", { class: "i-carbon-renew toolbar-icon" }, null, -1)
              ])]),
              _: 1
            })
          ]),
          createElementVNode("div", _hoisted_4$1, "共" + toDisplayString(groups.value.length) + "条数据", 1)
        ]),
        createElementVNode("div", _hoisted_5$1, [
          groups.value.length ? (openBlock(), createBlock(_component_el_tree, {
            key: 0,
            data: groups.value,
            "show-checkbox": "",
            "node-key": "id",
            "default-expand-all": "",
            props: defaultProps,
            class: "tree-component"
          }, {
            default: withCtx(({ data }) => [
              createElementVNode("div", _hoisted_6$1, [
                _cache[3] || (_cache[3] = createElementVNode("i", { class: "i-carbon-folder node-icon" }, null, -1)),
                createElementVNode("span", null, toDisplayString(data.label), 1)
              ])
            ]),
            _: 1
          }, 8, ["data"])) : (openBlock(), createElementBlock("div", _hoisted_7$1, "暂无数据"))
        ])
      ]);
    };
  }
};
const ListTab = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-3269b827"]]);
const _hoisted_1 = { class: "dialog-content" };
const _hoisted_2 = { class: "toolbar" };
const _hoisted_3 = { class: "toolbar-left" };
const _hoisted_4 = ["onClick"];
const _hoisted_5 = { class: "toolbar-right" };
const _hoisted_6 = ["onClick"];
const _hoisted_7 = { class: "content-area" };
const _sfc_main = {
  __name: "index",
  setup(__props) {
    const visible = ref(true);
    const activeTab = ref("mark");
    const leftTools = [
      { icon: "i-carbon-folder-open", label: "打开文件", action: "openFile" },
      { icon: "i-carbon-layers", label: "叠加文件", action: "overlayFile" },
      { icon: "i-carbon-save", label: "保存", action: "saveFile" }
    ];
    const rightTools = [
      { icon: "i-carbon-trash-can", label: "删除", action: "delete" },
      { icon: "i-carbon-lock", label: "锁定", action: "lock" },
      { icon: "i-carbon-popup", label: "绑定Popup", action: "bindPopup" }
    ];
    const handleClose = () => {
      visible.value = false;
    };
    const handleToolClick = (tool, position, index2) => {
      console.log(
        `点击了${position}侧第${index2 + 1}个工具: ${tool.label}，执行动作: ${tool.action}`
      );
      switch (tool.action) {
        case "openFile":
          console.log("打开文件功能");
          break;
        case "overlayFile":
          console.log("叠加文件功能");
          break;
        case "saveFile":
          console.log("保存功能");
          break;
        case "delete":
          console.warn("删除功能");
          break;
        case "lock":
          console.log("锁定功能");
          break;
        case "bindPopup":
          console.log("绑定Popup功能");
          break;
      }
    };
    return (_ctx, _cache) => {
      const _component_el_tooltip = resolveComponent("el-tooltip");
      const _component_el_tab_pane = resolveComponent("el-tab-pane");
      const _component_el_tabs = resolveComponent("el-tabs");
      return openBlock(), createBlock(unref(X), {
        modelValue: visible.value,
        "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => visible.value = $event),
        title: "图上标绘",
        width: "500px",
        height: "auto",
        "show-modal": false,
        draggable: true,
        "show-fullscreen": false,
        "close-on-click-modal": false,
        "close-on-press-escape": false,
        "modal-class": "pointer-events-none",
        "custom-class": "map-drawing-dialog",
        "cache-id": "drawing-dialog",
        onClose: handleClose
      }, {
        default: withCtx(() => [
          createElementVNode("div", _hoisted_1, [
            createElementVNode("div", _hoisted_2, [
              createElementVNode("div", _hoisted_3, [
                (openBlock(), createElementBlock(Fragment, null, renderList(leftTools, (tool, idx) => {
                  return createVNode(_component_el_tooltip, {
                    key: idx,
                    content: tool.label,
                    placement: "bottom",
                    effect: "light"
                  }, {
                    default: withCtx(() => [
                      createElementVNode("i", {
                        class: normalizeClass([tool.icon, "tool-icon"]),
                        onClick: ($event) => handleToolClick(tool, "left", idx)
                      }, null, 10, _hoisted_4)
                    ]),
                    _: 2
                  }, 1032, ["content"]);
                }), 64))
              ]),
              createElementVNode("div", _hoisted_5, [
                (openBlock(), createElementBlock(Fragment, null, renderList(rightTools, (tool, idx) => {
                  return createVNode(_component_el_tooltip, {
                    key: idx,
                    content: tool.label,
                    placement: "bottom",
                    effect: "light"
                  }, {
                    default: withCtx(() => [
                      createElementVNode("i", {
                        class: normalizeClass([tool.icon, "tool-icon"]),
                        onClick: ($event) => handleToolClick(tool, "right", idx)
                      }, null, 10, _hoisted_6)
                    ]),
                    _: 2
                  }, 1032, ["content"]);
                }), 64))
              ])
            ]),
            createElementVNode("div", _hoisted_7, [
              createVNode(_component_el_tabs, {
                modelValue: activeTab.value,
                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => activeTab.value = $event),
                "tab-position": "bottom",
                class: "tabs-container"
              }, {
                default: withCtx(() => [
                  createVNode(_component_el_tab_pane, {
                    label: "标号",
                    name: "mark"
                  }, {
                    default: withCtx(() => [
                      createVNode(MarkTab)
                    ]),
                    _: 1
                  }),
                  createVNode(_component_el_tab_pane, {
                    label: "列表",
                    name: "list"
                  }, {
                    default: withCtx(() => [
                      createVNode(ListTab)
                    ]),
                    _: 1
                  })
                ]),
                _: 1
              }, 8, ["modelValue"])
            ])
          ])
        ]),
        _: 1
      }, 8, ["modelValue"]);
    };
  }
};
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-09d066d9"]]);
export {
  index as default
};
