import { defineComponent as j, ref as f, computed as ee, onMounted as te, watch as E, withDirectives as oe, openBlock as s, createElementBlock as d, unref as o, normalizeClass as x, createElementVNode as u, normalizeStyle as h, toDisplayString as O, createCommentVNode as b, createVNode as re, Transition as ne, withCtx as ae, Fragment as le, renderList as ie, withModifiers as ce } from "vue";
import { nanoid as F } from "nanoid";
import { cloneDeep as I, isEqual as V } from "lodash";
import { autoInstallFont as v, jsonToCssStyle as r } from "../../utils/json2css.mjs";
import se from "../../utils/clickOutSide.mjs";
const de = { style: { display: "flex", "align-items": "center", gap: "4px" } }, ue = {
  key: 1,
  class: "zerov-widget-select__prefix"
}, pe = ["src"], fe = ["src"], ve = ["onClick"], me = ["src"], he = { class: "zerov-widget-select__option-label" }, ge = j({ name: "zv-interaction-select" }), ke = /* @__PURE__ */ j({
  ...ge,
  props: {
    basicOption: {},
    sources: {},
    useEvents: {},
    uuid: {}
  },
  emits: ["update:modelValue", "on-change"],
  setup(B, { expose: H, emit: J }) {
    const p = B, L = () => {
      const t = f(), c = (e) => {
        if (t.value) {
          v(e.fontFamily), v(e.hover.fontFamily), v(e.focus.fontFamily);
          const n = f("");
          return e.boxShadow && (n.value = `${e.boxShadow.isInset ? "inset" : ""} ${e.boxShadow.offsetX}px ${e.boxShadow.offsetY}px ${e.boxShadow.blur}px ${e.boxShadow.diffus}px ${e.boxShadow.color}`), {
            ...r(e),
            ...r(e.hover, "hover"),
            ...r(e.focus, "focus"),
            boxShadow: n.value,
            padding: `${e.padding.map((a) => `${a}px`).join(" ")}`,
            backgroundColor: e.isBgImage ? "" : e.backgroundColor,
            backgroundImage: e.isBgImage ? `url(${e.backgroundImage})` : ""
          };
        }
        return {};
      }, l = (e) => {
        if (t.value) {
          v(e.fontFamily);
          const n = `${e.boxShadow.isInset ? "inset" : ""} ${e.boxShadow.offsetX}px ${e.boxShadow.offsetY}px ${e.boxShadow.blur}px ${e.boxShadow.diffus}px ${e.boxShadow.color}`;
          return e.placement === "bottom" ? {
            ...r(e),
            top: "100%",
            marginTop: "6px",
            boxShadow: n,
            padding: `${e.padding.map((a) => `${a}px`).join(" ")}`
          } : {
            ...r(e),
            bottom: "100%",
            marginBottom: "6px",
            boxShadow: n,
            padding: `${e.padding.map((a) => `${a}px`).join(" ")}`
          };
        }
      }, D = (e) => {
        if (t.value)
          return v(e.fontFamily), {
            padding: `${e.padding.map((n) => `${n}px`).join(" ")}`,
            ...r(e),
            ...r(e.hover, "hover"),
            ...r(e.active, "active")
          };
      }, U = (e) => {
        if (t.value)
          return v(e.fontFamily), {
            ...r(e)
          };
      }, W = (e) => {
        if (t.value)
          return v(e.fontFamily), {
            ...r(e),
            ...r(e, "hover"),
            ...r(e, "focus")
          };
      }, Z = (e, n) => {
        const a = n.find(($) => $.type === e);
        return a ? a.url : "";
      }, C = (e, n) => {
        if (t.value) {
          const a = n.find(($) => $.type === e);
          if (a)
            return {
              ...r(a)
            };
        }
      }, k = f(), g = f([]);
      return {
        key: k,
        init: () => {
          window.SHJDatasourceV2({
            tId: p.uuid,
            sources: p.sources,
            callback: (e) => {
              try {
                window.SHJParseEvent(p.useEvents, "dataListener", g), k.value = F(), e && e.data ? g.value = I(e.data[0].data) : g.value = [];
              } catch {
                window.SHJParseEvent(p.useEvents, "dataListener", null), k.value = F(), g.value = [];
              }
            }
          });
        },
        options: g,
        selectRef: t,
        rendererSelectInput: c,
        rendererSelectOption: D,
        rendererSelectDropdown: l,
        rendererSelectSelected: W,
        rendererSelectPlaceholder: U,
        rendererPrefixIcon: Z,
        rendererPrefixIconCss: C
      };
    }, y = f(""), z = J, i = f(!1), w = ee(() => {
      const t = P.value.find((c) => c.value === y.value);
      return t ? t.label : "";
    }), R = () => {
      i.value = !i.value;
    }, _ = f(""), T = (t) => {
      y.value = t.value, _.value = t.type, z("update:modelValue", t.value), z("on-change", t), window.SHJParseEvent(p.useEvents, "on-change", {
        data: t
      }), i.value = !1;
    }, N = () => {
      i.value = !1;
    }, {
      key: M,
      init: m,
      options: P,
      selectRef: X,
      rendererSelectInput: Y,
      rendererSelectOption: q,
      rendererSelectDropdown: A,
      rendererSelectSelected: G,
      rendererSelectPlaceholder: K,
      rendererPrefixIcon: S,
      rendererPrefixIconCss: Q
    } = L();
    return te(() => m()), E(
      () => I(p.basicOption),
      (t, c) => {
        V(t, c) || m();
      },
      { deep: !0 }
    ), E(
      () => I(p.sources),
      (t, c) => {
        V(t, c) || m();
      },
      { deep: !0 }
    ), H({
      refresh: () => m(),
      refreshView: () => m(),
      refreshData: () => m()
    }), (t, c) => oe((s(), d("div", {
      key: o(M),
      ref_key: "selectRef",
      ref: X,
      class: x(["zerov-widget-select", { "is-open": i.value }]),
      onClick: R
    }, [
      u("div", {
        class: x(["zerov-widget-select__trigger", { "is-active": i.value }]),
        style: h({
          ...o(Y)(t.basicOption.input)
        })
      }, [
        u("div", de, [
          w.value ? b("", !0) : (s(), d("span", {
            key: 0,
            class: "zerov-widget-select__placeholder",
            style: h({
              ...o(K)(t.basicOption.input.placeholder)
            })
          }, O(t.basicOption.input.placeholder.value), 5)),
          w.value && o(S)(_.value, t.basicOption.dropdown.option.prefixs) ? (s(), d("span", ue, [
            u("img", {
              src: o(S)(_.value, t.basicOption.dropdown.option.prefixs),
              alt: ""
            }, null, 8, pe)
          ])) : b("", !0),
          w.value ? (s(), d("span", {
            key: 2,
            class: "zerov-widget-select__selected",
            style: h({
              ...o(G)(t.basicOption.input.selected)
            })
          }, O(w.value), 5)) : b("", !0)
        ]),
        u("span", {
          class: x(["zerov-widget-select__arrow", { "is-open": i.value }])
        }, [
          u("img", {
            src: t.basicOption.input.arrow.url,
            alt: ""
          }, null, 8, fe)
        ], 2)
      ], 6),
      re(ne, { name: "fade-in-linear" }, {
        default: ae(() => [
          i.value ? (s(), d("div", {
            key: 0,
            class: "zerov-widget-select__dropdown",
            style: h({
              ...o(A)(t.basicOption.dropdown)
            })
          }, [
            u("ul", null, [
              (s(!0), d(le, null, ie(o(P), (l) => (s(), d("li", {
                key: l.value,
                class: x([{ "is-selected": l.value === y.value }, "zerov-widget-select__option"]),
                style: h({
                  ...o(q)(t.basicOption.dropdown.option)
                }),
                onClick: ce((D) => T(l), ["stop"])
              }, [
                o(S)(l.type, t.basicOption.dropdown.option.prefixs) ? (s(), d("span", {
                  key: 0,
                  class: "zerov-widget-select__option-prefix",
                  style: h({
                    ...o(Q)(l.type, t.basicOption.dropdown.option.prefixs)
                  })
                }, [
                  u("img", {
                    src: o(S)(l.type, t.basicOption.dropdown.option.prefixs),
                    alt: ""
                  }, null, 8, me)
                ], 4)) : b("", !0),
                u("span", he, O(l.label), 1)
              ], 14, ve))), 128))
            ])
          ], 4)) : b("", !0)
        ]),
        _: 1
      })
    ], 2)), [
      [o(se), N]
    ]);
  }
});
export {
  ke as default
};
