import { defineComponent as s, unref as c, openBlock as k, createElementBlock as y, normalizeStyle as h, toDisplayString as I, createCommentVNode as O, ref as i, onMounted as _ } from "vue";
import { autoInstallFont as S, jsonToCssStyle as r } from "../../utils/json2css.mjs";
import { imgsPreloader as B } from "../../utils/imgPreloader.mjs";
const D = s({ name: "zv-interaction-button-image" }), $ = /* @__PURE__ */ s({
  ...D,
  props: {
    basicOption: {}
  },
  setup(u) {
    const o = u, m = () => {
      const t = i(), n = i(!1), a = (e) => !e.startsWith("http") && !e.startsWith("//") ? "../" + e : e, d = (e) => {
        if (t.value) {
          S(o.basicOption.css.fontFamily);
          const p = `url(${e.backgroundImage})`, f = `url(${a(e.hover.backgroundImage)})`, v = `url(${a(e.active.backgroundImage)})`;
          return {
            ...r(e),
            ...r(e.hover, "hover"),
            ...r(e.active, "active"),
            "background-image": p,
            "--hover-background-image": f,
            "--active-background-image": v
          };
        }
        return {};
      };
      return _(() => {
        B(
          [
            o.basicOption.css.backgroundImage,
            o.basicOption.css.hover.backgroundImage,
            o.basicOption.css.active.backgroundImage
          ]
        ).finally(() => {
          setTimeout(() => n.value = !0, 100);
        });
      }), { rendererDomStyle: d, buttonRef: t, loading: n };
    }, { rendererDomStyle: g, buttonRef: l, loading: b } = m();
    return (t, n) => c(b) ? (k(), y("button", {
      key: 0,
      ref_key: "buttonRef",
      ref: l,
      class: "zv-button",
      style: h(c(g)(t.basicOption.css))
    }, I(t.basicOption.value), 5)) : O("", !0);
  }
});
export {
  $ as default
};
