import { defineComponent as g, onMounted as z, watch as h, createElementBlock as n, openBlock as t, normalizeStyle as u, unref as p, Fragment as m, renderList as s, withModifiers as F, createElementVNode as O, toDisplayString as $, ref as x } from "vue";
import { isEqual as w, cloneDeep as H } from "lodash";
import { nanoid as b } from "nanoid";
import { SHJDatasourceV2 as J } from "../../commons/core/datasource/index.mjs";
import { autoInstallFont as V } from "../../commons/utils/json2css.mjs";
const j = ["onClick"], B = ["src"], M = g({ name: "zv-commons-loop-iterator" }), U = /* @__PURE__ */ g({
  ...M,
  props: {
    basicOption: {},
    sources: {},
    useEvents: {},
    uuid: {}
  },
  emits: ["on-change"],
  setup(f, { expose: S, emit: k }) {
    const e = f, v = () => {
      const r = x(), a = x([]);
      return {
        init: () => {
          J.parse({
            tId: e.uuid,
            sources: e.sources,
            callback: (o) => {
              try {
                r.value = b(), o && o.data ? a.value = H(o.data[0].data) : a.value = [];
              } catch {
                window.SHJParseEvent(e.useEvents, "dataListener", null), r.value = b(), a.value = [];
              }
            }
          });
        },
        key: r,
        loopData: a,
        renderItemStyle: (o) => ({
          gridTemplateColumns: `repeat(${o.columns}, 1fr)`,
          alignItems: o.alignItems,
          rowGap: o.rowGap + "px",
          columnGap: o.columnGap + "px",
          borderWidth: o.border.width + "px",
          borderColor: o.border.color,
          borderStyle: o.border.style,
          background: o.background.type === "color" ? o.background.color : `no-repeat center/100% url(${o.background.image})`,
          boxShadow: o.shadow.x + "px " + o.shadow.y + "px " + o.shadow.blur + "px " + o.shadow.diffus + "px " + o.shadow.color
        }),
        renderImageStyle: (o) => o ? {
          width: o.width + "px",
          height: o.height + "px",
          objectFit: o.objectFit,
          borderWidth: o.border.width + "px",
          borderColor: o.border.color,
          borderStyle: o.border.style,
          boxShadow: o.shadow.x + "px " + o.shadow.y + "px " + o.shadow.blur + "px " + o.shadow.diffus + "px " + o.shadow.color,
          padding: o.padding[0] + "px " + o.padding[1] + "px " + o.padding[2] + "px " + o.padding[3] + "px"
        } : {},
        renderTextStyle: (o) => (V(o.font), o ? {
          width: o.width + "px",
          height: o.height + "px",
          color: o.color,
          fontSize: o.size + "px",
          fontFamily: o.font,
          fontStyle: o.style,
          // textAlign: style.align,
          boxShadow: o.shadow.x + "px " + o.shadow.y + "px " + o.shadow.blur + "px " + o.shadow.diffus + "px " + o.shadow.color,
          padding: o.padding[0] + "px " + o.padding[1] + "px " + o.padding[2] + "px " + o.padding[3] + "px"
        } : {}),
        renderLoopWrapStyle: (o) => ({
          overflow: o.overflow,
          gridTemplateColumns: `repeat(${o.columns}, 1fr)`,
          rowGap: o.rowGap + "px",
          columnGap: o.columnGap + "px",
          borderWidth: o.border.width + "px",
          borderColor: o.border.color,
          borderStyle: o.border.style,
          background: o.background.type === "color" ? o.background.color : `no-repeat center/100% url(${o.background.image})`,
          boxShadow: o.shadow.x + "px " + o.shadow.y + "px " + o.shadow.blur + "px " + o.shadow.diffus + "px " + o.shadow.color
        })
      };
    }, {
      init: i,
      key: I,
      loopData: _,
      renderImageStyle: C,
      renderTextStyle: E,
      renderItemStyle: G,
      renderLoopWrapStyle: D
    } = v(), L = k, W = (r) => {
      L("on-change", r), window.SHJParseEvent(e.useEvents, "on-change", { data: r });
    };
    return z(() => i()), h(() => e.basicOption, (r, a) => {
      w(r, a) || i();
    }, { deep: !0 }), h(() => e.sources, (r, a) => {
      w(r, a) || i();
    }, { deep: !0 }), S({
      refresh: () => i(),
      refreshView: () => i(),
      refreshData: () => i()
    }), (r, a) => (t(), n("div", {
      key: p(I),
      class: "zerov-widget loop-iterator-wrap",
      style: u(p(D)(e.basicOption))
    }, [
      (t(!0), n(m, null, s(p(_), (c, l) => (t(), n("div", {
        key: l,
        class: "loop-iterator-item",
        style: u(p(G)(e.basicOption.itemStyle)),
        onClick: F((d) => W(c), ["stop"])
      }, [
        (t(!0), n(m, null, s(e.basicOption.itemContent, (d, T) => (t(), n("div", {
          key: d.id
        }, [
          d.type === "image" ? (t(), n("div", {
            key: 0,
            class: "loop-iterator-item-image",
            style: u(p(C)(d.style))
          }, [
            O("img", {
              src: c[d.field],
              alt: "图片"
            }, null, 8, B)
          ], 4)) : (t(), n("div", {
            key: 1,
            style: u(p(E)(d.style))
          }, $(c[d.field]), 5))
        ]))), 128))
      ], 12, j))), 128))
    ], 4));
  }
});
export {
  U as default
};
