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