import "../../../../../../node_modules/.pnpm/vue@3.3.4/node_modules/vue/dist/vue.runtime.esm-bundler.mjs";
import { requireErrorImg } 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 { useDesignStore } from "../../../../../store/modules/designStore/designStore.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 "../../../../../settings/designSetting.mjs";
import { useChartEditStore } from "../../../../../store/modules/chartEditStore/chartEditStore.mjs";
import { LayerModeEnum } from "../../../../../store/modules/chartLayoutStore/chartLayoutStore.d.mjs";
import { fetchImages } from "../../../../../packages/index.mjs";
import LayersStatus from "../LayersStatus/index.vue.mjs";
import { defineComponent, computed, resolveComponent, openBlock, createElementBlock, createElementVNode as createBaseVNode, createVNode, withCtx } 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-flex-center item-content" };
const _hoisted_2 = { class: "list-text" };
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "index",
  props: {
    componentData: {
      type: Object,
      required: true
    },
    isGroup: {
      type: Boolean,
      default: false
    },
    layerMode: {
      type: String,
      default: LayerModeEnum.THUMBNAIL
    }
  },
  setup(__props) {
    const props = __props;
    useCssVars((_ctx) => ({
      "639cf5ae": themeColor.value
    }));
    const designStore = useDesignStore();
    const chartEditStore = useChartEditStore();
    const imageInfo = ref("");
    const fetchImageUrl = async () => {
      imageInfo.value = await fetchImages(props.componentData.chartConfig);
    };
    fetchImageUrl();
    const themeColor = computed(() => {
      return designStore.getAppTheme;
    });
    const select = computed(() => {
      const id = props.componentData.id;
      return chartEditStore.getTargetChart.selectId.find((e) => e === id);
    });
    const hover = computed(() => {
      return props.componentData.id === chartEditStore.getTargetChart.hoverId;
    });
    const status = computed(() => {
      return props.componentData.status;
    });
    const selectText = computed(() => {
      return props.layerMode === LayerModeEnum.TEXT;
    });
    return (_ctx, _cache) => {
      const _component_n_image = resolveComponent("n-image");
      const _component_n_ellipsis = resolveComponent("n-ellipsis");
      return openBlock(), createElementBlock("div", {
        class: normalizeClass(["go-content-layers-list-item", { hover: hover.value, select: select.value, "list-mini": selectText.value }])
      }, [
        createBaseVNode("div", _hoisted_1, [
          createVNode(_component_n_image, {
            class: "list-img",
            "object-fit": "contain",
            "preview-disabled": "",
            src: imageInfo.value,
            "fallback-src": unref(requireErrorImg)()
          }, null, 8, ["src", "fallback-src"]),
          createVNode(_component_n_ellipsis, { style: { "margin-right": "auto" } }, {
            default: withCtx(() => [
              createBaseVNode("span", _hoisted_2, toDisplayString(props.componentData.chartConfig.title), 1)
            ]),
            _: 1
          }),
          createVNode(unref(LayersStatus), {
            isGroup: __props.isGroup,
            hover: hover.value,
            status: status.value
          }, null, 8, ["isGroup", "hover", "status"])
        ]),
        createBaseVNode("div", {
          class: normalizeClass({ "select-modal": select.value })
        }, null, 2)
      ], 2);
    };
  }
});
export {
  _sfc_main as default
};
