import "../../../../node_modules/.pnpm/vue@3.3.4/node_modules/vue/dist/vue.runtime.esm-bundler.mjs";
import Draggable from "vuedraggable";
import cloneDeep from "../../../../node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/cloneDeep.mjs";
import ContentBox from "../ContentBox/index.vue.mjs";
import { useChartLayoutStore } from "../../../store/modules/chartLayoutStore/chartLayoutStore.mjs";
import { LayerModeEnum, ChartLayoutStoreEnum } from "../../../store/modules/chartLayoutStore/chartLayoutStore.d.mjs";
import { useChartEditStore } from "../../../store/modules/chartEditStore/chartEditStore.mjs";
import { useContextMenu } from "../hooks/useContextMenu.hook.mjs";
import { MenuEnum, MouseEventButton } from "../../../enums/editPageEnum.mjs";
import LayersListItem from "./components/LayersListItem/index.vue.mjs";
import LayersGroupListItem from "./components/LayersGroupListItem/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/crypto-js@4.1.1/node_modules/crypto-js/index.mjs";
import "../../../enums/pageEnum.mjs";
import "../../../router/index.mjs";
import "../../../store/modules/designStore/designStore.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, watch, resolveComponent, openBlock, createBlock, withCtx, createVNode, createTextVNode, createCommentVNode, createElementVNode as createBaseVNode } from "../../../../node_modules/.pnpm/@vue_runtime-core@3.3.4/node_modules/@vue/runtime-core/dist/runtime-core.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 { 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-layer-box" };
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "index",
  setup(__props) {
    const { LayersIcon, GridIcon, ListIcon } = icon.ionicons5;
    const { LaptopIcon } = icon.carbon;
    const chartLayoutStore = useChartLayoutStore();
    const chartEditStore = useChartEditStore();
    const { handleContextMenu, onClickOutSide } = useContextMenu();
    [
      { label: "缩略图", icon: LaptopIcon, value: LayerModeEnum.THUMBNAIL },
      { label: "文本列表", icon: ListIcon, value: LayerModeEnum.TEXT }
    ];
    const layerList = ref([]);
    const layerMode = ref(chartLayoutStore.getLayerType);
    const reverseList = computed(() => {
      const list = cloneDeep(chartEditStore.getComponentList);
      return list.reverse();
    });
    watch(
      () => reverseList.value,
      (newValue) => {
        layerList.value = newValue;
      }
    );
    const optionsHandle = (targetList, allList, targetInstance) => {
      if (chartEditStore.getTargetChart.selectId.length > 1) {
        return targetList.filter((i) => i.key === MenuEnum.GROUP);
      }
      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 targetList.filter((item) => !statusMenuEnums.includes(item.key));
    };
    const backHandle = () => {
      chartLayoutStore.setItem(ChartLayoutStoreEnum.LAYERS, false);
    };
    const onMoveCallback = (val) => {
      const { oldIndex, newIndex } = val.moved;
      if (newIndex - oldIndex > 0) {
        const moveTarget = chartEditStore.getComponentList.splice(-(oldIndex + 1), 1)[0];
        chartEditStore.getComponentList.splice(-newIndex, 0, moveTarget);
      } else {
        const moveTarget = chartEditStore.getComponentList.splice(-(oldIndex + 1), 1)[0];
        if (newIndex === 0) {
          chartEditStore.getComponentList.push(moveTarget);
        } else {
          chartEditStore.getComponentList.splice(-newIndex, 0, moveTarget);
        }
      }
    };
    const boxMousedownHandle = (e) => {
      const box = document.querySelector(".go-content-layer-box");
      if (e.target.contains(box)) {
        chartEditStore.setTargetSelectChart();
      }
    };
    const mousedownHandle = (e, item) => {
      var _a;
      onClickOutSide();
      const id = item.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 mouseenterHandle = (item) => {
      chartEditStore.setTargetHoverChart(item.id);
    };
    const mouseleaveHandle = (item) => {
      chartEditStore.setTargetHoverChart(void 0);
    };
    return (_ctx, _cache) => {
      const _component_n_icon = resolveComponent("n-icon");
      const _component_n_text = resolveComponent("n-text");
      const _component_n_space = resolveComponent("n-space");
      return openBlock(), createBlock(unref(ContentBox), {
        class: normalizeClass(["go-content-layers", { scoped: !unref(chartLayoutStore).getLayers }]),
        title: "图层",
        depth: 2,
        onBack: backHandle,
        onMousedown: _cache[1] || (_cache[1] = ($event) => boxMousedownHandle($event))
      }, {
        icon: withCtx(() => [
          createVNode(_component_n_icon, {
            size: "16",
            depth: 2,
            component: unref(LayersIcon)
          }, null, 8, ["component"])
        ]),
        default: withCtx(() => [
          reverseList.value.length === 0 ? (openBlock(), createBlock(_component_n_space, {
            key: 0,
            justify: "center"
          }, {
            default: withCtx(() => [
              createVNode(_component_n_text, { class: "not-layer-text" }, {
                default: withCtx(() => [
                  createTextVNode("暂无图层~")
                ]),
                _: 1
              })
            ]),
            _: 1
          })) : createCommentVNode("", true),
          createVNode(unref(Draggable), {
            "item-key": "id",
            modelValue: layerList.value,
            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => layerList.value = $event),
            ghostClass: "ghost",
            onChange: onMoveCallback
          }, {
            item: withCtx(({ element }) => [
              createBaseVNode("div", _hoisted_1, [
                element.isGroup ? (openBlock(), createBlock(unref(LayersGroupListItem), {
                  key: 0,
                  componentGroupData: element,
                  "layer-mode": layerMode.value
                }, null, 8, ["componentGroupData", "layer-mode"])) : (openBlock(), createBlock(unref(LayersListItem), {
                  key: 1,
                  componentData: element,
                  "layer-mode": layerMode.value,
                  onMousedown: ($event) => mousedownHandle($event, element),
                  onMouseenter: ($event) => mouseenterHandle(element),
                  onMouseleave: ($event) => mouseleaveHandle(element),
                  onContextmenu: ($event) => unref(handleContextMenu)($event, element, optionsHandle)
                }, null, 8, ["componentData", "layer-mode", "onMousedown", "onMouseenter", "onMouseleave", "onContextmenu"]))
              ])
            ]),
            _: 1
          }, 8, ["modelValue"])
        ]),
        _: 1
      }, 8, ["class"]);
    };
  }
});
export {
  _sfc_main as default
};
