import { defineComponent as a, watch as p, createElementBlock as d, openBlock as m, normalizeStyle as l, unref as f, ref as b, onMounted as g, nextTick as k } from "vue";
import { cloneDeep as v, isEqual as _ } from "lodash";
import { SHJDatasourceV2 as E } from "../../commons/core/datasource/index.mjs";
const h = a({ name: "zv-media-image-dynamic" }), x = /* @__PURE__ */ a({
  ...h,
  props: {
    basicOption: {},
    sources: {},
    useEvents: {},
    uuid: {}
  },
  setup(o, { expose: c }) {
    const e = o, i = () => {
      const r = b(""), t = () => {
        E.parse({
          tId: e.uuid,
          sources: e.sources,
          callback: ({ data: s }) => {
            try {
              window.SHJParseEvent(e.useEvents, "dataListener", s), r.value = s[0].data[0].src;
            } catch {
              window.SHJParseEvent(e.useEvents, "dataListener", null);
            }
          }
        });
      };
      return g(() => k(() => t())), { init: t, src: r };
    }, { init: n, src: u } = i();
    return p(() => v(e.sources), (r, t) => {
      _(r, t) || n();
    }, { deep: !0 }), c({
      refresh: () => n(),
      refreshView: () => n(),
      refreshData: () => n()
    }), (r, t) => (m(), d("div", {
      class: "zerov-image",
      style: l({
        backgroundImage: `url('${f(u)}')`,
        ...e.basicOption.mode === "repeat" ? {
          backgroundRepeat: "repeat",
          backgroundSize: "auto"
        } : {
          backgroundSize: e.basicOption.mode,
          backgroundRepeat: "no-repeat"
        }
      })
    }, null, 4));
  }
});
export {
  x as default
};
