import "../../../../../../node_modules/.pnpm/vue@3.3.4/node_modules/vue/dist/vue.runtime.esm-bundler.mjs";
import { MenuEnum, MouseEventButton } from "../../../../../enums/editPageEnum.mjs";
import { useDesignStore } from "../../../../../store/modules/designStore/designStore.mjs";
import { useChartEditStore } from "../../../../../store/modules/chartEditStore/chartEditStore.mjs";
import { useContextMenu, divider } from "../../../hooks/useContextMenu.hook.mjs";
import { LayerModeEnum } from "../../../../../store/modules/chartLayoutStore/chartLayoutStore.d.mjs";
import LayersListItem from "../LayersListItem/index.vue.mjs";
import LayersStatus from "../LayersStatus/index.vue.mjs";
import "../../../../../../node_modules/.pnpm/vue3-lazyload@0.2.5-beta_a6dezdz3je235ci4e3tu4rayna/node_modules/vue3-lazyload/dist/vue3-lazyload.esm.mjs";
import "../../../../../../node_modules/.pnpm/screenfull@6.0.2/node_modules/screenfull/index.mjs";
import "../../../../../../node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/_root.mjs";
import "../../../../../../node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/_baseGetTag.mjs";
import "../../../../../../node_modules/.pnpm/html2canvas@1.4.1/node_modules/html2canvas/dist/html2canvas.esm.mjs";
import "../../../../../../node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/_baseClone.mjs";
import "../../../../../../node_modules/.pnpm/crypto-js@4.1.1/node_modules/crypto-js/index.mjs";
import "../../../../../enums/pageEnum.mjs";
import "../../../../../router/index.mjs";
import "../../../../../settings/designSetting.mjs";
import "../../../../../components/GoLoading/index.mjs";
import "../../../../../components/GoSkeleton/index.vue.mjs";
import { icon } from "../../../../../plugins/icon.mjs";
import { defineComponent, computed, resolveComponent, openBlock, createElementBlock, createElementVNode as createBaseVNode, createVNode, withCtx, createBlock, createTextVNode, Fragment, renderList } from "../../../../../../node_modules/.pnpm/@vue_runtime-core@3.3.4/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.mjs";
import { useCssVars } from "../../../../../../node_modules/.pnpm/@vue_runtime-dom@3.3.4/node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.mjs";
import { ref, unref } from "../../../../../../node_modules/.pnpm/@vue_reactivity@3.3.4/node_modules/@vue/reactivity/dist/reactivity.esm-bundler.mjs";
import { toDisplayString, normalizeClass } from "../../../../../../node_modules/.pnpm/@vue_shared@3.3.4/node_modules/@vue/shared/dist/shared.esm-bundler.mjs";
const _hoisted_1 = { class: "go-content-layers-group-list-item" };
const _hoisted_2 = { class: "go-flex-items-center item-content" };
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "index",
  props: {
    componentGroupData: {
      type: Object,
      required: true
    },
    layerMode: {
      type: String,
      default: LayerModeEnum.THUMBNAIL
    }
  },
  setup(__props) {
    const props = __props;
    useCssVars((_ctx) => ({
      "e947bda8": themeColor.value
    }));
    [MenuEnum.UN_GROUP];
    const designStore = useDesignStore();
    const { FolderIcon, FolderOpenIcon } = icon.ionicons5;
    const chartEditStore = useChartEditStore();
    const { handleContextMenu, onClickOutSide } = useContextMenu();
    const expend = ref(false);
    const themeColor = computed(() => {
      return designStore.getAppTheme;
    });
    const selectText = computed(() => {
      return props.layerMode === LayerModeEnum.TEXT;
    });
    const select = computed(() => {
      const id = props.componentGroupData.id;
      return chartEditStore.getTargetChart.selectId.find((e) => e === id);
    });
    const hover = computed(() => {
      return props.componentGroupData.id === chartEditStore.getTargetChart.hoverId;
    });
    const status = computed(() => {
      return props.componentGroupData.status;
    });
    const optionsHandle = (targetList, allList, targetInstance) => {
      const filter = (menulist) => {
        return allList.filter((i) => menulist.includes(i.key));
      };
      if (chartEditStore.getTargetChart.selectId.length > 1) {
        return filter([MenuEnum.GROUP]);
      } else {
        const statusMenuEnums = [];
        if (targetInstance.status.lock) {
          statusMenuEnums.push(MenuEnum.LOCK);
        } else {
          statusMenuEnums.push(MenuEnum.UNLOCK);
        }
        if (targetInstance.status.hide) {
          statusMenuEnums.push(MenuEnum.HIDE);
        } else {
          statusMenuEnums.push(MenuEnum.SHOW);
        }
        return [
          ...filter([MenuEnum.UN_GROUP]),
          divider(),
          ...targetList.filter((i) => !statusMenuEnums.includes(i.key))
        ];
      }
    };
    const clickHandle = (e) => {
      var _a;
      if ((_a = window.$KeyboardActive) == null ? void 0 : _a.ctrl)
        return;
      expend.value = !expend.value;
      mousedownHandle(e, props.componentGroupData);
    };
    const groupMousedownHandle = (e) => {
      var _a;
      onClickOutSide();
      const id = props.componentGroupData.id;
      if (e.buttons === MouseEventButton.LEFT && ((_a = window.$KeyboardActive) == null ? void 0 : _a.ctrl)) {
        if (chartEditStore.targetChart.selectId.includes(id)) {
          const exList = chartEditStore.targetChart.selectId.filter((e2) => e2 !== id);
          chartEditStore.setTargetSelectChart(exList);
        } else {
          chartEditStore.setTargetSelectChart(id, true);
        }
        return;
      }
      chartEditStore.setTargetSelectChart(id);
    };
    const mousedownHandle = (e, componentInstance, id) => {
      e.preventDefault();
      e.stopPropagation();
      onClickOutSide();
      chartEditStore.setTargetSelectChart(id || componentInstance.id);
    };
    const mouseenterHandle = (componentInstance) => {
      chartEditStore.setTargetHoverChart(componentInstance.id);
    };
    const mouseleaveHandle = (componentInstance) => {
      chartEditStore.setTargetHoverChart(void 0);
    };
    return (_ctx, _cache) => {
      const _component_n_icon = resolveComponent("n-icon");
      const _component_n_text = resolveComponent("n-text");
      const _component_n_ellipsis = resolveComponent("n-ellipsis");
      const _component_n_collapse_transition = resolveComponent("n-collapse-transition");
      return openBlock(), createElementBlock("div", _hoisted_1, [
        createBaseVNode("div", {
          class: normalizeClass(["root-item-content", { hover: hover.value, select: select.value, "list-mini": selectText.value }]),
          onClick: _cache[0] || (_cache[0] = ($event) => clickHandle($event)),
          onMousedown: _cache[1] || (_cache[1] = ($event) => groupMousedownHandle($event)),
          onMouseenter: _cache[2] || (_cache[2] = ($event) => mouseenterHandle(__props.componentGroupData)),
          onMouseleave: _cache[3] || (_cache[3] = ($event) => mouseleaveHandle(__props.componentGroupData)),
          onContextmenu: _cache[4] || (_cache[4] = ($event) => unref(handleContextMenu)($event, __props.componentGroupData, optionsHandle))
        }, [
          createBaseVNode("div", _hoisted_2, [
            createVNode(_component_n_icon, {
              size: "20",
              class: "go-ml-1"
            }, {
              default: withCtx(() => [
                expend.value ? (openBlock(), createBlock(unref(FolderOpenIcon), { key: 0 })) : (openBlock(), createBlock(unref(FolderIcon), { key: 1 }))
              ]),
              _: 1
            }),
            createVNode(_component_n_ellipsis, { style: { "margin-right": "auto" } }, {
              default: withCtx(() => [
                createVNode(_component_n_text, {
                  class: "go-ml-2 list-text",
                  depth: 2
                }, {
                  default: withCtx(() => [
                    createTextVNode(toDisplayString(__props.componentGroupData.chartConfig.title), 1)
                  ]),
                  _: 1
                })
              ]),
              _: 1
            }),
            createVNode(unref(LayersStatus), {
              isGroup: false,
              hover: hover.value,
              status: status.value
            }, null, 8, ["hover", "status"])
          ]),
          createBaseVNode("div", {
            class: normalizeClass({ "select-modal": select.value })
          }, null, 2)
        ], 34),
        createVNode(_component_n_collapse_transition, { show: expend.value }, {
          default: withCtx(() => [
            (openBlock(true), createElementBlock(Fragment, null, renderList(__props.componentGroupData.groupList, (element) => {
              return openBlock(), createBlock(unref(LayersListItem), {
                key: element.id,
                componentData: element,
                "layer-mode": __props.layerMode,
                isGroup: true,
                onMousedown: ($event) => mousedownHandle($event, element, __props.componentGroupData.id),
                onMouseenter: ($event) => mouseenterHandle(element),
                onMouseleave: ($event) => mouseleaveHandle(element),
                onContextmenu: _cache[5] || (_cache[5] = ($event) => unref(handleContextMenu)($event, __props.componentGroupData, optionsHandle))
              }, null, 8, ["componentData", "layer-mode", "onMousedown", "onMouseenter", "onMouseleave"]);
            }), 128))
          ]),
          _: 1
        }, 8, ["show"])
      ]);
    };
  }
});
export {
  _sfc_main as default
};
