'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var elementTreeLine = require('element-tree-line');
var ContextMenu = require('@imengyu/vue3-context-menu');
var elementPlus = require('element-plus');
require('./tree-menu-edit.vue.js');
require('./tree-menu-node.vue.js');
require('./tree-menu-actions.vue.js');
var useExpand = require('./model/useExpand.js');
var index$1 = require('../../message/index.js');
var index = require('../../svg-icon/index.js');
var treeMenuActions_vue_vue_type_script_setup_true_lang = require('./tree-menu-actions.vue2.js');
var treeMenuNode_vue_vue_type_script_setup_true_lang = require('./tree-menu-node.vue2.js');
var treeMenuEdit_vue_vue_type_script_setup_true_lang = require('./tree-menu-edit.vue2.js');

"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__ = vue.defineComponent({
  name: "me-tree-menu"
});
var script = /* @__PURE__ */ vue.defineComponent({
  ...__default__,
  props: /* @__PURE__ */ vue.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__ */ vue.mergeModels(["nodeClick", "contextMenuAddItemEvent", "contextMenuEditItemEvent", "contextMenuRemoveItemEvent", "contextMenuCopyItemEvent", "updateEvent", "createEvent"], ["update:actions"]),
  setup(__props, { expose: __expose, emit: __emit }) {
    const ElementTreeLine = elementTreeLine.getElementLabelLine(vue.h);
    const actions = vue.useModel(__props, "actions");
    const props = __props;
    console.log(props.form);
    const emit = __emit;
    const treeRef = vue.ref();
    const { toggleExpandAll, setExpandKeys, getExpandKeys } = useExpand.useExpand(treeRef);
    vue.onMounted(() => {
      if (Array.isArray(props.expandKeys)) {
        props.expandKeys.forEach((key) => {
          setExpandKeys(key);
        });
      } else {
        setExpandKeys(props.expandKeys);
      }
    });
    const indent = vue.ref(20);
    const filterText = vue.ref("");
    vue.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 = vue.ref("");
    const nodeMenuItem = (data) => {
      return [
        {
          label: "\u6DFB\u52A0\u5B50" + props.label,
          icon: vue.h(index.MeSvgIcon, {
            name: "ri-add-circle-line"
          }),
          onClick: () => {
            titleType.value = "create-child";
            emit("contextMenuAddItemEvent", data);
          }
        },
        {
          label: "\u7F16\u8F91" + props.label,
          icon: vue.h(index.MeSvgIcon, {
            name: "ri-edit-line"
          }),
          onClick: () => {
            titleType.value = "edit";
            emit("contextMenuEditItemEvent", data);
          }
        },
        {
          label: "\u590D\u5236" + props.label,
          icon: vue.h(index.MeSvgIcon, {
            name: "ri-file-copy-2-line"
          }),
          onClick: () => {
            titleType.value = "copy";
            emit("contextMenuCopyItemEvent", data);
          }
        },
        {
          label: "\u5220\u9664" + props.label,
          icon: vue.h(index.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)) || []
      };
      index$1.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 = vue.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 vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
        vue.createElementVNode("div", _hoisted_2, [
          vue.createElementVNode("div", _hoisted_3, [
            vue.renderSlot(_ctx.$slots, "header")
          ]),
          vue.createElementVNode("div", _hoisted_4, [
            vue.createVNode(vue.unref(elementPlus.ElButton), {
              type: "primary",
              onClick: handleCreate
            }, {
              default: vue.withCtx(() => [..._cache[2] || (_cache[2] = [
                vue.createTextVNode(
                  "\u65B0\u5EFA",
                  -1
                  /* CACHED */
                )
              ])]),
              _: 1
              /* STABLE */
            }),
            vue.createCommentVNode(" \u64CD\u4F5C "),
            treeRef.value ? (vue.openBlock(), vue.createBlock(treeMenuActions_vue_vue_type_script_setup_true_lang.default, {
              key: 0,
              tree: treeRef.value,
              actions: actions.value,
              "onUpdate:actions": _cache[0] || (_cache[0] = ($event) => actions.value = $event),
              onToggleExpandAllEvent: handleToggleExpandAllEvent
            }, {
              "dropdown-item": vue.withCtx(() => [
                vue.renderSlot(_ctx.$slots, "dropdown-item")
              ]),
              _: 3
              /* FORWARDED */
            }, 8, ["tree", "actions"])) : vue.createCommentVNode("v-if", true)
          ]),
          vue.createElementVNode("div", _hoisted_5, [
            vue.createVNode(vue.unref(elementPlus.ElInput), {
              modelValue: filterText.value,
              "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => filterText.value = $event),
              class: "search",
              clearable: "",
              placeholder: "\u641C\u7D22"
            }, null, 8, ["modelValue"]),
            vue.createVNode(vue.unref(elementPlus.ElScrollbar), {
              class: "treeList",
              style: { "height": "100%" }
            }, {
              default: vue.withCtx(() => [
                vue.createVNode(vue.unref(elementPlus.ElTree), vue.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: vue.withCtx(({ node, data }) => [
                    vue.createVNode(vue.unref(ElementTreeLine), {
                      indent: indent.value,
                      node,
                      "show-label-line": false
                    }, {
                      default: vue.withCtx(() => [
                        vue.createElementVNode("div", _hoisted_6, [
                          vue.createElementVNode("div", null, [
                            vue.renderSlot(_ctx.$slots, "label", {
                              node,
                              data
                            }, () => [
                              vue.createVNode(treeMenuNode_vue_vue_type_script_setup_true_lang.default, {
                                actions: actions.value,
                                node,
                                data
                              }, null, 8, ["actions", "node", "data"])
                            ])
                          ]),
                          vue.createElementVNode("div", _hoisted_7, [
                            vue.createVNode(vue.unref(index.MeSvgIcon), {
                              class: "icon-more",
                              onClick: vue.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 */
            })
          ])
        ]),
        vue.createElementVNode("div", _hoisted_8, [
          vue.renderSlot(_ctx.$slots, "right", {}, () => [
            vue.createVNode(treeMenuEdit_vue_vue_type_script_setup_true_lang.default, {
              list: __props.list,
              form: __props.form,
              ref_key: "editRef",
              ref: editRef,
              title: __props.editTitle,
              "title-type": titleType.value,
              label: __props.label
            }, {
              "header-submit": vue.withCtx(() => [
                vue.createCommentVNode(" header \u63D2\u69FD\u7684\u5185\u5BB9\u653E\u8FD9\u91CC "),
                vue.createVNode(vue.unref(elementPlus.ElButton), {
                  onClick: onSubmit,
                  type: "primary"
                }, {
                  default: vue.withCtx(() => [
                    vue.createTextVNode(
                      vue.toDisplayString(titleType.value == "edit" ? "\u66F4\u65B0" : "\u4FDD\u5B58"),
                      1
                      /* TEXT */
                    )
                  ]),
                  _: 1
                  /* STABLE */
                })
              ]),
              default: vue.withCtx(() => [
                vue.renderSlot(_ctx.$slots, "edit")
              ]),
              _: 3
              /* FORWARDED */
            }, 8, ["list", "form", "title", "title-type", "label"])
          ])
        ])
      ]);
    };
  }
});

exports.default = script;
//# sourceMappingURL=tree-menu.vue2.js.map
