import '@das-fed/ui/packages/components/search/style.css';
import { withInstall as R } from "@das-fed/utils/with-install/index";
import { defineComponent as S, ref as o, computed as T, watch as y, createElementBlock as _, openBlock as g, normalizeStyle as w, normalizeClass as N, createCommentVNode as k, createVNode as W, unref as v, withCtx as B, mergeProps as O, createBlock as $, nextTick as P } from "vue";
import "element-plus/es/components/input/style/css";
import { ElInput as U } from "element-plus";
import { DasAutoRegisterIcon as j, DasIcon as C } from "@das-fed/ui/packages/components/icon/index";
import { DasTooltip as q } from "@das-fed/ui/packages/components/tooltip/index";
import { calcTextWidth as G } from "@das-fed/utils/common-tools";
import { setThemeRule as H } from "@das-fed/web/packages/theme/index";
const J = {
  inheritAttrs: !1
}, K = /* @__PURE__ */ S({
  ...J,
  __name: "Index",
  props: {
    modelValue: { default: "" },
    border: { type: Boolean, default: !1 },
    searchType: { default: "basis" },
    placeholder: { default: "" },
    size: { default: "middle" },
    disabled: { type: Boolean, default: !1 },
    clearable: { type: Boolean, default: !0 },
    prefixIcon: { default: "" },
    suffixIcon: { default: "" },
    isIconLeft: { type: Boolean, default: !1 },
    isTitle: { type: Boolean, default: !0 },
    isExpandAtFocus: { type: Boolean, default: !1 }
  },
  emits: ["update:modelValue", "change"],
  setup(f, { emit: m }) {
    const l = f, d = m;
    j({
      search: import("@das-fed/ui/packages/icons/search"),
      empty: import("@das-fed/ui/packages/icons/empty")
    });
    const p = o(null), c = o(null), a = T({
      get: () => l.modelValue,
      set: (e) => d("update:modelValue", e)
    }), u = o(!1), F = T(() => a.value ? a.value : l.placeholder), L = (e) => {
      let t = e + "";
      a.value = t, d("change", t);
    }, E = () => G(l.placeholder, 12);
    y(
      () => c.value,
      (e) => {
        setTimeout(() => {
          var n, V;
          const t = e;
          t && (s.value = ((n = t == null ? void 0 : t.ref) == null ? void 0 : n.offsetWidth) ?? 0, r.value = a.value ? (V = t == null ? void 0 : t.ref) == null ? void 0 : V.scrollWidth : E());
        }, 200);
      }
    );
    const s = o(0), r = o(0), x = () => {
      P(() => {
        var e, t, n;
        (e = c.value) != null && e.ref && (s.value = (t = c.value) == null ? void 0 : t.ref.offsetWidth, r.value = a.value ? (n = c.value) == null ? void 0 : n.ref.scrollWidth : E(), (s.value === r.value || r.value - s.value < 1) && (u.value = !1));
      });
    };
    y(() => [a.value, l.placeholder], x);
    const i = o(), A = () => {
      x(), s.value === r.value || r.value - s.value < 1 ? u.value = !1 : (u.value = !0, i.value && clearTimeout(i.value));
    }, z = () => {
      i.value = setTimeout(() => {
        u.value = !1;
      }, 200);
    };
    y(
      () => {
        var e;
        return (e = p.value) == null ? void 0 : e.$tooltipRef.popperRef.contentRef;
      },
      (e) => {
        e && (e.addEventListener("mouseenter", function() {
          u.value = !0, i.value && clearTimeout(i.value);
        }), e.addEventListener("mouseleave", function() {
          i.value = setTimeout(() => {
            u.value = !1;
          }, 200);
        }));
      }
    );
    const h = o(""), b = o(!1), I = T(() => (l == null ? void 0 : l.isExpandAtFocus) === !0 || (l == null ? void 0 : l.isExpandAtFocus) === "true"), D = () => {
      !I.value || s.value > 400 || (h.value = "400px", b.value = !0);
    }, M = (e) => {
      I.value && (h.value = "", b.value = !1);
    };
    return (e, t) => (g(), _(
      "div",
      {
        class: N(`das-ui-search ${e.size}`),
        style: w({ width: I.value && b.value ? h.value : "" })
      },
      [
        k(" 这里tooltip不能使用v-model:visible 有响应问题 "),
        W(v(q), {
          ref_key: "inputTooltipRef",
          ref: p,
          effect: "light",
          placement: "top",
          manual: !0,
          visible: u.value,
          disabled: e.isExpandAtFocus || !e.isTitle,
          content: F.value
        }, {
          default: B(() => [
            W(v(U), O({
              ref_key: "$refInput",
              ref: c
            }, e.$attrs, {
              placeholder: e.placeholder,
              type: "text",
              class: `main-input ${e.size} ${e.border ? "border" : ""} ${e.isIconLeft ? "left" : ""}`,
              modelValue: a.value,
              "onUpdate:modelValue": t[0] || (t[0] = (n) => a.value = n),
              disabled: e.disabled,
              onChange: L,
              clearable: l.clearable,
              onFocus: D,
              onBlur: M,
              onMouseenter: A,
              onMouseleave: z
            }), {
              prefix: B(() => [
                e.isIconLeft ? (g(), $(v(C), {
                  key: 0,
                  icon: e.prefixIcon ? e.prefixIcon : "search"
                }, null, 8, ["icon"])) : k("v-if", !0)
              ]),
              suffix: B(() => [
                e.isIconLeft ? k("v-if", !0) : (g(), $(v(C), {
                  key: 0,
                  icon: e.suffixIcon ? e.suffixIcon : "search",
                  style: { cursor: "pointer" }
                }, null, 8, ["icon"]))
              ]),
              _: 1
              /* STABLE */
            }, 16, ["placeholder", "class", "modelValue", "disabled", "clearable"])
          ]),
          _: 1
          /* STABLE */
        }, 8, ["visible", "disabled", "content"])
      ],
      6
      /* CLASS, STYLE */
    ));
  }
}), Q = (f, m) => {
  const l = f.__vccOpts || f;
  for (const [d, p] of m)
    l[d] = p;
  return l;
}, X = /* @__PURE__ */ Q(K, [["__scopeId", "data-v-0b97f6a7"]]), Y = {
  "--demo-alert-bg": {
    light: "#fff",
    dark: "rgba(255,255,255,.2)"
  },
  "--das-ui-search-border": "#d9d9d9",
  "--das-ui-search-icon": "#b2b2b2",
  "--das-ui-search-text": "#212121",
  "--das-ui-search-border-active": "#5582F3"
};
H(Y);
const ne = R(X);
export {
  ne as DasSearch,
  ne as default
};
