import "../../../../../../node_modules/.pnpm/vue@3.3.4/node_modules/vue/dist/vue.runtime.esm-bundler.mjs";
import _sfc_main$1 from "../../../../../components/Pages/ChartGlobImage/index.vue.mjs";
import { useChartEditStore } from "../../../../../store/modules/chartEditStore/chartEditStore.mjs";
import { EditCanvasTypeEnum } from "../../../../../store/modules/chartEditStore/chartEditStore.d.mjs";
import { ChartModeEnum } from "../../../../../store/modules/chartLayoutStore/chartLayoutStore.d.mjs";
import { useChartLayoutStore } from "../../../../../store/modules/chartLayoutStore/chartLayoutStore.mjs";
import { usePackagesStore } from "../../../../../store/modules/packagesStore/packagesStore.mjs";
import { JSONStringify } from "../../../../../utils/utils.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 { loadingStart, loadingFinish, loadingError, goDialog } from "../../../../../utils/plugin.mjs";
import { componentInstall } from "../../../../../utils/components.mjs";
import { DragKeyEnum } from "../../../../../enums/editPageEnum.mjs";
import { fetchChartComponent, fetchConfigComponent, createComponent } from "../../../../../packages/index.mjs";
import { PackagesCategoryEnum } from "../../../../../packages/index.d.mjs";
import { ChatCategoryEnum } from "../../../../../packages/components/Photos/index.d.mjs";
import { Icon } from "../../../../../../node_modules/.pnpm/@iconify_vue@4.1.1_vue@3.3.4/node_modules/@iconify/vue/dist/iconify.mjs";
import "../../../../../../node_modules/.pnpm/vue3-lazyload@0.2.5-beta_a6dezdz3je235ci4e3tu4rayna/node_modules/vue3-lazyload/dist/vue3-lazyload.esm.mjs";
import "../../../../../components/GoSkeleton/index.vue.mjs";
import "../../../../../components/GoLoading/index.mjs";
import { icon } from "../../../../../plugins/icon.mjs";
import omit from "../../../../../../node_modules/.pnpm/lodash@4.17.21/node_modules/lodash/omit.mjs";
import { defineComponent, computed, watch, nextTick, resolveComponent, openBlock, createElementBlock, createElementVNode as createBaseVNode, Fragment, renderList, createBlock, createVNode, withCtx, createTextVNode, createCommentVNode, pushScopeId, popScopeId } 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 { toDisplayString, normalizeClass } from "../../../../../../node_modules/.pnpm/@vue_shared@3.3.4/node_modules/@vue/shared/dist/shared.esm-bundler.mjs";
const _withScopeId = (n) => (pushScopeId("data-v-1d77a379"), n = n(), popScopeId(), n);
const _hoisted_1 = { class: "go-content-charts-item-animation-patch" };
const _hoisted_2 = ["onDragstart", "onDragend", "onDblclick", "onClick"];
const _hoisted_3 = {
  class: "list-center go-flex-center go-transition",
  draggable: "true"
};
const _hoisted_4 = {
  class: "list-bottom",
  style: { "text-align": "center" }
};
const _hoisted_5 = {
  key: 0,
  class: "list-model"
};
const _hoisted_6 = ["onClick"];
const _hoisted_7 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createBaseVNode("span", null, "删除", -1));
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "index",
  props: {
    menuOptions: {
      type: Array,
      default: () => []
    }
  },
  emits: ["deletePhoto"],
  setup(__props, { emit }) {
    const chartEditStore = useChartEditStore();
    const { TrashIcon } = icon.ionicons5;
    const chartLayoutStore = useChartLayoutStore();
    const contentChartsItemBoxRef = ref();
    const isShowTools = (item) => {
      return !item.disabled && item.package === PackagesCategoryEnum.PHOTOS && item.category === ChatCategoryEnum.PRIVATE;
    };
    const chartMode = computed(() => {
      return chartLayoutStore.getChartType;
    });
    const dragStartHandle = (e, item) => {
      if (item.disabled)
        return;
      componentInstall(item.chartKey, fetchChartComponent(item));
      componentInstall(item.conKey, fetchConfigComponent(item));
      e.dataTransfer.setData(DragKeyEnum.DRAG_KEY, JSONStringify(omit(item, ["image"])));
      chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_CREATE, true);
    };
    const dragendHandle = () => {
      chartEditStore.setEditCanvas(EditCanvasTypeEnum.IS_CREATE, false);
    };
    const dblclickHandle = async (item) => {
      if (item.disabled)
        return;
      try {
        loadingStart();
        componentInstall(item.chartKey, fetchChartComponent(item));
        componentInstall(item.conKey, fetchConfigComponent(item));
        let newComponent = await createComponent(item);
        if (item.redirectComponent) {
          item.dataset && (newComponent.option.dataset = item.dataset);
          newComponent.chartConfig.title = item.title;
          newComponent.chartConfig.chartFrame = item.chartFrame;
        }
        chartEditStore.addComponentList(newComponent, false, true);
        chartEditStore.setTargetSelectChart(newComponent.id);
        loadingFinish();
      } catch (error) {
        loadingError();
        window["$message"].warning(`图表正在研发中, 敬请期待...`);
      }
    };
    const clickHandle = (item) => {
      var _a;
      (_a = item == null ? void 0 : item.configEvents) == null ? void 0 : _a.addHandle(item);
    };
    const deleteHandle = (item, index) => {
      goDialog({
        message: "是否删除此图片？",
        transformOrigin: "center",
        onPositiveCallback: () => {
          const packagesStore = usePackagesStore();
          emit("deletePhoto", item, index);
          packagesStore.deletePhotos(item, index);
        }
      });
    };
    watch(
      () => chartMode.value,
      (newValue) => {
        if (newValue === ChartModeEnum.DOUBLE) {
          nextTick(() => {
            contentChartsItemBoxRef.value.classList.add("miniAnimation");
          });
        }
      }
    );
    return (_ctx, _cache) => {
      const _component_n_ellipsis = resolveComponent("n-ellipsis");
      const _component_n_text = resolveComponent("n-text");
      const _component_n_icon = resolveComponent("n-icon");
      const _component_n_button = resolveComponent("n-button");
      return openBlock(), createElementBlock("div", _hoisted_1, [
        createBaseVNode("div", {
          ref_key: "contentChartsItemBoxRef",
          ref: contentChartsItemBoxRef,
          class: normalizeClass(["go-content-charts-item-box", [chartMode.value === unref(ChartModeEnum).DOUBLE ? "double" : "single"]])
        }, [
          (openBlock(true), createElementBlock(Fragment, null, renderList(__props.menuOptions, (item, index) => {
            return openBlock(), createElementBlock("div", {
              class: "item-box",
              key: item.title,
              draggable: "",
              onDragstart: ($event) => !item.disabled && dragStartHandle($event, item),
              onDragend: ($event) => !item.disabled && dragendHandle,
              onDblclick: ($event) => dblclickHandle(item),
              onClick: ($event) => clickHandle(item)
            }, [
              createBaseVNode("div", _hoisted_3, [
                item.icon ? (openBlock(), createBlock(unref(Icon), {
                  key: 0,
                  class: "list-img",
                  icon: item.icon,
                  color: "#999",
                  width: "48"
                }, null, 8, ["icon"])) : (openBlock(), createBlock(unref(_sfc_main$1), {
                  key: 1,
                  class: "list-img",
                  chartConfig: item
                }, null, 8, ["chartConfig"]))
              ]),
              createBaseVNode("div", _hoisted_4, [
                createVNode(_component_n_text, {
                  class: "list-bottom-text",
                  depth: "3"
                }, {
                  default: withCtx(() => [
                    createVNode(_component_n_ellipsis, { style: { "max-width": "90%" } }, {
                      default: withCtx(() => [
                        createTextVNode(toDisplayString(item.title), 1)
                      ]),
                      _: 2
                    }, 1024)
                  ]),
                  _: 2
                }, 1024)
              ]),
              item.disabled ? (openBlock(), createElementBlock("div", _hoisted_5)) : createCommentVNode("", true),
              isShowTools(item) ? (openBlock(), createElementBlock("div", {
                key: 1,
                class: "list-tools go-transition",
                onClick: ($event) => deleteHandle(item, index)
              }, [
                createVNode(_component_n_button, {
                  text: "",
                  type: "default",
                  color: "#ffffff"
                }, {
                  icon: withCtx(() => [
                    createVNode(_component_n_icon, null, {
                      default: withCtx(() => [
                        createVNode(unref(TrashIcon))
                      ]),
                      _: 1
                    })
                  ]),
                  default: withCtx(() => [
                    _hoisted_7
                  ]),
                  _: 1
                })
              ], 8, _hoisted_6)) : createCommentVNode("", true)
            ], 40, _hoisted_2);
          }), 128))
        ], 2)
      ]);
    };
  }
});
export {
  _sfc_main as default
};
