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