import { defineComponent, h, useModel, ref, onMounted, watch, openBlock, createElementBlock, createElementVNode, renderSlot, createVNode, unref, withCtx, createTextVNode, createCommentVNode, createBlock, mergeProps, withModifiers, toDisplayString, mergeModels } from 'vue';
import { getElementLabelLine } from 'element-tree-line';
import ContextMenu from '@imengyu/vue3-context-menu';
import { ElButton, ElInput, ElScrollbar, ElTree } from 'element-plus';
import './tree-menu-edit.vue.mjs';
import './tree-menu-node.vue.mjs';
import './tree-menu-actions.vue.mjs';
import { useExpand } from './model/useExpand.mjs';
import { MeMessage } from '../../message/index.mjs';
import { MeSvgIcon } from '../../svg-icon/index.mjs';
import script$1 from './tree-menu-actions.vue2.mjs';
import script$2 from './tree-menu-node.vue2.mjs';
import script$3 from './tree-menu-edit.vue2.mjs';

"use strict";
const _hoisted_1 = { class: "me-tree-menu" };
const _hoisted_2 = { class: "left" };
const _hoisted_3 = { class: "left-header" };
const _hoisted_4 = { style: { "margin-bottom": "6px", "display": "flex", "align-items": "center", "justify-content": "space-between" } };
const _hoisted_5 = { class: "left-tree" };
const _hoisted_6 = { class: "custom-tree-node" };
const _hoisted_7 = { style: {} };
const _hoisted_8 = { class: "right" };
const __default__ = defineComponent({
  name: "me-tree-menu"
});
var script = /* @__PURE__ */ defineComponent({
  ...__default__,
  props: /* @__PURE__ */ mergeModels({
    list: { type: Array, required: true, default: () => [] },
    showCheckbox: { type: Boolean, required: false, default: false },
    treeProps: { type: null, required: false, default: void 0 },
    nodeKey: { type: null, required: false, default: void 0 },
    label: { type: String, required: false },
    form: { type: null, required: true },
    handleList: { type: Array, required: false },
    expandKeys: { type: [Array, String], required: false, default: "0" },
    editTitle: { type: String, required: false },
    uploadImageProps: { type: Object, required: false, default: () => ({
      url: "",
      uploadRequest: () => Promise.resolve(),
      imgUrlRequest: () => Promise.resolve(),
      title: "\u4E0A\u4F20\u56FE\u7247",
      maxCount: 1,
      width: 100,
      height: 100,
      closeEvent: () => {
      },
      uploadRules: [
        { name: "jpg", size: 1024 * 1024 * 5 },
        { name: "jpeg", size: 1024 * 1024 * 5 },
        { name: "png", size: 1024 * 1024 * 1 },
        { name: "gif", size: 1024 * 1024 * 1 }
      ],
      previewImg: false
    }) },
    apiMoveHandle: { type: Function, required: true },
    fetchDataHandle: { type: Function, required: true },
    openHandle: { type: Function, required: false },
    nodeMenuItemHandle: { type: Function, required: false }
  }, {
    "actions": {},
    "actionsModifiers": {}
  }),
  emits: /* @__PURE__ */ mergeModels(["nodeClick", "contextMenuAddItemEvent", "contextMenuEditItemEvent", "contextMenuRemoveItemEvent", "contextMenuCopyItemEvent", "updateEvent", "createEvent"], ["update:actions"]),
  setup(__props, { expose: __expose, emit: __emit }) {
    const ElementTreeLine = getElementLabelLine(h);
    const actions = useModel(__props, "actions");
    const props = __props;
    console.log(props.form);
    const emit = __emit;
    const treeRef = ref();
    const { toggleExpandAll, setExpandKeys, getExpandKeys } = useExpand(treeRef);
    onMounted(() => {
      if (Array.isArray(props.expandKeys)) {
        props.expandKeys.forEach((key) => {
          setExpandKeys(key);
        });
      } else {
        setExpandKeys(props.expandKeys);
      }
    });
    const indent = ref(20);
    const filterText = ref("");
    watch(filterText, (val) => {
      console.log(val);
      treeRef.value.filter(val);
    });
    const handleCreate = () => {
      titleType.value = "create";
      emit("createEvent");
    };
    const filterNode = (value, data, node) => {
      if (!value) return true;
      return node.label.toLowerCase().includes(value.toLowerCase());
    };
    const onSubmit = async () => {
      console.log("props.form", props.form);
      const res = await editRef.value.validate();
      if (!res) return;
      emit("updateEvent", props.form);
    };
    const titleType = ref("");
    const nodeMenuItem = (data) => {
      return [
        {
          label: "\u6DFB\u52A0\u5B50" + props.label,
          icon: h(MeSvgIcon, {
            name: "ri-add-circle-line"
          }),
          onClick: () => {
            titleType.value = "create-child";
            emit("contextMenuAddItemEvent", data);
          }
        },
        {
          label: "\u7F16\u8F91" + props.label,
          icon: h(MeSvgIcon, {
            name: "ri-edit-line"
          }),
          onClick: () => {
            titleType.value = "edit";
            emit("contextMenuEditItemEvent", data);
          }
        },
        {
          label: "\u590D\u5236" + props.label,
          icon: h(MeSvgIcon, {
            name: "ri-file-copy-2-line"
          }),
          onClick: () => {
            titleType.value = "copy";
            emit("contextMenuCopyItemEvent", data);
          }
        },
        {
          label: "\u5220\u9664" + props.label,
          icon: h(MeSvgIcon, {
            name: "ri-delete-bin-6-line"
          }),
          onClick: () => {
            titleType.value = "delete";
            emit("contextMenuRemoveItemEvent", data);
          }
        }
      ];
    };
    const onContextMenu = (e, data, node) => {
      e.preventDefault();
      ContextMenu.showContextMenu({
        x: e.x,
        y: e.y,
        items: props.nodeMenuItemHandle ? props.nodeMenuItemHandle(data) : nodeMenuItem(data)
      });
    };
    const handleNodeDrop = (draggingNode, dropNode, type) => {
      console.log(draggingNode, dropNode, type);
      if (!props.fetchDataHandle) return;
      const data = {
        currentKey: draggingNode.key,
        parentKey: (type === "inner" ? dropNode.key : dropNode.parent.key) || "0",
        siblingKeys: (type === "inner" ? dropNode.childNodes.map((item) => item.key) : dropNode.parent.childNodes.map((item) => item.key)) || []
      };
      MeMessage(
        {
          request: {
            api: props.apiMoveHandle,
            data: {
              id: data.currentKey,
              pid: data.parentKey,
              sortId: data.siblingKeys
            }
          },
          normal: {
            title: "\u63D0\u793A",
            message: "\u786E\u5B9A\u4FDD\u5B58\u79FB\u52A8\u5417?",
            loading: false,
            type: "danger"
          },
          process: {
            loading: true
          }
        },
        {
          confrim: (res) => {
            console.log("\u79FB\u52A8\u6210\u529F");
            props.fetchDataHandle({ expandKeys: [data.parentKey] });
            return true;
          },
          cancel: () => {
            props.fetchDataHandle({ expandKeys: [data.parentKey] });
            return true;
          }
        }
      );
    };
    const editRef = ref();
    const open = () => {
      if (props.openHandle) {
        props.openHandle();
      } else {
        editRef.value.open();
      }
    };
    const close = () => {
      editRef.value.close();
    };
    const onNodeClick = (data) => {
      titleType.value = "edit";
      open();
      emit("nodeClick", JSON.parse(JSON.stringify(data)));
    };
    const handleToggleExpandAllEvent = (item) => {
      toggleExpandAll(item);
    };
    __expose({
      open,
      close,
      setExpandKeys,
      getExpandKeys
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", _hoisted_1, [
        createElementVNode("div", _hoisted_2, [
          createElementVNode("div", _hoisted_3, [
            renderSlot(_ctx.$slots, "header")
          ]),
          createElementVNode("div", _hoisted_4, [
            createVNode(unref(ElButton), {
              type: "primary",
              onClick: handleCreate
            }, {
              default: withCtx(() => [..._cache[2] || (_cache[2] = [
                createTextVNode(
                  "\u65B0\u5EFA",
                  -1
                  /* CACHED */
                )
              ])]),
              _: 1
              /* STABLE */
            }),
            createCommentVNode(" \u64CD\u4F5C "),
            treeRef.value ? (openBlock(), createBlock(script$1, {
              key: 0,
              tree: treeRef.value,
              actions: actions.value,
              "onUpdate:actions": _cache[0] || (_cache[0] = ($event) => actions.value = $event),
              onToggleExpandAllEvent: handleToggleExpandAllEvent
            }, {
              "dropdown-item": withCtx(() => [
                renderSlot(_ctx.$slots, "dropdown-item")
              ]),
              _: 3
              /* FORWARDED */
            }, 8, ["tree", "actions"])) : createCommentVNode("v-if", true)
          ]),
          createElementVNode("div", _hoisted_5, [
            createVNode(unref(ElInput), {
              modelValue: filterText.value,
              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => filterText.value = $event),
              class: "search",
              clearable: "",
              placeholder: "\u641C\u7D22"
            }, null, 8, ["modelValue"]),
            createVNode(unref(ElScrollbar), {
              class: "treeList",
              style: { "height": "100%" }
            }, {
              default: withCtx(() => [
                createVNode(unref(ElTree), mergeProps(_ctx.$attrs, {
                  ref_key: "treeRef",
                  ref: treeRef,
                  data: __props.list,
                  draggable: true,
                  "expand-on-click-node": false,
                  "filter-node-method": filterNode,
                  "highlight-current": "",
                  indent: indent.value,
                  "node-key": __props.nodeKey,
                  props: props.treeProps,
                  "show-checkbox": __props.showCheckbox,
                  onNodeContextmenu: onContextMenu,
                  onNodeClick,
                  onNodeDrop: handleNodeDrop
                }), {
                  default: withCtx(({ node, data }) => [
                    createVNode(unref(ElementTreeLine), {
                      indent: indent.value,
                      node,
                      "show-label-line": false
                    }, {
                      default: withCtx(() => [
                        createElementVNode("div", _hoisted_6, [
                          createElementVNode("div", null, [
                            renderSlot(_ctx.$slots, "label", {
                              node,
                              data
                            }, () => [
                              createVNode(script$2, {
                                actions: actions.value,
                                node,
                                data
                              }, null, 8, ["actions", "node", "data"])
                            ])
                          ]),
                          createElementVNode("div", _hoisted_7, [
                            createVNode(unref(MeSvgIcon), {
                              class: "icon-more",
                              onClick: withModifiers(($event) => onContextMenu($event, data, node), ["stop"]),
                              name: "ri-more-fill",
                              size: 20
                            }, null, 8, ["onClick"])
                          ])
                        ])
                      ]),
                      _: 2
                      /* DYNAMIC */
                    }, 1032, ["indent", "node"])
                  ]),
                  _: 3
                  /* FORWARDED */
                }, 16, ["data", "indent", "node-key", "props", "show-checkbox"])
              ]),
              _: 3
              /* FORWARDED */
            })
          ])
        ]),
        createElementVNode("div", _hoisted_8, [
          renderSlot(_ctx.$slots, "right", {}, () => [
            createVNode(script$3, {
              list: __props.list,
              form: __props.form,
              ref_key: "editRef",
              ref: editRef,
              title: __props.editTitle,
              "title-type": titleType.value,
              label: __props.label
            }, {
              "header-submit": withCtx(() => [
                createCommentVNode(" header \u63D2\u69FD\u7684\u5185\u5BB9\u653E\u8FD9\u91CC "),
                createVNode(unref(ElButton), {
                  onClick: onSubmit,
                  type: "primary"
                }, {
                  default: withCtx(() => [
                    createTextVNode(
                      toDisplayString(titleType.value == "edit" ? "\u66F4\u65B0" : "\u4FDD\u5B58"),
                      1
                      /* TEXT */
                    )
                  ]),
                  _: 1
                  /* STABLE */
                })
              ]),
              default: withCtx(() => [
                renderSlot(_ctx.$slots, "edit")
              ]),
              _: 3
              /* FORWARDED */
            }, 8, ["list", "form", "title", "title-type", "label"])
          ])
        ])
      ]);
    };
  }
});

export { script as default };
//# sourceMappingURL=tree-menu.vue2.mjs.map
